teleren/devto huggingface dataset:
Installare Node.js su Siteground
Tags: linux, siteground, node, webdev
Published: 2022-10-01 18:03:16

## Introduzione
Questa guida è stata pensata per chi necessita di Node.js su un piano di hosting Siteground sprovvisto.

## Connessione via SSH
Prima di installare Node.js colleghiamoci al server tramite ssh.
Nella sezione **Sviluppatori** di **SiteTools** cliccare su **Gestione Chiavi SSH**, inserire il nome della chiave per poi crearla.
Tutti le credenziali sono disponibili nello stesso pannello, serviranno per il passo successivo. Ora copiamo la chiave segreta sulla nostra macchina in un file `.pub` e apriamo un terminale.

Colleghiamoci via SSH dipendentemente dal nostro sistema operativo:
- su **Linux/Mac OS**: `ssh USER@HOST_NAME -pPORT`
Su Siteground la porta di default ssh è la **18765**:
```sh
ssh -i "path/to/key/nome-chiave.pub" username@hostname.com -p18765
```
- su **Windows**: in [PuTTY](https://www.putty.org/) inserire il nome del server host, impostare il tipo di connessione su SSH e la porta su 18765. Immettere il nome utente e premere Invio.

Ora se richiesta inseriamo la password impostata su SiteGround in precedenza.

## Installazione

Eseguiamo un veloce check sulla nostra distro con:
```sh
uname -srm
```
Nel mio caso è una `Linux 3.12.18-clouder0 x86_64`. Ora andiamo nella sezione download del sito di [Node.js](https://nodejs.org/en/download/) e copiamo il link dell'installer del nostro sistema operativo verificato in precedenza. Nel mio caso copio il link del `Linux Binaries (x64)`. 
```
https://nodejs.org/dist/v16.17.1/node-v16.17.1-linux-x64.tar.xz
```

> Prestate attenzione all'estensione del file perché se non sarà uguale a `.tar.gz` il terminale vi **darà errore**. Come nel mio caso basterà **cambiare l'estensione** ed il gioco è fatto.

Ora ci basterà seguire le seguenti istruzioni per installare `Node.js` e `npm`:

```sh
cd ~
curl https://nodejs.org/dist/v16.17.1/node-v16.17.1-linux-x64.tar.gz | tar xz
mv node-v6.2.2-linux-x64/ nodejs
mkdir ~/bin
cp nodejs/bin/node ~/bin
cd ~/bin
ln -s ../nodejs/lib/node_modules/npm/bin/npm-cli.js npm
```
Prestate attenzione in quale cartella eseguite i comandi, soprattutto l'ultimo: `ln -s` viene usato per creare nomi simbolici. Se non lo farete nella cartella `~/bin` allora il comando `npm` non verrà riconosciuto dal server.

## Test
Per testare se è tutto corretto vi basterà eseguire i seguenti comandi: 

```sh
node --version
npm --version
```

Se come risposta riceverete le rispettive versioni allora `Node.js` e `npm` sono stati installati correttamente.

---

Spero questa mini guida vi sia piaciuta , considera di mettere ❤️ al post e seguirmi sui miei social:

[Linkedin](https://www.linkedin.com/in/giandomenico-pagliara-699108179/)
[GitHub](https://github.com/PagliaraG)
Need help with Resume
Tags: career, help
Published: 2022-10-01 18:00:52

I finished my resume today. I'm not sure how to write a good resume. I need someone to go over it and make valuable suggestions on how I can improve it.

Resume link: https://drive.google.com/file/d/1AExrQvdYU7mGEFb4DVKTBLViAQQlKdHC/view?usp=sharing

{% embed https://drive.google.com/file/d/1AExrQvdYU7mGEFb4DVKTBLViAQQlKdHC/view?usp=sharing %}

Please feel free to offer your valuable suggestions.
Snap Scroll in React in Less than a Minute
Tags: react, webdev, beginners, javascript
Published: 2022-10-01 17:56:39

## Motivation:
We all have seen website which uses snap scrolling from one section to another traditionally we can do Animation in CSS and write a ton styles to achieve that Let's do that within a Minute with help of `react-use-scroll-snap`.

## Installation:
we just need to create a new react app and install `react-use-scroll-snap`.
```
npx create-react-app test-app
yarn add react-use-scroll-snap
```
## Usage:
Import useScrollSnap hook and pass the ref of the component.
I'm using default react app duplication header and just changing the page name for simplicity you can use your components.

```JSX
import { useRef } from "react";
import useScrollSnap from "react-use-scroll-snap";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const scrollRef = useRef(null);
  useScrollSnap({ ref: scrollRef, duration: 50, delay: 20 });
  return (
    <div className="App" ref={scrollRef}>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Page 1</p>
      </header>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>page 2</p>
      </header>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Page 3</p>
      </header>
    </div>
  );
}

export default App;

``` 
That's it we have snap scroll in our app. This post is focust on react you can do same thing for Vanilla JS with `scroll-snap` Cheers.
How to count all files in a directory in Linux
Tags: webdev, linux, bash, react
Published: 2022-10-01 17:48:50

To count all files in a directory in linux, simply cd to that directory and then run the following command:
```
ls | wc -l

Alternatively, you can select the directory by adding the directory to the command like so:
```
ls /var/css | wc -l

Here, `/var/css` is the directory you want to count the files in.

## Counting all files in Window
To do the same thing on windows, use `cd` to move to the directory in question, and then run the following on command line:
```
dir
```
This will list all files and directories in a folder, and tell you how many files and directories exist.
Coding vs shopify
Published: 2022-10-01 17:25:51

My question is that, there a lot of tools that make a better and more effective e commerce store in just minute!

So, Is there any need for a developer to make an e commerce website for a user, even if they can also make sites on Shopify or WordPress!

Because a coding website takes a lot of time as compare to Shopify or WordPress sites, if the client has no time they can order a store in a hurry, so he/she cannot wait a month for you to develop a site in PHP or NodeJS.

I am so confused, is there any future for website development, and What are the reasons why clients give you orders?
Python: The Difference Between Sets, Lists, Dictionaries and Tuples
Tags: python, webdev, tutorial
Published: 2022-10-01 17:16:49

Python has four types of data collections. When to use which, and why we have four, can be confusing. In this guide I'll go through what each of the types are, and how to use them. The four types of data collection in python are:
- **lists**: which are ordered, changeable and can contain duplicate values, and indexed by number
- **tuples**: which are ordered, unchangeable, and can contain duplicate values.
- **sets**: which are unordered, have unchangable values once set, but may have items added or deleted, and cannot contain duplicate values.
- **dictionaries**: which are unordered (depending on your python version), changeable, have indexes, and cannot contain duplicate values.

To put this into simpler terms, here is a table of their key properties:

![Comparison of data collections in Python](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yb794qsw7qbzrhcgsnoz.png)


**† dictionaries are ordered only after Python 3.7**

**†† sets may have new values added, or values removed, but we cannot change values already added**

You might be wondering why there are so many, but each of these have specific uses cases:
- **lists** are useful when we have data which may contain duplicates. They are like typical arrays in other languages such as Javascript.
- **tuples**, are **faster** than lists, but cannot be changed. This is useful when we have a set number of values to iterate through, like the column names of a table, which **may** contain duplicates.
- **sets**, which again, are **faster** than lists, but whose original contents cannot be changed. We can still add and remove items, though, making them more flexible than **tuples** in that regard. They are a great way to test if an item is a member of a specific set of other items - i.e. if we wanted to check the word `apple` was in a set.
- **dictionaries**, which are like lists, but with keys. These are like objects in other languages such as Javascript, and are useful for giving context to our data through key value pairs.


## Learn More about Python Data Structures

Each of these types of data have a useful purpose in Python - and using them properly is key to mastering Python. I have written indepth guides on each here which go into much more detail on how to define and use each of these data structures. To learn more - click below:
- **Python Data Collections**
- [Python Data Collections: Lists](https://fjolt.com/article/python-lists)
- [Python Data Collections: Tuples](https://fjolt.com/article/python-tuples)
- [Python Data Collections: Sets](https://fjolt.com/article/python-sets)
- [Python Data Collections: Dictionaries](https://fjolt.com/article/python-dictionaries)
How add comments to your Gatsby site with utterances
Published: 2022-10-13 22:38:36

---
title: How add comments to your Gatsby site with utterances
published: true
date: 2022-10-01 17:12:33 UTC
tags: 
canonical_url: https://www.darraghoriordan.com/2022/10/01/how-to-add-utterances-comments-gatsby-typescript/
---

If you want to add comments to your blog quickly there is a nice tool called utterances that uses a GitHub Repo as the api.

Here is how I setup utterances for my gatsby blog in typescript.

<!-- end excerpt -->
## Utterances

Utterances is a javascript tool that uses a GitHub repo as the store and api. This makes it ideal for static sites.

People will have to log in to their GitHub accounts to post a comment so spam shouldn’t be too much of an issue. This does mean that Utterances is mostly suited to a site with a developer audience.

Because data is stored in a GitHub repo, you actually own it! This is much nicer than tools like Disqus.

## Setup on Github

You have to have a public GitHub repo. My blog content is private so I set up a specific repo for blog comments.

The you install the app on that repo by visiting

[https://github.com/apps/utterances](https://github.com/apps/utterances)

Click “install” and then select your comments GitHub repository.

## Adding the UI to your site

You have to inject a script where ever you want the control. I created a component for this. You can see how each of the settings work below.

```
import React, { useEffect } from 'react'
export const Comments = () => {
  const commentsInjectionRoot: React.RefObject<HTMLDivElement> =
    React.createRef()

  useEffect(() => {
    if (commentsInjectionRoot.current?.children.length === 0) {
      const scriptEl = document.createElement('script')
      scriptEl.setAttribute('src', 'https://utteranc.es/client.js')
      scriptEl.setAttribute('crossorigin', 'anonymous')
      scriptEl.setAttribute('async', 'true')
      scriptEl.setAttribute(
        'repo',
        'darraghoriordan/darragh-oriordan-com-comments'
      )
      scriptEl.setAttribute('issue-term', 'pathname')
      scriptEl.setAttribute('theme', 'github-light')
      commentsInjectionRoot.current?.appendChild(scriptEl)
    }
  }, [])

  return (
    <div className="container pt-8">
      <h1 className="mt-0 mb-0 text-3xl font-normal leading-normal">
        Comments
      </h1>
      <hr className="my-0" />
      <div ref={commentsInjectionRoot} />
    </div>
  )
}
```

Then where ever you want the comments add the component.

```
<Comments />
```

[![comments ui](https://www.darraghoriordan.com/static/c4c54fa3bdef72623401eeb674d69e91/acf8f/comments.png "comments ui")](/static/c4c54fa3bdef72623401eeb674d69e91/7e318/comments.png)
_comments ui_

## Summary

Utterances is an easy way to add comments to a developer site and you own all the data so it’s low risk.

Give it a try today! - [https://utteranc.es/](https://utteranc.es/)
Medusa Hackathon is live 🎉 Free swag and up to $1,500 in prizes
Tags: hacktoberfest, opensource, javascript, react
Published: 2022-10-01 17:04:16

### Medusa Hackathon is LIVE! 🎉

Participate in the Medusa Hackathon and contribute to the leading open source ecommerce platform for devs while celebrating Hacktoberfest.


**What you'll get as participant:**
-   😻 Medusa Hackathon Tee, Hoodie and more
-   🪄 Certificate of Participation
-   💰 Chance to win up to $1,500


**Who can participate?**
Participation is for EVERYONE! You can go solo, join as a team or join other projects in our Medusa Discord

---

Submission deadline: **Oct 23, 2022**

Read more and sign-up on: **[medusajs.com/blog/medusa-hackathon](https://medusajs.com/blog/medusa-hackathon)**


![I'm in](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kojcooe1ns2m2ipzr4oa.gif)
How to get all keys in Redis
Tags: redis, webdev, tutorial, beginners
Published: 2022-10-01 16:56:00

In Redis, we use `KEYS` to retrieve specific keys we've defined in our database. For example, if we'd [created a Redis key](https://fjolt.com/article/redis-creating-key-value-pairs) like this:

```
set someKeyName someValue
```

Then we could get that value by using `KEYS` like this:
```
KEYS someKeyName
```

Interestingly, Redis `KEYS` support glob style patterns - so we can match many keys using text familiar to you if you've ever worked with regex. Here are some examples:
- `someK?y` - the question mark represents any one character - so `someKqy`, `someKay`, `someKyy`, etc, are all valid.
- `someK*y` - the asterisk represents any character including spaces - so `someKy` is valid
- `someK[a-d]y` - to match `someKay`, `someKby`, `someKcy` or `someKdy`.
- `someK[ea]y`, - to match `someKey` or `someKay`
- `someK[^10]y` - where `[^10]` means any number before 10 not including 10.
- `someK[^e]y` - where `[^e]` means any letter before e, but not including e.

This glob style pattern support also lets us retrieve all keys at once. Since the asterisk (*) or wild card symbol is supported, **to retrieve all keys in redis at once**, you only have to run `KEYS *`:
```
KEYS *
```

If you have a lot of keys, this may not be what you want to do - but for certain use cases, it can be quite useful to retrieve all keys in Redis at once.
Updating state in react based on the previous state
Tags: react
Published: 2022-10-01 16:53:50

Suppose the age is 42, let's see the difference between first and second function


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

in first function, after one click, the age will only be 43 rather than 45! This is because calling the set function does not update the age state variable in the already running code. So each setAge(age + 1) call becomes setAge(43).

in second function, you may pass an updater function to setAge and Here, age => age + 1 is your updater function. It takes the pending state and calculates the next state from it.
React puts your updater functions in a queue. Then, during the next render, it will call them in the same order:
age => age + 1 will receive 42 as the pending state and return 43 as the next state.
age => age + 1 will receive 43 as the pending state and return 44 as the next state.
age => age + 1 will receive 44 as the pending state and return 45 as the next state. There are no other queued updates, so React will store 45 as the current state in the end.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgticpsi1geksviacwgw.gif)
Swift!!
Tags: swift, ios, mobile, programming
Published: 2022-10-01 16:44:45

## As Apple states "The powerful programming language that is also easy to learn".
For **iOS**, iPadOS, macOS, tvOS, and watchOS, **Swift** is a potent and user-friendly programming language. Swift offers contemporary features that developers adore, and writing Swift code is interactive and enjoyable. The syntax is short but expressive. Swift code is secure by default and results in blazing-fast software.

To be honest using swift has its own **pros** and **cons** when compared to cross platform language as _**React Native**_ and _**Flutter**_. Swift code is converted into machine code that is optimized for current hardware using the exceptionally fast LLVM compiler technology. Additionally, it offers object-oriented capabilities like classes, protocols, and generics, providing the performance and power required by Cocoa and Cocoa Touch developers.

**Swift** is meant to take the place of C-based languages. The Swift community is still expanding, and the language itself is continually changing. Swift source code is accessible to everyone and can be found on GitHub.

So, to conclude You can use Swift today to create an entirely new application or use Swift code to implement new functionality in your app. Swift code coexists with existing Objective-C files in the same project and has full access to Objective-C APIs, making adoption easier.
List of Programming languages in Html dropdown and Checkboxes (Hacktoberfest)
Tags: hacktoberfest, beginners, html, opensource
Published: 2022-10-01 16:32:24

Very recently, while building an application, I needed a list of programming languages to be displayed for my users to select their programming interests. But, there were no known repositories which had a list of programming languages as html checkboxes/radio buttons/dropdown list. Hence, I had to code in the 50 most frequently used programming languages.

Turns out, if you Google it (I referred to Wikipedia, https://en.wikipedia.org/wiki/List_of_programming_languages), there are more than 300 known languages which people use, and the top 50 doesn't justify what people learn.

Hence, I decided to use the opportunity provided by Hacktoberfest'2022 to create the list in both dropdowns (html select options) and checkboxes with the help of user contributions.

Here is my repository: https://github.com/chilarai/list-of-programming-languages

If you feel you want to contribute to the list, please reply back to open issues so that I can assign you the particular issue. If you want to use the repo in any of your projects in the future, please feel free to do so. 

List of open issues: https://github.com/chilarai/list-of-programming-languages/issues


Happy Hacking!!!
Javascript: How much Math do you do?
Tags: javascript, webdev, beginners, programming
Published: 2022-10-01 16:12:19

Yes. Javascript provides the built-in object `Math`. It has several useful methods to work on numbers. Let's go through, which we really use.

### Round to integer

1. **round()** - ➡️ Rounds to its nearest integer. 
2. **ceil()** - ⬆️ Rounds up to its nearest integer.
3. **floor()** - ⬇️ Rounds down to its nearest integer.

```javascript
const num = 10.5;

console.log(Math.round(num)); // 11
console.log(Math.ceil(num)); // 11
console.log(Math.floor(num)); // 10

const num1 = 10.4;

console.log(Math.round(num1)); // 10
console.log(Math.ceil(num1)); // 11
console.log(Math.floor(num1)); // 10
```
`Remember like this:`

round - 10.0 - 10.4 -> 10 and 10.5 -> 11.0 -> 11

ceil (up) - 10.1 - 10.9. -> 11

floor (down) - 10.1 - 10.9 -> 10

The same applies to negative numbers.

### Return Integer part

**trunc()** - returns integer part as it is.

```javascript
const num = 10.547;

console.log(Math.trunc(num));
> 10
```

### Return absolute number

**abs()** -  returns positive number.

```javascript
const num = 10.547;
const num1 = -10.547;

console.log(Math.abs(num)); // 10.547
console.log(Math.abs(num1)); // 10.547
```

### power & sqrt

Hope no explanation is needed.

```javascript
const num = 9;

console.log(Math.pow(num, 2)); // 81
console.log(Math.sqrt(num)); // 3

```

### max & min

Returns Max number and min number in the given list.

```javascript
console.log(Math.max(3,4,5,1,2)); // 5

console.log(Math.min(3,4,5,1,2)); // 1

```

### random number

random() - method used to return random number between 0 - 1.

```javascript
console.log(Math.random()); // 0.34609498534013383

```

Few more methods of `Math` object that we rarely use them.

Those are:

`Math.sign()` - returns -1 (negative), 0 (null), 1 (positive) based on the number provided.

`Math.sin() & Math.cos()` -  trignometric operations - sin 90 - 1.

`Math.log(x) & Math.log2() & Math.log10()` - returns logarthmic conversion.

Thanks 😊
20 Creative Ways to Solve Exam Dumps
Tags: javascript, programming, react
Published: 2022-09-29 05:33:30

 It takes time, <a href="https://getalllatestdumps.com/">Get All Latest Dumps</a> exercise, and the proper attention. We right here at apprehend that. We apprehend that due to the fact we were on this enterprise for years and running in area complete of much less savory check prep reassets. These horrible prep reassets driven our group to make a effective alternate with inside the Exam area. We were given ill and uninterested in seeing capacity examination applicants get price-gouged over CCNA . We couldn’t take care of understanding that tough employees from throughout the international, in search of new competencies and a higher existence, get tricked into paying absurd quantities for low-pleasant examination substances. Often fabric that become obsolete or at first-rate, to be had on-line thru network  sites with out hurting the wallet. And it needed to forestall. You are geared up to leap in! That’s it, the subsequent web page may be complete of exercise questions. Challenging fabric. And first-rate of all, a danger to hone your competencies. It’s good enough in case you sense in over your head. We all did at a few point, this subsequent step is ready pushing thru that worry and on the point of address some thing as tough because the EXAM DUMPS. <a href="https://getalllatestdumps.com/">Exam Dumps</a>If you get stuck, attain out. If you spot others stuck, assist them. 

Click Here More Info >>>>> https://getalllatestdumps.com/
DPS909 Blog :Static Site Generator(ag-ssg) Lab 3
Tags: opensource
Published: 2022-10-01 15:58:03

Hey everyone, thanks for reading my Blog post.
In this post i am going to talk about the new features which i have added into my application.

**Link to repository :**    [ag-ssg](https://github.com/anshul137/ag-ssg).

## Overview
In this lab we are supposed to add this feature in our current project.
- Add an option `-l, --lang` flag, which indicates the language to use when generating the `lang` attribute on the root `<html>` element. For example, `--lang fr` would mean that the HTML documents are in French, and would include `<html lang="fr">`.
- Add support for a `horizontal rule` in Markdown. The Markdown `---` should get converted to an `<hr>` tag.

## Requirements
- This tool is built using the [Node.js](https://nodejs.org/en/)

## Links to issues created by me  in [ag-ssg](https://github.com/anshul137/ag-ssg).
- [issue 8](https://github.com/anshul137/ag-ssg/issues/8)
- [issue 9](https://github.com/anshul137/ag-ssg/issues/9)


To get language feature working in my application, i have created the `lang` option in my app.js option which will allow the user to mention in which language they want to generate the particular page.
By default i have set the value of `lang` to be in `en-Ca` in index.js.

To convert the `---` to `` in `html` i just have to search through the .md file and implement the `` if the search was successful.
 
```
Thanks
```