teleren/devto huggingface dataset:
Storybook - Creating docs
Tags: storybook, testing, webdev, beginners
Published: 2022-11-27 08:47:52

Now that we have a good basic understanding of stories in Storybook, let's take a closer look at how we can leverage it to create some docs.

When you use Storybook, you automatically get built-in docs. It can aggregate stories, text, tables, and code samples into a single page for each component.

This can be super beneficial to explain in more detail how your components work and what needs to be used and set up.

## The default docs

By default, the docs auto-generate based on the arguments and main component.

If we look at our button component, we can see that the docs combine everything we have set up.

![Basic generated docs](https://cdn.hashnode.com/res/hashnode/image/upload/v1668749139286/dgciZuXNw.png)

It's also possible to add multiple components into one docs page. This could be useful when you are using various components that group together.

You can achieve this by using the `subComponents` options like this.

```js
export default {
  title: 'ButtonGroup',
  component: ButtonGroup,
  subcomponents: { Button },
};
```

This will show the components in tabs. The only downside is that you lose control over the sub-components, so you can't interact with their properties.

## Replacing the docs with MDX

We can also replace the docs page with an MDX page, which will give us more freedom.

To achieve that, add a page called `Button.docs.mdx`.

That file could have contents like this:

```js
import { Canvas, Meta, Story } from '@storybook/addon-docs';

import { Button } from './Button';

<Meta title="MDX/Button" component={Button} />

export const Template = (args) => <Button {...args } />

# Badge

Let's define a custom button:

<Canvas>
  <Story
  id="example-button--primary"
    args={{
      label: 'Unchecked',
    }}>
    {Template.bind({})}
   </Story>
</Canvas>
```

And then, we can modify our existing button story to use this doc page instead.

```js
import ButtonDocsMDX from './Button.doc.mdx';

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    docs: {
      page: ButtonDocsMDX,
    },
  },
};
```

And now, if we visit the docs page for the button component, we see this custom format in action.

![MDX docs in action](https://cdn.hashnode.com/res/hashnode/image/upload/v1668753382466/CjbExDsNL.png)

The cool part is that we can mix and match, perhaps for some components, it's enough to use the default docs, but in some cases, you might want to add more details.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
🎨 Mastering Drag-and-Drop in React-Select: A Visual Guide 🚀
Tags: react, javascript, webdev
Published: 2022-11-27 08:46:20

Absolutely! Let's add some emojis and improve the visual appeal with a simple diagram.

---

##🚀 **Enhancing Drag-and-Drop in React-Select**

Today, we'll embark on a journey to amplify the drag-and-drop experience in the `react-select` library. 🎉 To begin, let's gear up with the essential Higher Order Components (HOC) from both `react-select` and `react-sortable-hoc`.

```javascript
import Select, { components } from "react-select";
import { SortableContainer, SortableElement } from "react-sortable-hoc";
```

To facilitate the drag-and-drop events, we'll wield a moveable array and a customized `MultiValue` function. 🛠️

```javascript
// Function for drag and drop
function arrayMove(array, from, to) {
  array = array.slice();
  array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);
  return array;
}

// Crafting a draggable MultiValue component
const SortableMultiValue = SortableElement((props) => {
  const onMouseDown = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };
  const innerProps = { onMouseDown };
  return <components.MultiValue {...props} innerProps={innerProps} />;
});

// Assembling a sortable Select component
const SortableSelect = SortableContainer(Select);
```

Now, let's infuse life into our drag-and-drop adventure by using the `onChange` and `onSortEnd` functions to dance with selection and reordering.

```javascript
// Example with mandatory skills 🌟
const [selectedMand, setSelectedMand] = React.useState([...getMandatorySkillOption]);

const onChangeMand = (selectedOptions) => setSelectedMand(selectedOptions);
const onSortEndMan = ({ oldIndex, newIndex }) => {
  const newValue = arrayMove(selectedMand, oldIndex, newIndex);
  setSelectedMand(newValue);
  console.log("Values sorted:", newValue.map((i) => i.value));
};
```

Lastly, let's bring all the props together in our stage, the `SortableSelect` component. It eagerly accepts all the props from `react-select` and adds a touch of magic with draggable MultiValues. ✨

```javascript
<SortableSelect
  axis="xy"
  styles={customStyles}
  classNamePrefix={"create_position"}
  onSortEnd={onSortEndMan}
  distance={4}
  getHelperDimensions={({ node }) => node.getBoundingClientRect()}
  isMulti
  options={getMandatorySkillOption}
  value={selectedMand}
  onChange={onChangeMand}
  components={{
    MultiValue: SortableMultiValue,
  }}
  defaultValue={formData?.mandatorySkill?.map((i) => ({
    value: i.id,
    label: i.mandatorySkillName,
  }))}
  closeMenuOnSelect={false}
/>
```

With this, we aim to not only enhance functionality but also add a dash of fun and excitement to the reading experience! 🚀📚
Docker course: version and info
Tags: docker, tutorial, beginners, devops
Published: 2022-11-27 08:08:00

---
title: Docker course: version and info
published: true
description: Get information about your docker installation
tags: docker, tutorial, beginners, devops
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
published_at: 2022-11-27 08:08 +0000
canonical_url: https://code-maven.com/docker-course-version-and-info
series: docker
---

{% youtube 5SpRJd6IqOY  %}

In order to verify that you managed to install Docker you can run the `docker --version` command.

There are 2 other commands listed here that will provide more detailed information about the installation of Docker on your computer.

## docker --version

```
docker --version
Docker version 20.10.14, build a224086
```

## docker version

```
$ docker version
Client: Docker Engine - Community
 Version:           20.10.14
 API version:       1.41
 Go version:        go1.16.15
 Git commit:        a224086
 Built:             Thu Mar 24 01:47:58 2022
 OS/Arch:           linux/amd64
 Context:           default
 Experimental:      true

Server: Docker Engine - Community
 Engine:
  Version:          20.10.14
  API version:      1.41 (minimum version 1.12)
  Go version:       go1.16.15
  Git commit:       87a90dc
  Built:            Thu Mar 24 01:45:50 2022
  OS/Arch:          linux/amd64
  Experimental:     false
 containerd:
  Version:          1.5.11
  GitCommit:        3df54a852345ae127d1fa3092b95168e4a88e2f8
 runc:
  Version:          1.0.3
  GitCommit:        v1.0.3-0-gf46b6ba
 docker-init:
  Version:          0.19.0
  GitCommit:        de40ad0
```

## docker info

```
$ docker info
Client:
 Context:    default
 Debug Mode: false
 Plugins:
  app: Docker App (Docker Inc., v0.9.1-beta3)
  buildx: Docker Buildx (Docker Inc., v0.8.1-docker)
  scan: Docker Scan (Docker Inc., v0.17.0)

Server:
 Containers: 15
  Running: 0
  Paused: 0
  Stopped: 15
 Images: 162
 Server Version: 20.10.14
 Storage Driver: overlay2
  Backing Filesystem: extfs
  Supports d_type: true
  Native Overlay Diff: true
  userxattr: false
 Logging Driver: json-file
 Cgroup Driver: systemd
 Cgroup Version: 2
 Plugins:
  Volume: local
  Network: bridge host ipvlan macvlan null overlay
  Log: awslogs fluentd gcplogs gelf journald json-file local logentries splunk syslog
 Swarm: inactive
 Runtimes: io.containerd.runc.v2 io.containerd.runtime.v1.linux runc
 Default Runtime: runc
 Init Binary: docker-init
 containerd version: 3df54a852345ae127d1fa3092b95168e4a88e2f8
 runc version: v1.0.3-0-gf46b6ba
 init version: de40ad0
 Security Options:
  apparmor
  seccomp
   Profile: default
  cgroupns
 Kernel Version: 5.15.0-53-generic
 Operating System: Ubuntu 22.04.1 LTS
 OSType: linux
 Architecture: x86_64
 CPUs: 4
 Total Memory: 15.51GiB
 Name: code-maven
 ID: UBXD:4ZBB:UPNK:BOHW:23UZ:J37Y:G7OW:MUVD:XPDS:M2JP:AGMB:THA7
 Docker Root Dir: /var/lib/docker
 Debug Mode: false
 Username: szabgab
 Registry: https://index.docker.io/v1/
 Labels:
 Experimental: false
 Insecure Registries:
  127.0.0.0/8
 Live Restore Enabled: false
```
GitHub Most Used Repositories : Part 1
Tags: github, repositories
Published: 2022-11-27 07:37:54

## Developer Roadmap :

Interactive roadmaps, guides and other educational content to help developers grow in their careers.


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

[https://github.com/kamranahmedse/developer-roadmap](https://github.com/kamranahmedse/developer-roadmap)

## Front End Checklist :

🗂 The perfect Front-End Checklist for modern websites and meticulous developers.

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

[https://github.com/thedaviddias/front-end-checklist](https://github.com/thedaviddias/front-end-checklist)

## Front End Dev Bookmarks :

Manually curated collection of resources for frontend web developers.

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

[https://github.com/dypsilon/frontend-dev-bookmarks](https://github.com/dypsilon/frontend-dev-bookmarks)

## Coding Interview University :

A complete computer science study plan to become a software engineer.

![img-4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hjlsczzt856imw9xbyo.png)

[https://github.com/jwasham/coding-interview-university](https://github.com/jwasham/coding-interview-university)

## Awesome Interview Questions :

 A curated awesome list of lists of interview questions. Feel free to contribute! 🎓.

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

[https://github.com/DopplerHQ/awesome-interview-questions](https://github.com/DopplerHQ/awesome-interview-questions)

## 30 Seconds of Code :

Short JavaScript code snippets for all your development needs

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

[https://github.com/30-seconds/30-seconds-of-code](https://github.com/30-seconds/30-seconds-of-code)

## HTML5 Boilerplate :

A professional front-end template for building fast, robust, and adaptable web apps or sites.

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

[https://github.com/h5bp/html5-boilerplate](https://github.com/h5bp/html5-boilerplate)

## You Don’t Know JS :

A book series on JavaScript. [@YDKJS](https://github.com/YDKJS) on twitter.

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

[https://github.com/getify/you-dont-know-js/](https://github.com/getify/you-dont-know-js/)

## CSS Protips :

⚡️ A collection of tips to help take your CSS skills pro 🦾.

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

[https://github.com/allthingssmitty/css-protips](https://github.com/allthingssmitty/css-protips)

## Free Programming Books :

📚 Freely available programming books.

![img-10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zhie7on8r6t4nbrjovn.png)

[https://github.com/ebookfoundation/free-programming-books](https://github.com/ebookfoundation/free-programming-books)

### More Coming Soon…
SSH connection to Github
Tags: github, linux, beginners, onboarding
Published: 2022-11-27 07:28:55

from my new machine, wanted to checkout my existing github repo and start making commits.

how do I do connect to it via SSH? 
for ssh we would need a private and public key pair,
private key we keep, and public key we let github know.


lets do this

setting this up on ubuntu / linux
- assuming no existing key is present // generate ssh keypair

```
$ ssh-keygen -t ed25519 -C "your_email@example.com or username"
```
 
- add private key to ssh-agent // [why??](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/working-with-ssh-key-passphrases#about-passphrases-for-ssh-keys)
```
$ ssh-add ~/.ssh/id_ed25519
```

- copy public key  and add to github account (settings>access>ssh keys)
```
public key details is here
$ cat ~/.ssh/id_ed25519.pub
  # Then select and copy the contents of the id_ed25519.pub file
  # displayed in the terminal to your clipboard
```

- test ssh connection from terminal
```
$ ssh -T git@github.com
```


Ref : https://docs.github.com/en/authentication/connecting-to-github-with-ssh/about-ssh
CRUD Explained
Tags: beginners, programming, tutorial
Published: 2022-11-27 07:28:48

Heyo!! 

In this article, I'm going to breakdown everything you need to know about the CRUD functionality, methods and operations you can do on any data stored in an application. Let's get started!

##**What is CRUD?**
- CRUD stands for **Create, Read/Retrieve, Update and Delete** which represents the four basic operations you can do on any data stored in an application.
- You can create something new, read or view the newly created data, edit or update or update the data and finally the option to delete it.
- CRUD is data-oriented and the standardized use of HTTPS methods
![CRUD](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/maq0wtprz7ljtnwy0upq.png)

##**CRUD Functions**
When working with web services, CRUD corresponds to the HTTPS methods which communicate to a web server how you want to interact with the website or web applications.

##**Create**
- It means **creating an entry**. This entry could be an account, user information, a post or a task.
- When we submit the data using forms, a POST request is sent to our API and data will be stored in the database.
- The HTTP protocol that implements a CREATE operation is the POST method.

**Example**
The route for POST request
`/appointments/new`

## Read
- The read operation means **getting access to the inputs of entries in the UI**. That is, seeing it.
- Again, the entry can be anything from user information to media posts, and others.
- The HTTP protocol that implements a READ operation is the GET method.

**Example**
The route for GET request
`/appointments`
 
##**Update**
- UPDATE is the operation that **allows you to modify existing data**. That is, editing the data.
- PUT and PATCH are the HTTP protocols with which you can implement an update operation, depending on what you need.
- PUT should be used when you want the entire entry updated, and PATCH if you don't want entire entry modified.

**Example**
The route for PUT request
`/appointments/:id`
id in the route specifies which entry in the records needs to be updated.

##**Delete**
- To delete is to **get rid of any data on the UI** and the database
- DELETE is the HTTP protocol for implementing a DELETE operation.
- To delete any record, each entry has a unique id and the id in the request below identifies the specific record to be removed from the database.


**Example**
The route for DELETE request
`/appointments/:id`

**That's it!!! #HappyCoding**
![cheers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e17x4f209ziahxhifx6t.png)
Suggest Test - A Release Candidate
Tags: typescript, testing
Published: 2022-11-27 07:26:09

## Readme Links

Please check out the readme, and I’m open to suggestions. It might get more sophisticated over time. If you maintain small code files and use other popular tools though, me adding more sophistication won’t be all that useful to you.

### Package:
https://www.npmjs.com/package/@clowd/suggest-test

### Repository:
https://github.com/mattferrin/suggest-test

## Background

I’ve often been throwing together loose scripts to dial in more directly on the next piece of code I’ll write a unit test against. So, I figured I would try to write a new open source version that’s much more tidy and sophisticated than what I might otherwise toss together. It’s something less difficult than the other thing I was working on, trying to generate unit tests dynamically as I write code. Though I still have the vision to do that too eventually. I wanted to take this detour.

## Untested But Promising

And this is a release candidate. I plan to run it against real code I work on at least enough to notice any issues. I was only sanity checking it against another personal codebase that has 100 percent code coverage, so it’s obviously not battle tested yet. And there’s obvious things like a missing link to the package’s git repo, and no tests yet.
Deno Basics: Deno's config file, dependencies and the Lock file
Tags: deno, webdev, javascript, beginners
Published: 2022-11-27 06:59:37

Deno's configuration file (Deno.json) is Deno's answer to the conveniences of package.json in NodeJS and allows you to create tasks that can be run as commands using terminal.  

_Note: Deno will automatically detect the configuration file if placed in the current working directory._

**deno.json**
```
{
  "tasks": {
    "start": "deno run -A --watch=public/,routes/,db/,services/,controllers/ mod.ts",
    "prod": "deno run -A mod.ts"
  },
}
```

To run the created tasks, you can use: `deno task`
For example: `deno task start`

## Importing dependencies

There are two options for using dependencies in Deno: creating a deps.ts file or using an import map.

## Deps file
The deps file was the original method of listing all your dependencies in a single file to export from. With the convention to split standard library and third library dependencies.

**deps.ts**
```
// Standard library dependencies
export * as log from "https://deno.land/std@0.147.0/log/mod.ts";

// Third party dependencies
export * as _ from "https://deno.land/x/lodash@4.17.15-es/lodash.js";
```

## Import Map
The import map is the newer method to use for importing dependencies and is used in conjuction with the deno.json file.

The convention is to place the import map in your current working directory along with your deno.json. 

**import_map.json**
```
{
  "imports": {
    "twind": "https://esm.sh/twind@0.16.17",
    "log": "https://deno.land/std@0.147.0/log/mod.ts",
    "oak": "https://deno.land/x/oak@v10.6.0/mod.ts",
}
}
```

**deno.json**
```
{
  "tasks": {
    "start": "deno run -A --watch=public/,routes/,db/,services/,controllers/ mod.ts",
    "prod": "deno run -A mod.ts"
  },

  "importMap": "./import_map.json",
}
```

If you are already using a deno config file, it makes sense to use the import map method.

## Lock File

Deno has its own solution to avoid conflict with dependencies between different environments: lock files.  A lock file is able to go online and assess the current state of all your dependencies. It stores this in a hash for each dependency. 

This gives you the ability to ensure that the version that is being used with the project, is the exact one used when you first created the lock file. 

`deno cache --lock=lock.json --lock-write src/deps.ts`
`--lock=`: Indicates to Deno where your lock file is
`--lock-write`: Lets Deno know you wish to write a new one

`src/deps.ts`: A sample path provided for your dependencies
Card reveal on hover
Tags: webdev, javascript, css, html
Published: 2022-11-27 06:56:50

Let's create a hover effect to incrementally reveal the card's content.

This effect is pretty simple, within the card we have 2 things, the content and the 'spotlight' or circle. The trick is to make the spotlight to follow the cursor within the card's bounds and the more it moves the bigger it gets.

## Functionality
So for each card we want to listen for any mouse movement. let's create a function for that:

```
function onHoverCard(card) {
    const cardSpotlight = card.querySelector('.card__spotlight');
    let size = 50;

    card.addEventListener('mousemove', (e) => {
        const { x, y } = card.getBoundingClientRect();
        const mouseX = e.clientX - x;
        const mouseY = e.clientY - y;
        const cardSpotlightX = mouseX - cardSpotlight.offsetWidth / 2;
        const cardSpotlightY = mouseY - cardSpotlight.offsetHeight / 2;

        size += 2.5;
        cardSpotlight.style.setProperty('--_spotlight-size', `${size}px`);
				
        cardSpotlight.style.transform = `translate(${cardSpotlightX}px, ${cardSpotlightY}px)`;
    });

    card.addEventListener('mouseleave', () => {
        size = 50;
    });
}

```

To attach the spotlight element to the mouse within the card's bounds, we first need to find the card's ***x*** and ***Y*** coords in relation to the page. Then we find the current ***x*** and ***y*** coords from the mouse event being fired. With those we can calculate the spotlight's coords. Well, just to make the spotlight right in the middle of the cursor we need to deduct half of its size from the coords. Finally, we use the CSS transform property to move the element to the correct coords.

To make the spotlight grow we increment its size everytime the mouse moves and we reset it when the mouse leaves the card. We do this by keeping track of its current size with a variable (**size**).


Aaaand that is pretty much it!

Here is a [demo](https://codepen.io/sarmunbustillo/pen/XWYYRVw)

[My Twitter] (https://twitter.com/sarmunbustillo?t=pztqXmT7DH2pa9lDLjfrdQ&s=09)

[Checkout my blog ](https://www.sarmunbustillo.com/blog)

Thank you!
CPU Simulation Project
Tags: python, beginners, github
Published: 2022-11-27 06:55:42

Hi! I have been working my way through the Computer Science course on Codecademy's website, and have just finished the portion about Computer Architecture. To end this portion, I had to complete a portfolio project that simulates the functions of a CPU, so I wrote a program that simulates the work of a Control Unit, registers, and ALU.

I was free to decide exactly _how_ I was to complete my project, with lots of room for interpretation. Since I was fascinated with the part of the lesson that explained how instructions are read from a sequence of binary characters, I decided to simulate that.

My program was written to read the instructions in the form of a 32-bit `string` based loosely on the actual MIPS R-type. I wrote three classes - Binary Reader, Registers, and ALU, each of which are meant to act as the hardware responsible for the inner functioning of a computer - the Control Unit and binary reader, the Arithmetic Logic Unit (ALU), and the registers used to store data.

The Binary Reader class was in charge of reading the instruction to determine what data was to be worked on, what kind of processing was to take place, and would later output the results to the terminal. The ALU class was to provide the correct arithmetic functions such as addition, subtraction, multiplication, and division. The Registers class was to provide a place to store several pieces of data. It held two different functions for storing data, a load function, and was built on a list data structure.

I ran into several different problems while writing this program, including writing checks to test if the instructions sent were actually 32-bit binary strings, retrieving data from an 'address' (in this case, the index of the list containing the data), correctly converting the data from decimal to binary, and keeping track of the oldest data in the registers. At one point, I had even introduced a logic error by directly converting a binary substring into an integer for calculation when I was supposed to have used it as an address!

All in all, this was a very fun project that I had a blast working on, and I learned a lot in the process, both in terms of Python code that helped with the binary conversion and how computer architecture actually functions. I actually ended up writing another small program to generate randomized binary instructions to help with debugging, which was also fun to work on.

Testing out my program:
![Testing out my program](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgsp0ws1z6cvizdfptaj.png)

Feel free to look over my code and try it out for yourself. Feedback is very appreciated!

Github: https://github.com/MozzarellaMonster/Binary-Reader