teleren/devto huggingface dataset:
The DevOps Handbook, the Phoenix Project, and the Unicorn Project
Tags: books, devops, programming, coding
Published: 2023-10-08 16:33:59

I've always been fascinated by the evolving landscape of the IT industry, especially when it comes to making things more efficient and collaborative. When I discovered DevOps, it was like finding a missing puzzle piece. But the true depth of DevOps became abundantly clear to me only after reading three seminal books: "The DevOps Handbook," "The Phoenix Project," and "The Unicorn Project."

### Why I found DevOps intriguing

DevOps isn't just another industry buzzword; it's a transformative methodology that blends development with operations. This integrated approach accelerates software delivery, reduces errors, and fosters a culture of collaboration. To me, this was a game-changer, a way to break free from the stifling operational silos that plague many organizations.

### My key takeaways from DevOps literature

#### "The DevOps Handbook"

When I picked up "The DevOps Handbook," I was blown away. This wasn't just a primer; it was a comprehensive manual. Written by Gene Kim, Patrick Debois, John Willis, and Jez Humble, the book provided me with practical, actionable steps to implement DevOps in a real-world scenario. Their insights are backed by thorough research and case studies, which added an authoritative layer to the text.

#### "The Phoenix Project"

This book was a breath of fresh air. It narrates the challenges and triumphs of an IT manager named Bill in a fictional company. While it is a story, the lessons it encapsulates are deeply rooted in the real-world applications of DevOps. I found it to be both entertaining and enlightening.

#### "The Unicorn Project"

This sequel to "The Phoenix Project" switched gears to focus on the developers' perspective. It deepened my understanding of DevOps, illustrating how this methodology can be applied ground-up and not just from a managerial perspective.

---

By the way, if you're keen on the future of web development, you should check out WebCrumbs on GitHub. It's a project I'm excited about, aiming to become the Wordpress for React. Feel like it's something you'd be interested in? [Go ahead and star WebCrumbs to stay in the loop!](https://github.com/webcrumbs-community/webcrumbs)

{% embed https://github.com/webcrumbs-community/webcrumbs %}
instant distributed database- gun.js
Tags: javascript, database, web3, webdev
Published: 2023-10-08 16:19:56

GUN is like a super cool toolkit for building apps that need to share data securely. It’s all about keeping things decentralized and private, allowing developers to create applications similar to popular services like Dropbox. With GUN, you can work with different types of data, from simple values to complex documents and videos, making it really versatile. Plus, it works offline and ensures that your data stays encrypted and safe. Many developers love it for creating alternatives to mainstream apps, and there’s a great community behind it, making it even better!

it is easy to import in your project

``` html
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
```
here we have a basic example using gun to add an entry and listen to it.

``` javascript
const key = 'sample-key';
const data = {
  message: 'Hello, GUN!'
};

// Store data in the GUN database
gun.get(key).put(data, ack => {
  if (ack.err) {
    console.error('Error storing data:', ack.err);
  } else {
    console.log('Data stored successfully!');
  }
});

// Retrieve data from the GUN database in realtime
gun.get(key).on(storedData => {
  if (storedData) {
    console.log('Retrieved data:', storedData);
  } else {
    console.log('No data found for the key:', key);
  }
})
```

That is all you need to get started with gun!

gunjs provides an incredibly simple interface for programming and eases out most of the headaches, such ss authentication. in the next example you’ll see how easy it is to authenticate with gunjs.

``` javascript
const gun = Gun();
const user = gun.user();

function register() {
    user.create(username, password, (ack) => {
        if (ack.err) {
            console.error(ack.err);
        } else {
            console.log('User created successfully:', ack);
        }
    });
}

function login() {
    user.auth(username, password, (ack) => {
        if (ack.err) {
            console.error(ack.err);
        } else {
            console.log('User logged in successfully:', ack);
        }
    });
}
```
I don’t think it can get more effortless than that! gun.js has a lot to offer, it is for most the convenient and the fastest tool i have used to create prototypes and scalable applications!

stay tuned for more!

## [originally published at by blog](https://raghab.xyz/instant-distributed-database-gun-js/)
```
No fatigue js, just learn !
Published: 2023-10-07 17:26:03

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

🚀 Breaking the Silence! Back from the shadows, and boy, do I have something cool to share!

Ever think creating an app is child's play? Sure, a 6-year-old might fiddle with React. But, oh, the real magic happens when you dive into the nitty-gritty details!

Today, I unveil my open-source project—a solution to demystify the complexities.

While many devs ride the JavaScript framework wave, they often miss the backstage view. They get dazzled by the shiny new things in the JS kingdom (Frameworks, libraries, you name it).

Guess what? You can craft your own magic! Just master the basics:

Wrangle data structures and algorithms
Grasp the intricacies (Bundler, Transpiler, Parser, Linter, Formatter, AST, Browser, Environment...)
Navigate Node.js like a pro with APIs (fs, path, crypto, http...)
Be savvy with handy packages:
gulp.js: Task automation
TypeScript: Boosts your coding comfort
prompts: Your go-to for terminal user interaction
minimist: Parse and wield arguments like a ninja (npm create abou-stack@latest arg3)
rollup: Bundle that code up
CI/CD: Git and GitHub dance for source code management
This tool? 

It's your express ticket to launch an app pronto, all tailored to your tech stack. For this ride, I've chosen Astro and the PERM stack. Oh, and did I mention? The project is not just open source; it's your canvas to paint on! 🎨
David Writer: Your source for expert opinions on education, technology and programming issues
Tags: education, technology, programming, webdev
Published: 2023-10-08 16:15:40

Greetings! Allow me to introduce myself – I'm David Writer, a dedicated writer with expertise in crafting informative and captivating articles within the realms of education, technology, and programming. 


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

Over the years, I've had the privilege of contributing my work to some of the most prominent newspapers in the United States, and I'm excited to provide you with a glimpse into my world of expertise.

I have a deep passion for writing and a keen interest in staying up-to-date with the ever-evolving world of technology. Consequently, my career is centered around creating articles that shed light on the latest trends, innovations, and ideas in these rapidly evolving fields.

In the realm of education, I explore topics that are crucial for students, educators, and parents. Whether it involves delving into innovative teaching methods, examining the impact of technology on the learning process, or providing valuable tips for navigating the educational landscape, my goal is to ensure that you are well-informed.

Technology is the heartbeat of our rapidly changing world, and I extensively cover the latest tech trends, gadgets, and groundbreaking developments. My aim is to help you understand how technology can enhance both your personal life and professional endeavors. From inquiries about artificial intelligence and cybersecurity to staying updated on the latest smartphone innovations, I've got you covered.

For those who are intrigued by the intricacies of coding and software development, you've come to the right place. My articles encompass a wide range of topics, including programming languages, development tools, and best practices. Whether you're a seasoned developer or just embarking on your coding journey, my goal is to make programming concepts accessible to everyone.

My work has graced the pages of leading newspapers across the United States, and I'm always eager to share my knowledge and experience with a diverse audience. If you're in search of expert insights, practical information, or simply wish to keep abreast of the ever-evolving landscapes within the realms of education, technology, and programming, don't hesitate to get in touch.

Let's embark on this journey of exploration and learning together. Connect with me, follow my articles, and join me in unraveling the fascinating world of education, technology, and programming. Your curiosity and interest are the driving forces behind my articles, and I warmly welcome you to be a part of it.

Stay tuned for intriguing articles, profound reflections, and deeper insights into the dynamic fields I cover. Thank you for inviting me into your world of knowledge and discovery!

More about me here: https://www.linkedin.com/in/david-writer/
Bash history
Tags: linux, bash, beginners, tutorial
Published: 2023-10-08 15:36:50

You can scroll the history of the commands you run by the up and down arrows in the terminal.

But in case you would like to look at the list of the comamnds you run you can type run `history`. It will print the commands in the terminal.

You can view them using less program by piping history to less `history | less`. 

Once you find the command you woould like to re-run just exit if you are in less type `!` followed by the line number of the command. 

What you have done now is called history expansion. It is called like that because `!1345` is expanded into the full command at the line number in the history file corresponding to the number you wrote.

The list file is located in the home directory under the name `.bash_history`
React: useState and useEffect
Tags: webdev, react, beginners, codenewbie
Published: 2023-10-08 15:34:03

##Intro

React is a way of using JavaScript in an efficient and straightforward way, separating the code into different component files. It is used to build web applications. Officially, it is defined as "A JavaScript library for building user interfaces."[1] Two of the most important basic React hooks are useState and useEffect. useState allows one to add and update a state variable.[2] useEffect allows for performing side effects and also allows one to synchronize a component with an external system.[3]

##useState
State in React is dynamic and can change overtime. It is effectively the default value when a component mounts. Each component maintains its own state but only sets the initial state for its children.[4] In React, there is a clear basic hierarchy of parent component(s) and children. The parents pass props - properties - to the children. Props cannot be changed by the components themselves but are passed to children by parent components.

from:
import React from 'react';

to:
import React, { useState } from 'react';

In order to actually use useState, it has to be imported into the component in which it is being used, as show above. useState will be imported in parentheses (so will useEffect, as we shall see). 
The setup in the actual function will look something like this:

function App() {

  const [quotes, setQuotes] = useState([])

//rest of code
  }

The convention here is to start with the initial state, then the way to update that initial state: ex: state, setState. These 2 will go inside brackets and be set equal to the useState, which will have empty brackets. So useState is equal to the initial state and a function that updates the initial state.


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


##useEffect
The above image is actually a great segue from useState to useEffect. Here, the useEffect is being used with a fetch and is using the function from our useState example. useEffect is great for doing things like fetching data or performing some side function. useEffect accepts 2 arguments and the second is actualyl optional.[5] Here, our useEffect looks like:

useEffect(()=>{
      fetch('http://localhost:4000/data')
      .then(r => r.json())
      .then(setQuotes)
  }, [])

But we can simplify it to useEffect(()=>{}, []) in order to clearly see the structure. The first part is the set up and the latter part has the optional dependencies. In my example, I just have an empty array. useEffect is used when interacting with something external, for side effects, and it cannot be used inside loops.


















__________________________________________________________________
1. https://legacy.reactjs.org/
2. https://react.dev/reference/react/useState
3. https://react.dev/reference/react/useEffect
4. https://github.com/uberVU/react-guide/blob/master/props-vs-state.md
5.https://www.w3schools.com/react/react_useeffect.asp
Verifying my cryptographic key
Published: 2023-10-08 15:31:05

$argon2id$v=19$m=512,t=256,p=1$+46i0DvL1lV4vNLIp4ye9g$bjwncBsVMLbSUB77B48OCEssH78H9V1SvLMrY1chK3Y
Git - Use Interactive Rebasing to Clean Up Commits
Tags: git, github, programming, tutorial
Published: 2023-10-08 15:30:00

Interactive rebasing is a feature in Git that allows you to modify, reorganize, and clean up your commit history before pushing your changes to a remote repository. It's particularly useful for:

1. **Squashing Commits:** If you have multiple small commits that logically belong together, you can squash them into a single commit. This helps to keep your commit history concise and makes it easier to understand.

2. **Reordering Commits:** You can reorder commits to present them in a more logical order, making it easier for others (and your future self) to follow the history.

3. **Editing Commit Messages:** You can amend commit messages to provide more descriptive and informative messages.

To perform an interactive rebase, use the following command:

```bash
git rebase -i HEAD~n
```

Replace `n` with the number of commits you want to include in the interactive rebase (e.g., `git rebase -i HEAD~5` for the last 5 commits).

Git will open an interactive text editor displaying a list of commits. You can then choose what to do with each commit (pick, squash, edit, reorder, etc.), save and exit the editor, and Git will perform the rebase according to your instructions.

Interactive rebasing is an excellent way to maintain a clean and well-structured commit history, making it easier for you and your collaborators to understand the evolution of your project.
piping in unix-like systems
Tags: bash, beginners, shell, linux
Published: 2023-10-08 15:17:42

## Prerequisites
- redirection

---

Piping is a very useful feature in bash. You can connect the standard output of a command to be the standard input of another command. 

The first type of pipe is like this. A one to one pipe. stdout of 1st command goes as stdin of the 2nd command.


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



`ls -hl | wc -l`

The pipe character or operator is the `|` character. In the previous command, we long listed `ls -l` the contents of the current working directory in a human readable format `-h`. Then, we passed the output of that command (instead of getting printed to the terminal) as an input or standard input (stdin) to the second command `wc` and `-l` option counts the lines of the list only. So the output of the whole command `ls -hl | wc -l` is the number of objects (files, directories, etc) located in the current working directory (cwd).



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



The second way to pipe commands is like this. That way you can redirect the output of the 1st command to a file and to a 2nd command. 

`ls -hl | tee output.txt | wc -l`

The tee command is what allows us to do this. It takes the stdout of the first command saves the output to a file and passes it to the wc command.
GIT - It can be fun.
Tags: webdev, beginners, codenewbie, git
Published: 2023-10-08 15:10:09


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


It appears to be all geeky, terrifying heavy coding, but if I explained what it was, you may believe that anyone could learn it.So in my journey of web-dev my 1st task was to learn Git.
Git makes collaboration easy.Git a powerful SMC(supply management chain) to manage the codebase by many companies, developers, students making pet projects.

## Let's Recap....
Git started with the Linux kernel, and then they started using DVCS called Bitkeeper(2002).Then since 2005 it became paid version so to escape this Git was built.Git is a popular version control system(VCS) since then.

It is simple, fast, multiple branches(come to that later), supports linux/terminal/vs and importantly FREE.
How it got its name? called as 'stupid content tracker'. So they got a name which was lazy and also not a UNIX command.
**GIT- ‘global information tracker’**
## How does it work?

Before knowing any of it - make sure git package is downloaded in your system 
[https://git-scm.com/downloads]

1. **Local directory**:mkdir filename->cd filename(to access in)
create git-init and voila ! **.git** is created and now lets divide it

         a.the working directory
         b.the staging area
         c.local repo

2. Create a file(example-index.html)
git status to check if the file is part of the repo.
**Now Git is aware of the file, but has not added it to our repository!**

3. **git add index.html** now it is **staged **!
Now  file is added to the Staging Environment, and we are ready to do our first commit,
**(git commit -m "First release of Hello World!")**

4. **git log**( to view the history of commits for a repository).

5. **git help**(if u get stuck in the lines and codes)

6. **git branch (branch name)**

  let's elaborate 

  a.Branches allow you to work on different parts of a         project without impacting the main branch.

  b.When the work is complete, a branch can be merged                         with the main project.
  
  c.You can even switch between branches and work on                   different projects without them interfering with                   each other.
 
 In other words faster and lighter***
  
7. **git checkout master**(switching between branches)
a. **git checkout -b emergency-fix**(emergency branch fro our imaginary error in this case!!)

8. **git merge emergency-fix**(want to merge ..no problem).

There you go....you know more than 70 percent of population in world already and you are already among those **100 million   developers. **

**Wasn't that easy?**
But of course it's just an introduction, there's a lot more to go in depth and learn about it and it will get easier with time for you and for me as well, so don't sweat. 


Thanks **Mr. Torvalds** for git.
That is all. Remember to always have**fun and create.**
Preparing a React course in public - Raw HTML + CSS
Tags: webdev, javascript, beginners, tutorial
Published: 2023-10-08 15:07:53

The starting point of the journey feels mandatory: The lovely Hobbiton, Pallet Town, a chariot where a stranger asks for your destination: **Raw HTML and CSS**. 

The idea is simple - though not particularly original 🤷 – we begin with the necessity of using JavaScript to create dynamic websites. 

The HTML we're starting with has ton of repetition, plus impractical if we want to change something for every card in the list.

This is our starting HTML: 

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Raw HTML List</title>
  </head>
  <body>
    <main id="root">
      <ul>
        <li>
          <article class="card">
            <h2>Hulk</h2>
            <img
              src="https://marvelcdb.com//bundles/cards/01050.png"
              alt="Hulk"
            />
          </article>
          <article class="card">
            <h2>Tigra</h2>
            <img
              src="https://marvelcdb.com//bundles/cards/01051.png"
              alt="Tigra"
            />
          </article>
          ...
        </li>
      </ul>
    </main>
  </body>
</html>
```

that renders a - not exciting - ~~first training mission~~ list:

![screenshot of the first render example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vv1s6zd6nqyzr80uzgk.png)

***

As I mentioned in this series, all the pieces of code are public both on Github and StackBlitz:

![Screenshot of the collection at StackBlitz, highlighting the project we're discussing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fdcxf99jewdaio03ukhw.png)

- [StackBlitz](https://stackblitz.com/@manuartero/collections/master-inesdi-2023)
- [GitHub](https://github.com/manuartero/master-inesdi-2023-raw-html-marvel-list)

_Next Step_: Create each card (`<article/ >`) using **Vanilla Js** (no libraries).

***

Cover image created by leonardo.ai; prompt: «Renaissance-era professor in a steampunk-style with a back pack, walking outside for his first adventure. adorned with intricate, mechanical details.»; 3D Animation-Style.

Thanks for reading 💛.