teleren/devto huggingface dataset:
What is Jamstack?
Tags: jamstack, webdev, javascript, beginners
Published: 2021-07-25 21:45:26

## What is Jamstack?

If you are learning web development, you may have heard this term before. The term Jamstack was first coined by Mathias Biilmann, CEO of Netlify in 2015.

JAM stands for JavaScript, Api's, and markup. It was a revolutionary new approach to building websites. This approach is not a framework, but is actually an architectural guideline using  many of the tools and skills that developers were already familiar with. 

Since it's conception, it has only grown in popularity and is now an important part of a web developers toolbelt.


## Why is it used?

Jamstack has many benefits and advantages that set it apart from other techniques. 

  It offers better performance, security, scalability, 
  maintainability, and ease of developer experience. 

Developers can build faster with less complications, and can focus more on user experience. Businesses can then be more agile in competitive markets, and make their customers more satisfied. End users get better content that is delivered faster.

Its a win-win for end users, developers, and businesses.

  

## How does Jamstack work?

Jamstack offers better performance by pre-rendering pages and content on build, as opposed to each time a user visits a webpage.

Pre-rendering is typically done as static pages at build time 
over a content delivery network (CDN).

Once an image, video, or other content is loaded for the first 
time it will then load faster when the user visits the same 
website again.

Security is stronger because it has less points, or vectors, of potential weakness. It lives on fewer servers and databases which are frequently targeted.


It is more scalable because the webpage's content can be cached in a content delivery network. Unexpected heavy traffic can be handled much easier and this means less down time.


Maintaining the systems is also easier through the use of a CDN. There is less complexity and therefore, fewer areas that can fail. 


Most aspects have to work at build time, so by the time a webpage is live, it has already been tested.


## Getting started and learning more

Now that you have been introduced to what Jamstack is and how it works, its time to take the next step. The best way to learn is to build!

If you would like to learn more, check out [Jamstack](https://jamstack.org/)
Electron Adventures: Episode 1: Creating New Electron App
Tags: electron, javascript
Published: 2021-07-25 16:42:31

Browsers won. Every day you use like 100 apps, and 99 of them are browser apps. Or phone apps, which are basically [browser apps with extra steps](https://www.youtube.com/watch?v=1kKoqE-sAb8). Most of the rest are games.

This is especially true for cross-platform apps, where every alternative - like Java, C#, Qt, terminal - fails on some fundamental level.

Unfortunately while browsers make great UIs, they are extremely limited at doing everything else.

One way to do apps is to ship an app with a small local web server, and have user's browser connect to that. This works for some apps, but as just a regular server you'll have very limited control over the browser. You also don't know which browser the user has, which might be a problem if you depend on any advanced features.

Our best solution is to just write an app in whichever way we like, and just ship a browser with it. Electron!

I'll talk more about various alternatives and their shortcomings in future episodes, for now let's get to starting our first Electron app.

### Technical notes

As [I couldn't decide which platform to use](http://t-a-w.blogspot.com/2021/07/looking-for-new-blog.html), I'll be double-posting this series to [dev.to](https://dev.to/taw) and [hashnode](https://hashnode.com/@taw), at least for the time being.

All code will be [in this github repo](https://github.com/taw/electron-adventures), organized by episode.

Most episodes are going to be fairly short, and I'd like to post the episodes at a rate of about one a day, but I will probably be fairly disorganized about it.

### Getting started

Hopefully [you already have node installed](https://nodejs.org/en/download/).

Create a new folder and let's go!

```
$ npm init -y
$ npm install --save-dev electron
$ npx electron .
Cannot find module 'index.js'. Please verify that the package.json has a valid "main" entry
```

Well, OK, it tells us to create `index.js`.

We need to import some stuff from `electron` package, create a window, and load a file for it to show. Then it's helpful to have some extra code to shut down the app when that main window is closed.

```
let { app, BrowserWindow } = require("electron")

function createWindow() {
  let win = new BrowserWindow({})
  win.maximize()
  win.loadFile("index.html")
}

app.on("ready", createWindow)

app.on("window-all-closed", () => {
  app.quit()
})
```

Now we just need to create `index.html`:

```
<!DOCTYPE html>
<html>
  <body>
    <h1>Welcome to the Internet!</h1>
  </body>
</html>
```

Now if you run `npx electron .`, it will show the window we just created.

### The result

And here's what we got:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtamxi2y8pii4ne3pcf3.png)

[All the code for the episode is here](https://github.com/taw/electron-adventures/tree/master/episode-01-creating-new-electron-app).

See you in the next episode.
How should I develop my amplify functions locally ?
Tags: aws, amplify, discuss
Published: 2021-07-25 21:02:45

I have been working recently a lot with amplify and I quite like all its features and how it makes aws quick and easy to get started with. But recently I have experienced that I tend to test most functions online, like after i have pushed them to the cloud. This has been the case mostly because some functions have some permission issues regardless of what I put in the cloud formation.

I really would like to know how i'm meant to test these functions, is the amplify mock command the best way or do you guys use something else ? Please let me know in the comments, this has been driving me crazy.
NodeJS Streams in Practice
Tags: javascript, webdev, node
Published: 2022-02-08 00:46:38

---
title: NodeJS Streams in Practice
published: true
date: 2021-07-25 20:19:53 UTC
tags: javascript,webdevelopment,node,nodejs
canonical_url: https://blog.insiderattack.net/nodejs-streams-in-practice-980b3cdf4511
---

[![](https://cdn-images-1.medium.com/max/2600/1*ts-xtQqKqzzigDErF3ZPQw.jpeg)](https://blog.insiderattack.net/nodejs-streams-in-practice-980b3cdf4511?source=rss----57f0c4748c10---4)

Turbo boost your Node.js application with Streams

[Continue reading on Deepal’s Blog »](https://blog.insiderattack.net/nodejs-streams-in-practice-980b3cdf4511?source=rss----57f0c4748c10---4)
Two way data binding in Vue
Tags: javascript, vue, eventdriven, webdev
Published: 2021-07-25 20:16:45

Sometimes we need to bind the value of a field and we need to change the data on the Vue instance in real time. If we use the standard bind we used in a tutorial of this series before, it would not work. In order to do that, we must use the v-model directive:

```HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
</head>
<body>
  <div id="demo">
    {{ realTimeString }}
    <br>
    <input type="text" name="string" v-model="realTimeString">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript">
  

  new Vue({
  el: '#demo',
  data: {
    realTimeString : ""
  }
});

</script>

</body>
</html>
```

We'll see how the string over the field will change according to what we type in that field.
Inbuilt Functions in C++ for Strings 🐱‍👤 
Tags: webdev, cpp, codenewbie, programming
Published: 2021-07-25 20:02:59

##*So in this blog post I will be talking about some of the few inbuilt functions in CPP in string (C++)*


###The function in C++ language is also known as **procedure or subroutine in other programming languages**.

####To perform any task, we can create function. A function can be called many times. It provides modularity and code reusability.

As we all know C++ is a language that has a rich and vast library, some of which are :-

##*1) Length Function:*

### Here with the use of this function we can find out the length of a particular array !!

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sk1p89v16s0l2b6h3sxo.png)


##*Syntax: strlen(str);*



**Here in the following image the strlen is the main function that we are using to find out the length of the particular string.**
 

##*2) Compare Function:*

### Here with the use of this function we can compare the lengths  of two different arrays !!

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0x903hbh8nr6kqfuybkz.png)
 

##*Syntax: strncmp(str1, str2);*



**Here in the following image the strcmp is the main function that we are using to compare any two arrays, it takes 2 parameters and compare them if the comparison is equal to 0 then the strings are equal other wise they are not equal.**


##*3) String Copy Function:*

### Here with the use of this function we can copy one arrays into another array !!

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4dshaq4dltnt6pywruqz.png)
 


##*Syntax: strcpy(destination_str, source_str);*


 
**Here in the following image the strcpy is the main function that we are using to copy the data of one element into another array, it takes 2 parameters and copy the data of the later parameter in the first array.** 

##*4) String n Copy Function:*

### Here with the use of this function we can copy some elements of one arrays into another array !!

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8a6b5a5vy2wxy13ur94n.png) 


##*Syntax: strncpy(destination_str, source_str);*


 
**Here in the following image the strncpy is the main function that we are using to copy some elements of an array  into another array, it takes 2 parameters and copy the data of the later parameter in the first array.** 



##*5) String Concatenate Function:*


### Here with the use of this function we can concatenate both of the arrays !!

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwb2kw9o93dlz0uljut2.png)


 
##*Syntax: strcat(str1, str2);*
 


**Here in the following image the strcat is the main function that we are using to concatenate both of the arrays.**

----------------------------------x-------------------------------

##*Enough for today, now its time for some meme 😎*


![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxxl35pywvu2isjgsqpg.png)
 

#Happy Coding 🚀
HTML Form Controls
Tags: html, css, react
Published: 2021-07-25 19:04:45

On a website, we need a way to get information from our user from time to time.  A form for them to fill out is how we will get that information. See below the different 'form controls' that are available.

Text Input: This is simply a text box for a single line of text that the user will fill in.

Text Area: This is a larger text box that is used when the information will take up more space than just one line. So its for multiple lines of input.

Checkboxes: A user can select or unselect as many as apply to them.

Drop-down boxes: When you click on this, a series of options show up, but only one can be selected.

Radio buttons: The user must select one of the provided options. 

Submit button: This button when clicked on will send the information provided by user and send it to another webpage. 

Image button: This allows you to use an image.

So this is how we extract data/information from our user in a simple straight forward way. Happy Coding!
How To Do Web Scraping Weather Data Using Puppeteer

Published: 2021-07-25 18:32:22

Puppeteer uses the Chromium browser behind the scenes to actually render HTML and Javascript and so is very useful if getting the content that is loaded by javascript/AJAX functions.

For this, you will need to install Puppeteer inside a directory where you will write the scripts to scrape the data. For example, make a directory like this.

https://youtu.be/I1ubYg2pNjQ
Offline Apollo graphql playground
Tags: graphql, apolloserver, javascript, node
Published: 2021-07-25 18:21:26


In a Apollo graphql server application, at the graphql end point , usually the http://localhost:4000/graphql you may prompted to use the new Apollo studio / playground, which required connection to the internet. 

There is also an option to use the sand box which let you use the playground without login to studio. Still miss the *old graphql playground* ?

### What is playground ?

Graphql Playground is a interactive script tool for testing query, typeDefs and mutations, it also list available schema and other useful information.

### How to use a offline playground ?

We can optionally configure an *offline graphql playground*  (old) in our server/index.js file of our project using the *ApolloServerPluginLandingPageGraphQLPlayground* plugin from the core module.

First import the plugin from core module 

```javascript
const { ApolloServerPluginLandingPageGraphQLPlayground } = require('apollo-server-core');
...
const server = new ApolloServer({
    typeDefs, resolvers,
    plugins: [
        ApolloServerPluginLandingPageGraphQLPlayground({
            // options
        })
    ]
});

```

Start the project and go to the graphql end point , you will meet the old playground which is ideal for development purposes.

## Wanna disable the landing page ? 

Still the landing page annoying you ? use the second plugin to disable the feature

```javascript
const server = new ApolloServer({
    typeDefs, resolvers,
    plugins: [
        ApolloServerPluginLandingPageGraphQLPlayground({
            // options
        })
        , ApolloServerPluginLandingPageDisabled()
    ]
});
```

don't forget to import the plugin first.

[For good read](https://devmnj.blogspot.com)
GitHub Contributors Map
Tags: github, contributorswanted, typescript, vite
Published: 2021-07-25 17:55:34

## Ever wanted to know if there are some repository contributors in your area?

### Find out with my new project [GitHub Contributors Map](https://shinigami92.github.io/github-contributors-map)!

The website is still very young and I have not yet decided how to design it :thinking:  
Also, there are some minor mistakes in finding the correct latitude and longitude for some people :shrug:  
If you want to help me, you are very welcome :smiley:

Screenshots for `vitejs/vite`:

![America](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nrldj3y8wbpj1rwu9grw.jpg)

![Asian](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lq7t75kkzssm8z104au4.jpg)

![Europa/Africa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvp24s7dgg2prcx0642p.jpg)
Mastering Drag N Drop API in HTML & JS 😎
Published: 2021-07-25 17:19:50

## Introduction

Few days back, I was working on a side project and I was required to create a Drag N Drop feature like [Scratch](https://scratch.mit.edu/projects/editor/), then I read a lot about this Drag n Drop feature.

## Getting Started
In this post, I will be showing 3 Drag n Drop use case, so without wasting the time, let's start.

### Drag n Drop Simple

Here, I have created 2 container div, where we can move our child divs. While dragging we will store **id** of the child in [DataTransfer](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer) Object and after dropping we will fetch the **id** from the DataTansfer Object then it will the node will be appended in the dropped container.
 
{% codepen https://codepen.io/abhishekraj272/pen/LYyeRXP default-tab=js,result %}

### Drag, Drop, Copy n Delete

Similarly, I have created 2 container divs, where we can move the child, but when we drop the child, it is copy-pasted instead of cut-paste. 
When it is redropped in the previous container, it is deleted.

{% codepen https://codepen.io/abhishekraj272/pen/XWRVdym default-tab=js,result %}

### Drag, Drop n Swap
Here, we have 1 container and we can swap (left to right) nodes.

{% codepen https://codepen.io/abhishekraj272/pen/KKmZNNG default-tab=js,result %}

Connect Me @ [Linkedin](https://www.linkedin.com/in/abhishekraj272/) [Github](https://github.com/abhishekraj272) [Twitter](https://twitter.com/abhishekraj272) [Youtube](https://www.youtube.com/channel/UCvHn2T8DSJzEWzYDdK3Dt8A) 😇

Thanks to [Web.dev](https://web.dev) & [W3Schools](https://www.w3schools.com/)
Get better at reading open source code
Tags: github, opensource, beginners
Published: 2021-07-25 17:18:05

---
title: Get better at reading open source code
published: true
description: get better at reading open source code and start contributing.
tags: github, opensource, beginners
cover_image: https://images.unsplash.com/photo-1509966756634-9c23dd6e6815?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=710&q=80
---

This guide is from a personal experience and for me it was so practical, so if you have any other techniques please list them in the comment.


First let me list the main techniques i use to be able to read an open-source project. then i will explain.


## 1- Techniques
1- Understand what the project do
2- Understand folder names (yep this is the most important one)
3- Your skills in the project's tech stack

### ***Understand what the project do***
The first step is understanding what the project is about, why using it, what it's functionalities and what language it uses so you can read the code. this is easy for almost everybody. if you don't know what's the project is about you can't do anything.

for example you want to contribute to kubernetes for someone who is reading now doesn't even know or didn't use kubernetes before and doesn't know how kubernetes is built, won't be able to do anything.

### ***Understand folder names***
after understanding what the project is about, you need to understand the project's folder name, this is really so important.
i will give you some folder names and tell you what it may contain.

| Folder      | Description |
| ----------- | ----------- |
| build,dist      | Compiled files       |
| src,lib,<project_name>   | main source code      |
|  test,spec  | automated tests        |
|  tools,utils,helpers  | Tools and utilities        |
|  static,public  | static files        |
|  ...  | ...        |
[golang folder names and meaning](https://github.com/golang-standards/project-layout)

there is a plenty of names sometimes names are meaningful and sometimes it doesn't make sense so just search for name meaning or just ask the developer,  and sometimes the developer explains the folder names to make it easy for new contributors.

### ***Your skills in the project's tech stack***
last thing is your skills in the project's tech stack, for example you are experienced in ruby and react, but the project is using ruby and vue, you still can contribute but the other porject is using PHP and angular you won't be able to read the code.


**after reading this, try to find an open-source project or some project that you are interested in and try to read it using these techniques.**

Good luck !
CRUD with .NET5 Web API and RavenDB
Tags: dotnet, csharp, ravendb
Published: 2021-07-25 17:14:18

Recently I met RavenDB, a NoSQL database that has some differences compared to the famous MongoDB such as its construction made in C#, its creator Oren Eini is a great contributor to the .NET community, its ease of installation and handling and its beautiful user interface.

 Based on these attributes, I decided to invest a little time to learn more about this NoSQL database, which already has 10 years of existence and can easily face one of the best known NoSQL databases today.

 For that I created a very simple project, an API in .NET 5 with Visual Studio 2019 (You can use VS Code if you prefer) I installed the RavenDB client and then created the database connection and the methods for CRUD. 
An interesting detail is that with RavenDB you can insert new data or update existing data using the same function, the secret is the id, if it is null Raven identifies that you are inserting new data, but if it is filled and it is valid it just updates the registry.

 You can check the project here:
[Github repository](https://github.com/zangassis/ravendb-shop-api)

 The readme has a very basic guide on how to download and install RavenDB on your machine.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mfktgb9xdgbf3azas3yf.jpg)

 Feel free to clone or fork the project.  Suggestions, criticism and praise are also welcome 😉.

Photo by <a href="https://unsplash.com/@tylerdq?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Tyler Quiring</a> on <a href="https://unsplash.com/s/photos/raven?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
How to use different ssh credentials for GitHub for the same Linux user
Tags: github
Published: 2021-07-25 17:05:18

If you have multiple GitHub users, setting up ssh key can become tricky. You cannot add the same, default key to 2 users. You need to set up your machine to use different keys depending on which identity you want to use. This article will show how to set up ssh config to support additional ssh-key, along with your default key.

# Default key set up
I assume you already have one ssh-key set up, it's working OK, and it's somehow similar to what they describe in [the doc](https://docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent). This part of the setup will be left unchanged - you will be able to keep on using the standard domain with your standard key.

# Additional key set up
First, you need to generate an additional key and make sure it's saved under another name. You can follow [this documentation](https://docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent):
```sh
$ ssh-keygen -t ed25519 -C "your_email@example.com" -f another-identity
```

Where `another identity is a file name where the new key is saved.

# Testing the new key

Add the `another-identity.pub` to your GitHub account, and test it with:
```sh
$ ssh -i another-identity -T git@github.com
```

Where `-i another-identity` makes ssh use the non-default key for connection. If all goes well, you will see your other profile name in the GitHub response:

```sh
$ ssh -i another-identity -T git@github.com                
Hi marcin-test! You've successfully authenticated, but GitHub does not provide shell access.
``` 

# Configuration for git CLI
With the new key in place, you can create `.ssh/config` and set there:
```
Host another-indenity.github.com
  Hostname github.com
  PreferredAuthentications publickey
  IdentityFile ~/.ssh/another-identity
```

Now, when you can test if this piece of configuration works:

```sh
$ ssh -T git@another-idenity.github.com
Hi marcin-test! You've successfully authenticated, but GitHub does not provide shell access.
```

# Checking out with new identity

Now, let's test our access to a private repository available only on our second user:
```
$ git clone git@github.com:marcin-test/test.git    

Cloning into 'test'...
ERROR: Repository not found.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
```

Normal clone fails, but if we replace `github.com` with `another-identity.github.com`:
```
git clone git@another-idenity.github.com:marcin-test/test.git
Cloning into 'test'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (3/3), done.
```

Now everything works as expected.

# Summary

In this article, we have seen how to set up 2 identities for your GitHub projects.