teleren/devto huggingface dataset:
GNU
Published: 2022-10-30 21:02:46


![GNU 30TH](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9uq3tmdjtnry14p7pir.png)
Ever wondered why can’t we see the source code of Windows or MAC OS? 
Why do we pay for the operating system when buying a laptop or PC? 
Why we can install Linux OS freely but need to pay for Windows?
Windows, MAC, Unix: You use them daily but don’t know how they actually work. Because these are closed-source programs that are copyrighted and not available for further research or use. You may have also heard of or used the UNIX OS which is a closed source. 
There was a need for an open-source OS, a freeware whose code is freely available and can be modified and distributed. Free doesn’t necessarily mean free of cost, here free stands for free use. [Free Software](https://dev.to/cofsug/free-softwares-5gcf)
**Hence, GNU!**

**But what exactly is GNU?**

**The GNU Project**
GNU Project was announced by Richard Stallman in 1983. The aim was to develop and publish software collaboratively and allow users to use them freely, copy and distribute.
The GNU Manifesto:

- Freedom to run a program for any purpose
- Freedom to study the mechanics of the program and modify it
- Freedom to redistribute copies
- Freedom to improve and change modified versions for public use

To implement this manifesto, even the operating system needed to be free software.
That’s why GNU/Linux was developed!

**The GNU Operating System**
GNU stands for GNU’s Not Unix! Meaning it is UNIX-like but is free software and does not contain UNIX-like code. GNU is licensed by GNU General Public License (GNU GPL).

GNU is a collection of free softwares which can be used as an operating system or can be used in parts with other operating systems.
Most of the time GNU is also referred to as GNU/Linux or simply Linux, as it uses a UNIX-like kernel Linux.

![Tux:Logo of Linux](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rrv8rwnw8do4wf7es3a.jpeg)
<center>**Tux: The logo of Linux**</center>
**Why does GNU come with Linux?**
GNU is just the source code or the software developed under the GPL. But it cannot be used as it is. It requires an OS to interpret the computer. So, it is combined with the Unix-like Open Source Kernel, Linux. These together are popularly known as GNU/Linux or Linux or GNU.

GNU not only developed an operating system, but it also grew a worldwide open-source community! And by reading and accepting the ideology, you are a part too :).

**Tease your brain more. Go from a bit to the byte…**

- Why do we need open-source code? Can’t we just work with licensed versions?

     Read: [Blog on Open Source](https://dev.to/cofsug/open-source-3dff), [Open Source Official Website](https://opensource.com/resources/what-open-source)

- I am too comfortable with Windows, so why Linux?

     Read: [Why Linux is Better than Windows?](https://itsfoss.com/linux-better-than-windows/)
<br/>
**_~ Vaishnavi Pabalkar_**
Progress Chronicle from a Beginner
Tags: beginners, scratch, projects
Published: 2022-10-30 21:00:13

My bootcamp recommended posting to Dev.to to find community and get in the habit of networking and putting myself out there. The only tangible thing I have to share at this moment is a 2 year old Scratch project I made to understand the most basic of basic concepts. 

I'm pretty much an empty vessel for knowledge right now, but I hope to make excellent progress in the coming months. Below is a link to "Taco Cat," a mini game on Scratch if you want to see what a toddler could code! 

Have a great day!

Code File: [https://github.com/Samanthag2009/Playing-Around/blob/main/TacocaTFinal.sb3](url)

Scratch: [https://scratch.mit.edu/](url)
JavaScript: Create an Excel file from another Excel file
Tags: javascript, html, webdev, programming
Published: 2022-10-30 20:53:27

Why should I want to create an Excel file from another Excel file? 

If you work with tons of Excel files every day and need to share some information to some people/agency/company and other information to some other people/agency/company and you are tired of wasting time copying and pasting... here's how you can take advantage of web development.

## Using this HTML Form:
![HTML Form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ixnqefgrn7tcg3idxnu.png)

## Go from this:
![Original Excel file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8sgto0n0860aviun9d9n.png)

## To this:
![Excel file generated by the HTML Form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/admsr23ibk57v7vp8iri.png)

I won't make a whole speech about this as I am way better demonstrating results than wasting words. Enjoy!

{% codepen https://codepen.io/viktormorales/pen/bGKVagb %}

Cheers!
Static analysis tools
Tags: opensource, javascript, webdev, github
Published: 2022-10-30 20:45:55

Hi !

### Static Analysis tools

This week I've been setting up code formatters for my [project](https://github.com/mnosov622/simple-ssg1).

To format the code I used [prettier](https://prettier.io/). 

To remove lints from the code I used [Eslint](https://eslint.org/).

Setting up these tools for your project is not complicated at all. I will briefly cover steps to do that.

**Prettier:**

1) Run `npm install --save-dev --save-exact prettier` to install prettier

2) Create empty config file for your rules with the following command:

`echo {}> .prettierrc.json`

3) Create `.prettierignore` file and write files and folders you want prettier not to format

**ESLint:**

Setting up is very similar to prettier.

1) Run `npm init @eslint/config`

2) Open created `.eslintrc.{js,yml,json}` file

3) Write rules for ESLint

### Overview

These tools are very powerful and make our life easier. You just code and don't worry about formatting. To be honest, previously when I didn't know about code formatters, I used to manually fix the indentation in files. Uh, that was a work :D

**I added `"prettier": "npx prettier --write ."` to the scripts of package.json file in order to run prettier from command line with `npm run prettier`.**

**Also, added `  "eslint": "npx eslint ."` to the scripts of package.json file, so I can run `npm run eslint`.**

After I run these tools, code becomes more readable and structured.

### How to integrate tools with IDE?

To integrate these tools with IDE we need to add `.vscode` folder to the root of project and add `settings.json` file, specifying which prettier we would like to use.

### Code formatters are great!

I truly enjoy that tools like prettier exists, they simplify the process of coding. You just save and all formatting is done automatically!
How to create a brand logo grid
Published: 2022-10-30 20:38:55

In this post I will demonstrate how to create a brand logo grid like the one below:


![Brand logo grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2uitayj6e4bre1bx1kqu.png)

The tricky part of such a grid is the colored gap between the logo tiles.

The solution I came up with, I think is acceptable.
I added a 1px box-shadow to the grid items, and I used the wrapper’s :after element to hide the "border" around the grid

```css
.brand-grid {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  
  // this is the empty space where the lines will go
  gap: 1px;
  
  width: 100%;
  position: relative;
  
  &:after {
    content: '';
    position: absolute;
    // Remove pointer events because
    // this element covers everything.
    pointer-events: none;
    
    // By using negative inset value
    // we make the :after pseudo-element
    // 2px larger than its parent.
    // This is because the lines that we want to hide,
    // overflow the container because they are shadows.
    inset: -2px;
    
    // this 3px box shadow will hide 
    // the overflown lines, and 1 more px.
    box-shadow: inset 0 0 0 3px #fff;
  }
  
}

.item {
  padding: 30px;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px #ddd;
}
```

{% codepen https://codepen.io/istavros/pen/JjZoeXW  %}
Getting into Digital Humanities
Tags: digitalhumanities, webdev, productivity, datascience
Published: 2022-10-30 20:37:49

Since October 1, 2022 I am back at the University of Vienna, where I started with the [Master's program Digital Humanities](https://studieren.univie.ac.at/en/degree-programmes/master-programmes/digital-humanities-master/) (DH for short).

Since digitalization is having a lasting impact on many areas of science and society, I thought this degree would be perfect for me to become an accessibility specialist, since screen reader users in particular benefit from digital content.

Over the next few months, I'll be updating you on what classes I'm taking, what I'm learning in class, and how I'll be applying what I'm learning to my goals.

## Courses for this semester

I will participate in three courses. Let me give you a quick overview what these are about (copied from the course catalogue), their aims, contents and methods.

### 1. Introduction to DH Tools and Methods 

The course is aimed at providing students with the skills necessary to understand the sheer potential of the digital methods for the humanities, using the Python Programming Language for a handful of common tasks in the domain.

The course will present a broad overview of methods and tools, specifically covering the following: OCR & Natural Language Processing (NLP) Pipelines, Visualization & Dashboards, Spatial Analysis, Image Analysis, Social Network Analysis (SNA), Sentiment Analysis, SQL and NoSQL Database Management. 

### 2. Telling Data Stories - Diagrams, Graphs, Maps and other visual and physical representations of (research) data

The visualization of (humanities) research data by means of different tools and forms of representation is an essential part of the Digitial Humanities.

The aim of this course is the elaboration and critical reflection of different forms of representation of (humanities) research data. By means of a practice-oriented approach, we will get to know different tools for data visualization (e.g. QGIS, Palladio, R, Python, etc.), test them, and check the resulting representations for their suitability.

In doing so, we want to ask together what constitutes a "good" visualization, what significance data visualizations have in the (humanities) scientific knowledge process, and how narratives can be told with data.

### 3. Eye Tracking - Quantifying human gaze

The aim of the course is to get to know eyetracking technology and related research possibilities in the field of humanities in theory and practice.

In the theoretical part, the history, development and technological progress of eyetracking will be presented and discussed using the system(s) available in the MediaLab of the faculty.

This is followed by a practical approach to the system through data generation with actual eyetracking research. Participants will develop research questions that can be examined with gaze data, that will be captured during a recording session.
Staking ETH on your Own Node
Tags: ethereum, aws, blockchain
Published: 2022-10-30 19:54:41

Some quick research on running an Ethereum validator node and staking 32 ETH.  

There are a ton of ways to acquire and setup the node.  The easiest and most cost effective I could find was configuring this via the AWS marketplace for $450 a year:   [AWS Marketplace: Ethereum Geth Node Pre-synced](https://aws.amazon.com/marketplace/pp/prodview-e7dmfikm7s4zs)

Coinbase and Kraken charge between 10% and 15% for staking services.  

Annual reward for 32 ETH = is 2.4830 which is about $2,000 (Oct 30th 2022).
My cost when running a node ends up being 23% with these numbers.  Thus it really only starts to make sense to run my own node if staking over 64 ETH.  Another way to look at it, if ETH doubles in price, it will start to make sense to run my own node with only 32 ETH.  

Now we have a threshold for when it makes sense to run by own node by the numbers.  The alternative is to use Coinbase or Kraken which will take very little time to start and no time to maintain.   When I run my own node, it will be a pain to be paying costs in fiat and earning in crypto.  It is also takes time and effort to setup and maintain the node, even though it is greatly minimized by AWS.   My sense is that running my own node only makes sense if and when it will earn an additional $400 a year in profit.

The critical thing to keep in mind is that there is currently no way to "unstake" your ETH.  So this decision will stick until unstaking is supported at some point in the future.  

In the meantime, I am looking at staking with Ledger and Lido DApp [Staking with Ethereum (ETH) - Earn money while holding crypto assets | Ledger](https://www.ledger.com/staking-ethereum).  This is interesting to me because it is a DApp, I get to pick the validator, and it gives you stETh.  

References:
[Ethereum Staking Calculator: Best ETH Staking Rewards & Pools](https://ethereumprice.org/staking/)
Another option for deploying your own node: [Deploy your own ETH node in minutes](https://blog.zeet.co/eth/)
Autoliker for Tinder, Bumble, OkCupid, Hinge
Published: 2022-10-30 19:39:05

Auto swipe Right on Tinder, Bumble, OkCupid and Hinge today with [the Android app](https://play.google.com/store/apps/details?id=com.swipe.likemaster) . The website is [this](https://app.swipetinder.me).
How To get Started with programming as a beginner.
Tags: programming, javascript, webdev, tutorial
Published: 2022-10-30 19:33:58

## Getting started.

What comes to your mind when you think about programming. In my mind the first comes is programming is hard. tones of coding languages. 
but it's just before you started. once you started you will feel like oh how silly I was thinking. 

## Programming Language. 
The most important thing Programming Language. there are plenty of programming languages available in the programming world. Which one we choose if we just getting started. Well it depends on person to person or what you want to, programming is not just about print('hello world'). There are to many different jobs out there which uses all different languages and frameworks. So which one we should learn. I suggest if you have never code in your life then choose Python it's easy to write its syntax is like writing an English sentence.
make small projects with it, make your coding basics clear and then you can switch from Python to any other language.

## What do you Want to become.

well now you learnt a Programming Language. but what do you want to become. there are many different things out there you can do when you started your journey as a programmer.
for example: 

- Web Development
- App Development 
- Game Development
- Machine Learning. 
- many more.
 
choose any one field and learn it and create projects deployed them share with other peoples. 

## Just Learn enough! 

You don't have to become a master Just learn this much that you can create something on your own. programming is all about creating things, being stuck on a problem, finding a solution.
Implementing Tailwind CSS
Tags: css, opensource, react, hacktoberfest
Published: 2022-10-30 19:21:05

Tailwind CSS is a utility-first CSS framework which means we can use utility classes to build custom designs without writing CSS as in traditional approach. 

**Step 1 -- Install Tailwind CSS**
Install `tailwindcss` and its peer dependencies via npm, and then run the init command to generate both `tailwind.config.js` and `postcss.config.js`.

```
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

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





**Step 2 -- Configure your tempelate paths**
Add the paths to all of your template files in your `tailwind.config.js` file.

```
content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
```

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



**Step 3 -- Add the Tailwind directives to your CSS**
Add the `@tailwind` directives for each of Tailwind’s layers to your `./src/index.css` file.
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

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


**Step 4 -- Start your build process**
Run your build process with `npm run start` in your terminal and start using Tailwind’s utility classes to style your content.

```
npm run start
```
[tailwindcss documentation](https://tailwindcss.com/docs/guides/create-react-app)
What is you favourite online tool?
Tags: webdevtools, newsletter
Published: 2022-10-30 19:19:09

---
title: What is you favourite online tool?
published: true
description: I’m starting a newsletter where I weekly lust a set of online tools that help you in any way improve you web development flow. I’m looking for inspiration so what is you favourite tool?
tags: webdevtools, newsletter 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-30 19:15 +0000
---
I'm New in Town
Tags: beginners, career, writing
Published: 2022-10-30 18:51:19

Being in a new environment can be quite challenging; new people, new air, new... everything. But, one can easily go round these challenges if he/she is held by the hand and taken through this unfamiliar maze. Luckily, I'm here and happy to do just that.
Technical Writing is a field that entails spelling out specific information about a specific product to a specific audience. Lots of ‘specifics,’ right? Technical Writing is also a lucrative field as basically every product needs documentation; from what it is used for to how it is used and why one should use it. This means that technical writers are on a high demand, good news, isn't it?
Then, you ask, what are the qualities of a good technical writer? Well, I'll say firstly, you have to be convinced that you want to play the role. Be sure that technical writing is what you want to do, don't be double-minded. You also have to be creative, let your mind be familiar with the concept of thinking outside the box. Consistency is also an essential quality you must possess to be successful. In your process of learning the idea of this field, be consistent.
**How can I get along?**
Getting into Technical Writing for the first time was quite intriguing for me. I was introduced into this field by someone I would love to call my ‘helper.’ He helped me in getting familiar with the idea. Thus, one, look for someone that you know can be your ‘helper.’
The next thing you should do is to go in search of materials that will enlighten you on the know-how of your newfound environment. I got hold of a free online course: https://developers.google.com/tech-writing/announcements and various online materials including articles, lots of articles. These helped me a lot in settling in.
It is also a good idea for you to get acquainted with individuals in this same field for a smooth start up. Communicate with like-minded individuals; people that you share goals and aspirations with. A good example is an online community like http://dev.to, which I belong to. so, why not get into a community that'll help make you the perfect writer that you are?
I will conclude by saying that you must invest in something to get the best out of it. When I started off as a technical writer, I invested my time, my strength, and resources in making it work. I didn't see this field as a difficult one, but, I knew I had to put in extra effort to make things better for myself. Use the social media to your advantage, and be sure to always have a winning mindset. Best of luck!
Implementing JsConfig in react app
Tags: react, javascript, webdev, beginners
Published: 2022-10-30 19:02:48

Creating `jsconfig.json` file in your project will make it easier to develop complex javascript applications that have a lot of different folders by using absolute paths. 

**Step 1** -- **Creating jsconfig.json file**
In the root directory of my project (ie the app folder), I created a new file named `jsconfig.json` as shown below.


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

**Step 2** -- **Configure the path**
In this jsconfig.json file, I added a `compilerOptions` key and set the `baseUrl` to `src`. You can also include an `include` key and set it to `src` array. That's all

```
{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": ["src"]
}
```
 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orzc4ow4a1j9ptem8gi0.png)
CSS white-space property
Tags: css, html, webdev, beginners
Published: 2022-10-30 19:00:30

Is it possible to make (whitespace: pre-line) only start counting new lines from the first character?

Current:

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

Counts the first line as the line the <code> element is written, therefore creating an empty line of text on the first line of the code element.

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

Counts the first line as the line the text/characters start, therefore treating "Gender: Female" as the first line of the code element.
Full Stuck Website using Only JavaScript
Tags: javascript, beginners, node, programming
Published: 2022-10-30 18:49:03

If you are front end developer and you are looking at which language should learn to become a full-stack developer? what if tell you that you can run javascript on the server?
this guide you will find all required to develop web apps using javascript.
[Javascript tutorial:run javascript on server](https://tissueweb.com/article/javascript-tutorial)
How to create a progress bar - Simple loader - A step-by-step tutorial
Tags: css, html, webdev, programming
Published: 2022-10-30 18:43:18

**Tutorial on how to create a simple progress bar - loader.**

## <u>HTML</u>
For HTML, we need only an element for progress bar and an element for progress inside it.

```html
<div class="progress-bar">
    <div class="progress"></div>
</div>
```

## <u>CSS</u>
For CSS, first we'll style the progress bar.

We'll set position to relative, height to 20px and width to 300px.

Then we'll set border to 2px solid blue with 15px radius.

Lastly, we'll set overflow to hidden.

```css
.progress-bar {
    position: relative;
    height: 20px;
    width: 300px;
    border: 2px solid rgb(41, 113, 168);
    border-radius: 15px;
    overflow: hidden;
}
```

Now we'll style the progress.

This element will display the progress. We'll set it's position to absolute and height to 100% and width to 0. Width property displays the percentage of the progress, so you can simply set 50% width and the progress bar will display 50% progress.

Now we'll set background color to the same blue we used as border for progress bar.

Lastly, we'll set border to 2 pixels solid neon green, with 15 pixels radius and set box sizing to border box.

```css
.progress-bar .progress {
    position: absolute;
    background-color: rgb(41, 113, 168);
    width: 0px;
    height: 100%;
    border-radius: 15px;
    border: 2px solid rgb(174, 255, 0);
    box-sizing: border-box;
}
```

Now we'll create an animation that increases the elements width from 0 to 100%.

```css
@keyframes progress {
    0% {width: 0%;}
    100% {width: 100%;}
}
```

And we'll set that animation to our progress element with 3 seconds duration, infinite, ease-in-out.

With the animation timing function property, you can also create a progress as steps, by setting step(number of steps) instead of ease-in-out. Detailed explanation on video below.

```css
.progress-bar .progress {
    position: absolute;
    background-color: rgb(41, 113, 168);
    width: 0px;
    height: 100%;
    border-radius: 15px;
    animation: progress 3s infinite ease-in-out; /*  Added animation  */
    border: 2px solid rgb(174, 255, 0);
    box-sizing: border-box;
}
```

And that's it.

You can find video tutorial and full code [here](https://designyff.com/code/simple_progress_bar).

Thanks for reading. ❤️