teleren/devto huggingface dataset:
How the mv Command works on Linux
Tags: bash, linux, webdev, tutorial
Published: 2022-03-25 13:37:21

The mv command, short for move, lets us move files and directories between two locations on Linux and other Unix like systems (i.e. MacOS).

The syntax for mv can be found below, where [OPTIONS] are optional settings you can use, SOURCE is the the single or multiple files/directories you want to move, and LOCATION is the location the file or directory should be moved to:

```
mv [OPTIONS] SOURCE LOCATION
```

## How to move files on from Terminal in Linux or MacOS
At it's most basic, you can move a file using mv by writing something like the following:

```
mv my-file.txt ./test
```

The above moves a file called my-file.txt to a sub directory called test. If you wish to rename the file when you move it, specify the name in the command. For example, the below will move a file called my-file.txt to a folder called test, and rename it to new-file.txt:

```
mv my-file.txt ./test/new-file.txt
```

You can move directories with the same syntax.

## Renaming files with mv
Since the mv command moves a file without copying it, you can rename a file with it. For example, the following command will move a file called my-file.txt to the same directory, and call it my-new-file.txt, ultimately renaming it:

```
mv my-file.txt my-new-file.txt
```

## Moving multiple files from Terminal on Linux and MacOS
If you should need to move multiple files or directories, simply separate them with a space. The final folder will be the location all files/directories are moved to. For example, the below will move all files and directories listed into the test folder:

```
mv my-file.txt my-new-file-1.txt my-new-file.txt directory1 ./test
```

You can also use pattern matching. The command below moves all files starting with "my-file-" and ending with ".txt" to the test directory:

```
mv my-file-*.txt ./test
```

## Prompting Overwriting Files with mv
If a file with the same name already exists, by default mv will overwrite it if it is writable. If you want a prompt before you overwrite the file, you can use the -i option:

```
mv -i my-file.txt ./test
```

## Forcing File Overwrites with mv
If a file is only readable, you will be prompted by default as to whether you want to overwrite it or not. If you want to force overwrite it without a prompt, use -f:

```
mv -f my-file.txt ./test
```

## Preventing File Overwrites with mv
If instead you want to prevent all file overwrites, use -n:

```
mv -n my-file.txt ./test
```

## Backing up files with mv
If you're on Linux, you can also use -b to backup a file which is overwritten when using mv. This will make a copy of the file about to be overwritten, with a tilde (~) at the end. This is not available on MacOS.

```
mv -b my-file.txt ./test
```

## Messages when using mv
If you want to display messages regardless of what happens (often referred to as verbose), then you can use the -v command:

```
mv -v my-file.txt ./test
# my-file.txt -> ./test/my-file.txt
```
Beginner Friendly Organisations in Google Summer of Code 2022
Tags: webdev, beginners, programming
Published: 2022-03-25 13:25:15

Beginner Friendly Organisations in Google Summer of Code 2022

For Web Development

🔥 FOSSology
Tech - python, postgresql, c/c++, php, reactjs

FOSSology is an open-source license compliance software system and toolkit. As a toolkit, you can run license, copyright and export control scans from the command line.

🔥 CircuitVerse .org
Tech - javascript, bootstrap, html5, rails, canvas

CircuitVerse is an easy to use digital logic circuit simulator which aims at providing a platform to create, share and learn digital circuits. It can run on almost any device without the need for installing any software. 

🔥 Rocket .chat
Tech - javascript, raspberry pi, typescript, node, meteorJS

Rocket .Chat is a modern team chat and collaborating platform written in full-stack JavaScript. Rocket .Chat offers a full featured rich team chat experience on modern browsers, comparable to Slack and Microsoft Teams. Mobile and desktop clients run on iOS, Android, Mac, Windows, and Linux. 

🔥 Moja global
Tech - python, javascript, c++, docker, Data-Science

Open source MRV software for forestry, agriculture and other land uses; democratising technology for nature based solutions and greenhouse gas accounting.

🔥 Joplin
Tech - javascript, react, typescript, electron, React-Native

Joplin is a free, open source note taking and to-do application, which can handle a large number of notes organised into notebooks. The notes are searchable, can be copied, tagged and modified either from the applications directly or from your own text editor. The notes are in Markdown format. 

🔥 Electron
Tech - python, mysql, php, typescript, vue.js

Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. By embedding Chromium and Node.js into its binary, Electron allows you to maintain one JavaScript codebase and create cross-platform apps that work on Windows, macOS, and Linux — no native development experience required.

#opensource #webdevelopment #coding #gsoc
Rending arrays in React properly.
Tags: javascript, react
Published: 2022-03-25 12:55:47

I guess you have used [`.map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) quite a bit and understand how it works well. We can use `.map` in React too. It helps us render arrays to the page. For me I have never really used a key within a map function for vanilla JS, for React though it's pretty essential, let's see why.

Let's say we have the following component. That renders an array of fruit.

```js
const allItems = [
  {id: 'apple', value: '🍎 apple'},
  {id: 'orange', value: '🍊 orange'},
  {id: 'grape', value: '🍇 grape'},
  {id: 'pear', value: '🍐 pear'},
]

function Keys() {
  return (
    <>
      {allItems.map((item => (
        <li>
          <label>{item.value}</label>
        </li>
      )))}
    </>
  )
}
```

With the above example, React will throw an warning:

> Warning: Each child in a list should have a unique "key" prop.

Now your `.map` function will render the contents of the array without any issue, I mean it is just a "warning" however without a key prop added it can all go wrong.

We need to add a key prop to the child of our `.map` function to allow React to know the element's position. You can test this going to the below link and clicking on the elements.

https://react-fundamentals.netlify.app/isolated/final/07.extra-1.js

See how the first two examples differ from the last one. You’ll notice that using the array index as a key is no different from React’s default behaviour. Using an index is incorrect, as you can see from the focus states here, the focus will always stay on that index. Instead of moving with the element, like it does when using a key.

As the key must be unique, we should code it up as such:

```js
const allItems = [
  {id: 'apple', value: '🍎 apple'},
  {id: 'orange', value: '🍊 orange'},
  {id: 'grape', value: '🍇 grape'},
  {id: 'pear', value: '🍐 pear'},
]

function Keys() {
  return (
    <>
      {allItems.map((item => (
        <li key={item.id}>
          <label>{item.value}</label>
        </li>
      )))}
    </>
  )
}
```

Thanks to [Kent C Dodds](https://twitter.com/kentcdodds) for explaining this like a true hero.
Stop using multiple states for status
Tags: javascript, react
Published: 2022-03-25 12:53:25

When it comes to fetching API data in React using `fetch` there can be ways to update the user or run conditional code. This can generally mean using a selection of different states. Which can potentially get messy and complicated. 

You could have something like this: 

```js
const [data, setData] = useStatus([])
const [success, setSuccess] = useState('')
const [loading, setLoading] = useState('')
const [rejected, setRejected] = useState('')
const [error, setError] = useState('')
```

Which in turn could be like the following: 

```js
useEffect(() => {

    setLoading('loading') // state 1

    fetch('http://some-api-url')
    .then(response => {
        setData(response)
        setSuccess('success') // state 2
    })
    .catch(err => {
        setError(err)
        setRejected('rejected') // state 3
    })

}, [])
```

With the above we have three states to manage and keep an eye on. When it comes to using this conditionally it's going to be a pain in the ass. Something like this.

```js
if (success === 'success') {
    //do something
} else if ( loading === 'loading' ) {
    // do something
} else if (rejected === 'rejected') {
    // do something
}
```

Now wouldn't it be easier to use a `status` state instead of worrying about 3 other states. We can include something like a `const [status, setStatus] = useStatus('idle')` and remove all the other states apart from the `setData` and `setError` we need the error state so we can handle the displaying of error messages.

So now we have the following which is going to be much cleaner and easier to manage.

```js
const [data, setData] = useStatus([])
const [error, setError] = useState('')
const [status, setStatus] = useState('idle')

useEffect(() => {

    setStatus('loading')

    fetch('http://some-api-url')
    .then(response => {
        setData(response)
        setStatus('success')
    })
    .catch(err => {
        setError(err)
        setStatus('rejected')
    })

}, [])

if (status === 'success') {
    // do something
} else if ( status === 'loading' ) {
    // do something
} else if (status === 'rejected') {
    // do something
}
```

For me this is much a cleaner way of doing things, I know it's not that much different from using multiple states. However, we only have one state to deal with instead of three.

I got inspired to do things this way by Kent C Dodds. More information [here](https://kentcdodds.com/blog/stop-using-isloading-booleans)
How to compile SASS into CSS and watch for changes?
Tags: webdev, beginners, css, tutorial
Published: 2022-03-25 12:49:01

SASS extends CSS which means that you can have all the features of CSS plus the features of SASS just like a cherry on top of a cake!

Browsers don't understand [SASS](https://sass-lang.com/), just like they don't understand [JSX](https://reactjs.org/docs/introducing-jsx.html) (which is compiled into valid javascript) in React. Which is why we need to compile SASS into normal CSS in order to run it in the browser.

Let's see how we can transform a SASS file into a CSS file assuming that you have [SASS already installed](https://sass-lang.com/install) into your system.

## Compiling a SASS file

Let's say we have a folder structure something like this:

```
public/
-> styles/

src/
-> styles/
    -> style.scss
```

We need to compile the file with `.scss` extension which is ultimately a SASS file, into a CSS file in `public/styles` directory.

We can do that by executing this command in the terminal at the root of the folder: 
```
sass src/styles:public/styles
```

The directory before the colon `:` is the input directory and the directory after the colon is the output directory.

If you have your SASS file in the root directory and want to output the CSS file in the same root directory, you can use:

```
sass style.scss style.css
```

> Here, *'root directory'* means the directory you are ***currently pointing to*** in your terminal.

But what if we want to place the CSS file in the same directory as the SASS file? You can do that by executing the above command only:

```
sass src/styles:src/styles
```

Now, let's get to the juicy part. Let's see how we can `watch` the changes made to our SCSS file and automatically compile them into CSS.

## Watching for changes in SASS

Just add a `--watch` flag in the command to watch the changes made to the Sass file in `src/styles` directory.

```
sass --watch src/styles:public/styles
```

That's it. Now, the changes you make in the SASS file will automatically be compiled into CSS as soon as you save the SASS file!

Also, if you are using VSCode, then you can use [an extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass) to compile SASS files into CSS which makes it very convenient to deal with SASS, but that too has it's [pros and cons](https://www.youtube.com/watch?v=o4cECvhrBo8)!

Signing off.

> This post was originally published in [Syntackle](https://syntackle.live/blog/how-to-compile-sass-into-css-and-watch-for-changes-5MHo7HhHUHUedZXaP62y/)!

---

[Twitter](https://twitter.com/murtuza_surti) | [LinkedIn](https://linkedin.com/in/murtuzaali-surti) | [GitHub](https://github.com/murtuzaalisurti)
What Is Sketchpad and How Does It Work?
Tags: sketchpad, pad, sketch
Published: 2022-03-25 12:40:14

[Sketchpad ](https://www.sketch-pad.live)is a lovely sketching and painting application that works in different languages. It's simple and enjoyable to combine photos and text.

Sketchpad is a service provided by Sketch-pad.live. There are an infinite number of blank pages that you can fill with unending color, as the name implies. You may use it for free online, and it bills itself as a digital maker space. Sketchpads Premium will set you back $4.99 if you want to use it as a Windows programme. I'll get to that in a minute.

Layers, clipart, and other features are included in this utility. Spend a few minutes researching, and you'll be creating works of art like this:

You may also export your work in a variety of formats, including JPG, PNG, PDF, and SVG. You may also take a portion of the screen and print or share a link to your creation. Adding images is simple, and you can quickly create a colourful design. Chromebook users will appreciate this web editor because it is browser-friendly.

What Does Sketchpad Premium Include?

The Sketchpad Premium version includes the following features to helpyes you be more creative:

18 brushes for tracing images, including high-quality stamps, lines, and path tools
More than 5,000 photos, including open source and vector images, are available for professional and commercial use.
You can add your own vector or raster pictures by dragging and dropping 14 shapes to which you can add colours, gradients, and patterns.
Inside of shapes to colour
Google's typeface library contains over 800 fonts. Fill and outline choices for typefaces with colours, gradients, and patterns are available.
So, what's the deal?

[Sketchpad extension](https://tinyurl.com/hhadvh3t) allows you to sketch freehand or create fantastic effects with fonts and images. Sketchpad is a winner since you can overlay content and add stamps to the collection from your own images. This is a really strong tool that is offered to staff and students for free. Furthermore, pupils do not need to make an account in order to log in; they may immediately begin working.

Take a look at Sketchpad and let me know what you think. Meanwhile, I'll leave you with this Sketchpad design based on a Bertrand Russell quote:

F.A.Q:

[What Does the Term "Sketchpad" Mean?](https://www.issuewire.com/what-does-the-term-sketchpad-mean-1727543527434704)
Real Time Shopify Partner Revenue Tracker
Tags: javascript, tutorial, node, productivity
Published: 2022-03-25 12:36:07

In this Speed Run we'll be building a real time physical count of our Shopify Partner revenue with an official Shopify Counter.

This counter is perfect for feedback on how your apps are earning for you 💵 and give that extra motivation to keep building!

We'll also cover a brand new feature in Pipedream called Data Stores.  Data Stores can hold data between workflow runs, which become our database for keeping track of total revenue for the physical Smiirl counter.

[Want to see a specific workflow tutorial? We're taking submissions!](https://www.jotform.com/form/220694247042049
)

{% embed https://youtu.be/XQrcWf1cSPo %}


🔨 Start building at https://pipedream.com 
📣 Read our blog https://pipedream.com/blog
💬 Join our community https://pipedream.com/community
10 VS Code Extensions that make your coding Better
Published: 2022-03-25 12:31:25

Are you an amateur programmer? Or do you have a good knowledge of programming? This article is for you. Use your best performance with VS Code. After reading this article you will thank me.

###[1. Prettier](https://ilabacademy.blogspot.com/2022/03/vs-code-extensions.html)
This extension will help you format the code. You can configure this as needed, which gives the code a professional look.

###[2. Material Icons](https://ilabacademy.blogspot.com/2022/03/vs-code-extensions.html)
This uses a special theme to uniquely identify the various files contained within your distribution. This gives a better look at the Visual Studio Code.

###[3. Live Share](https://ilabacademy.blogspot.com/2022/03/vs-code-extensions.html)
Use this to allow another team member or other person to view and develop your code. What makes it special is that it can be performed live on the familiar Visual Studio platform.

###[4. Bracket Pair Colorizer 2](https://ilabacademy.blogspot.com/2022/03/vs-code-extensions.html)
Brackets are used to write code in many languages. Sometimes it can be difficult to manage without you recognizing each other. Many developers use this extension to avoid this. This shows the starting bracket and the last bracket in one color.

###[5. JavaScript Code Snippets](https://ilabacademy.blogspot.com/2022/03/vs-code-extensions.html)
This is a great time saver for any JavaScript developer. You can retrieve the required code without having to re-type it.

###[6. CSS Peek](https://ilabacademy.blogspot.com/2022/03/vs-code-extensions.html)
This goes directly to the definition of CSS Class and Id

###[7. Auto Close Tags](https://ilabacademy.blogspot.com/2022/03/vs-code-extensions.html)
Closing a tag after opening in languages such as HTML and XML is a busy process. This is the best solution for you to avoid this

###[8. Auto Rename tags](https://ilabacademy.blogspot.com/2022/03/vs-code-extensions.html)
The tag is renamed to make it easier to maintain the code when you are working with a large project. This extension is used to do this efficiently

###[9. Better Comments](https://ilabacademy.blogspot.com/2022/03/vs-code-extensions.html)
The best experience when writing code is to comment. This will make it easier for other members of your distribution and yourself to re-study the code. This extension is used to make this attractive and effective

###[10. Live Server](https://ilabacademy.blogspot.com/2022/03/vs-code-extensions.html)
If you are a web developer then this extension is a must. When working with an HTML file, you need to save the HTML code and reload the web browser to see the changes. But by using this extension you can see the changes you are making Live in the web browser.

[Original Article](https://ilabacademy.blogspot.com/2022/03/vs-code-extensions.html)
What is CRUD?
Tags: webdev, beginners, tutorial
Published: 2022-03-25 12:25:20

We interact with the CRUD application daily as part of our work. Maybe you record a task in your phone's calendar or take notes.

CRUD is the acronym for Create, Read, Update, and Delete. Any program's basic operations are known as CRUD.

The CRUD application consists of three key components:

- Database
- User interface
- API or back-end system

The database is used to store data. A relational (SQL) or non-relational (NoSQL) database can be used. In most CRUD applications, relational databases are used. MySQL, MariaDB, PostgreSQL, and MS SQL are some of the most popular relational databases.

User Interface (UI) display data in a user-friendly format. With the user interface, the user makes API calls.

The API or back-end system communicates between the database and the user interface. It contains functions for performing CRUD operations.


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

## CRUD operations

We know four different CRUD operations: create, read, update and delete. Each of these operations has its function in the SQL programming language.

| CREATE  | INSERT  |
|---|---|
| READ  | SELECT   |
|  UPDATE |  UPDATE  |
|  DELETE | DELETE  |



API requests can use different HTTP methods.

We know different HTTP methods such as POST, GET, PETCH, PUT, DELETE. Each letter of the CRUD can be associated with a specific HTTP method.

These are usually:

| CREATE  | POST|
|---|---|
| READ  | GET|
|  UPDATE |  PUT|
|  DELETE | DELETE|

The create operation allows us to create new rows in the database.

The read operation retrieves data from the database. It can return different data to us, depending on the filters created.

The update operation updates the existing data in the table. We can update only one line in or even more lines at a time.

The delete operation allows us to delete a row in the database.

Some CRUD application ideas

- To-Do list
- library system,
- account management system
- notebook
- contact manager

I hope you have got an idea of what CRUD is and how we use it daily.


---

You can start following me on [Twitter](https://twitter.com/Patik123_), or you can [buy me a cup of coffee☕](https://www.buymeacoffee.com/patik123) if you enjoy it.
Gutters Installed: What to Expect from the Process
Tags: northraleighgutters
Published: 2022-03-25 12:21:15


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bt5p1ah1jpzqbcy74c3s.png)If you're in need of new gutters, it's important to know what to expect from the installation process. Here at [North Raleigh Gutters](https://mightydogroofing.com/north-raleigh), we want our customers to be as prepared as possible before their gutters are installed. That's why we've put together this brief guide on what to expect. Keep reading to learn more!

Once you've decided to have new gutters installed, the first step is to schedule an appointment with our team. We'll come out to your home or business and take a look at your existing gutters. From there, we'll be able to provide you with a quote for the cost of installation.

Once you've approved the quote and scheduled a date for installation, our team will arrive on the day of to get started. The first step is to remove your old gutters. We'll then measure and cut your new gutters to fit before installing them.

The entire process usually takes around two hours from start to finish. However, this will depend on the size and complexity of your gutter system. Once we're finished, we'll clean up any debris and walk you through the new system to ensure that you're satisfied.

That's it! These are the basics of what you can expect when you have new gutters installed by [North Raleigh Roofing Companies](https://www.google.com/maps?cid=6057363503777177338). If you have any additional questions or concerns, don't hesitate to give us a call!
Python Django `dbshell`
Tags: python, django, sql, debug
Published: 2022-03-25 12:08:54

Python Django's [`dbshell`](https://docs.djangoproject.com/en/4.0/ref/django-admin/#dbshell) is a very useful tool for SQL database debugging when working on a Django application.


To run SQL shell interactively:

```bash
python manage.py dbshell
```

You should see:

```
SQLite version 3.32.3 2020-06-18 14:16:19
Enter ".help" for usage hints.
sqlite> 
```

Useful Django `sqlite` commands:
```sql
.help
.tables
```

An example SQL command:
```sql
SELECT * FROM django_migrations;
```

In order to see the names of the columns (the header) of the table:
```sql
.header on
.mode column
pragma table_info('django_migrations');
```

Example output:
```sql
sqlite> pragma table_info('django_migrations');
cid         name        type        notnull     dflt_value  pk        
----------  ----------  ----------  ----------  ----------  ----------
0           id          integer     1                       1         
1           app         varchar(25  1                       0         
2           name        varchar(25  1                       0         
3           applied     datetime    1                       0      
```


See also [this](https://stackoverflow.com/a/18757996/8877692) StackOverflow answer.