teleren/devto huggingface dataset:
windows disk usage
Tags: windows, diskusage
Published: 2021-05-13 05:17:56

Hey everyone.Since last few days the disk usage in my task manager is showing 100% in my windows10 Home OS.I have tried certain things to normalize it like 1)disabled the superfetch service, 2)disable the windows search,3) scanned the drive,4)disabled the antivirus,5)disabled the useless apps in startup,6)removed the temp files.Still I am not able to solve the disk usage problem.If anyone can help, then I will be thankful to them.
HTML and CSS are programming languages?
Tags: html, css, webdev, beginners
Published: 2021-05-13 05:17:35

The one-word answer is No.

Let's look at their definitions for a better understanding:

HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It was modeled on SGML (Standard Generalized Markup Language), which is a declarative standard for describing document structure and attributes.

CSS (Cascading Style Sheet)  is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.

And now, let's look at the definition of a programming language:

A programming language is a set of commands, instructions, and other syntax use to create a software program.

Ahhhhh that was too much Wikipedia. Let's understand it in simpler terms. HTML and CSS can't be used to write algorithms (a set of rules/instructions that step-by-step define how a task is to be performed) that can help us solve problems that languages like Java, C/C++, Python, etc. help us in solving. HTML is used to just create web pages and CSS is used for styling web pages, neither of them has the ability to solve problems and help a programmer in writing algorithms.

Hence, they aren't programming languages. 

That's it folks, hope it cleared your doubt! 
Keep Learning.
FFmpeg: Cut up andio/video
Tags: ffmpeg, video, audio, manipulation
Published: 2021-05-13 05:17:33

---
title: FFmpeg: Cut up andio/video
published: true
description: With FFmpeg, it's able to manipulate audio or video files. Here shows an example to cut up mp3 into specific duration.
tags: ffmpeg, video, audio, manipulation
---

With [FFmpeg](https://www.ffmpeg.org/), it's able to manipulate audio or video files.
Here shows an example to cut up mp3 into specific duration.

```shell
ffmpeg -i <some-video.mp3> -ss 00:00:22 -t 00:00:32 <cut-up-some-video.mp3>
```

`-ss` is the start position. `-t` is the __duration__ (not the end position).
The command above brings that of 00:00:22-00:00:53 (32 sec), instead of 00:00:22-00:00:32 (10 sec).

The official documentation on its options is [here](https://ffmpeg.org/ffmpeg.html#Main-options).
Shopping Cart Laravel 8 : Part 1
Tags: laravel, php, webdev
Published: 2021-05-12 16:25:11

#Source Code
[Github](https://github.com/Remonhasan/ecommerce-laravel8)

#Shopping Cart
A shopping cart is a piece of software that keeps the record of the items a buyer has 'picked up' from the online store.

#Shopping Cart Package
By using the [hardevine shopping cart](https://github.com/hardevine/LaravelShoppingcart) we can easily implement that.

#Installation
Go to your newly created project directory and run the command:
```composer require hardevine/shoppingcart```

#Configuration Setup
Go to app.php and set the given line to the providers[ ] section like:

`Gloudemans\Shoppingcart\ShoppingcartServiceProvider::class`


Add one more to the aliases[ ] as like:

`‘Cart’ => Gloudemans\Shoppingcart\Facades\Cart::class`


#Publishing the Package
`Php artisan vendor:publish --provider="Gloudeman\ShoppingcartServiceProvider" --tag="config"`
HTML : contenteditable
Tags: html, programming, webdev, productivity
Published: 2021-05-13 05:11:31

You can set the HTML5 `contenteditable` attribute with the value true (i.e. `contentEditable="true"`) to make an element editable in HTML, such as `<div>` or `<p>` element.

```html
<p contenteditable>This is an editable paragraph.</p>
```

Upon clicking on the paragraph, the content of it can be edited similar to an input text field. When the `contenteditable` attribute is not set on an element, the element will inherit it from its parent. So all child text of a content editable element will also be editable, but you can turn it off for specific text, like so:
```html
<p contenteditable>
 This is an editable paragraph.
 <span contenteditable="false">But not this.</span>
</p>
```

> Note that an uneditable text element inside an editable element will still have a text cursor as inherited from its
parent as well.

# Example
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Editable Elements</title>
</head>
<body>
    <h1 contentEditable="true">Your Name</h1>
    <div contentEditable="true">You Favorite Movie</div>
    <p contentEditable="true">Your Comment</p>
    <p><strong>Note:</strong> Click on the elements and type some text.</p>
</body>
</html>
```

<a href="https://www.buymeacoffee.com/rkycom" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/www-rajeshkumaryadav-com/) and [Twitter](https://twitter.com/rky_com).
Awesome Text With Background Demo ✌🏼| Using HTML CSS
Tags: html, css, javascript, webdev
Published: 2021-05-13 04:51:52

---
title: Awesome Text With Background Demo ✌🏼| Using HTML CSS
published: true
description: Create this awesome text with background.
tags: HTML,CSS,javascript,WebDevelopment
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7c9kdr26icrvxxftgzsj.png
---

A web page with background-clipped text created using CSS with random image functionality by vanilla JS.

Check out the video demo on https://youtu.be/NCw-daFdiio

{% youtube NCw-daFdiio%}

Check out the repository on GitHub: https://github.com/salRoid/BackdropClipping-randomWallpaper/tree/master/City%20Lights

Check out my other video on O(1) solution of Range Sum Queries.

{% youtube IXQvj8BFE24 %}

Please like, share, and subscribe to the channel will be dropping a lot of things ❤️❤️.
laravel 8 CRUD Example For Beginners

Tags: laravel, php, tutorial, mysql
Published: 2021-05-13 04:33:16

In this tutorial,i will explain crud operations in laravel 8. we will show simply example of crud operations in laravel 8. i will give you step by step instruction for creating crud (Create Read Update Delete) Application in laravel 8.you will understand how to use resource route, controller, blade files, model and migration for crud operation in laravel 8.

You just need to follow few step and you will get fundamental crud stuff utilizing controller, model, route, bootstrap 4 and blade.

If you want see full example follow this link...

https://codingtracker.blogspot.com/2021/05/laravel-8-crud-example-for-beginners.html
linux find
Published: 2021-05-13 04:27:12

* Find contents of all source
find . -type f -exec grep -l "keywords" {} \;

* Find specific extension file
find . -type f \( -name "*.java" -o -name "*.jsp" \) -exec grep -RIHn '^\s*.System.out.println' {} \;
find . -name '*.js' -exec grep -RIHn '^\s*.console.log' {} \;
Straight Insertion Sort Using C
Tags: c, programming, coding, career
Published: 2021-05-13 04:20:20

Insertion sort is a simple sorting algorithm that builds the final sorted array (or list) one item at a time.

 

Straight Insertion Sort using C

Let’s say we have an array a, so at each i-th pass, a[i] is successively compared with a[i-1], a[i-2], etc. until an element smaller than a[i] is found or the beginning of the array is reached. Elements that are found to be greater than a[i], are moved right by one position each to make room for a[i].



The time complexity of this algorithm is O(n^2).



The complete source code is given below

<a href="https://www.skptricks.com/2021/05/straight-insertion-sort-using-c.html"> Read More...</a>
Google Chrome Extension Is Blocked By The Administrator
Tags: reactnative, react, chrome, browser
Published: 2021-05-13 04:17:41

In this tutorial we are going to discuss about Google chrome extension is blocked by the administrator issue. you may come across this error message :

LINER – Web/PDF Highlighter (extension ID “bmhcbmnbenmcecpmpepghooflbehcack”) is blocked by the administrator.



Google Chrome Extension Is Blocked By The Administrator



It is because your computer’s administrator user (mostly like the IT department if it is your work computer) blocked installing certain Chrome extensions through group policies.



Solution

If you have admin rights in your computer, follow the steps below to lift this restriction:
<a href="https://www.skptricks.com/2021/05/google-chrome-extension-is-blocked-by.html"> Read More...</a>
Where do these routes go?
Published: 2021-05-13 03:02:42

### Restful Routes

Restful routes map HTTP verbs (get, post, patch, etc.) to CRUD actions (create, read, update, delete). Although each route has its own responsibility, within that block of code are specific lines of code that trigger different actions. Let's dive into this using the routes associated with logging in.

#### GET ('/login')

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

Within this route, the user is simply sending a GET request to the `'/login'` route which loads the login form within the view. 

#### POST ('/login')

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

Here, the POST request handles the form submission where the information is authenticated, a session is created and the user is redirected to his/her `'/runs'` page.

### Deeper Dive (redirecting vs. erb)

Within these routes, actions are occurring at different points but where and how?

Well the GET request is triggering actions, but it's only responsible for rendering the login page if the user is not successfully logged in or redirecting if the user is logged in. Within this request, an erb command is used because the action only needs to render an erb file for display while the user remains in the current route.

However, it's the POST request that handles the user's form input, authenticating the information, and setting a session id to successfully login the user. Within this request, redirect is used because the state was changed once the input was processed.

This example shows how each route is responsible for different actions based on specific lines of code although they work together for, in this case, a user logging in.
5/12 TIL: history obj & withRouter
Published: 2021-05-13 03:00:33

- react-router-dom's `<Link>` vs. react-router-bootstrap's `<LinkContainer>`
    - the only difference is that `<LinkContainer>` allows us to wrap around bootstrap components
- i can access history's object properties using **withRouter**
    - import { withRouter } from "react-router"
    - you can access **history** object's properties with this HOC
    - e.g. export default withRouter(App)
    - had issue with a FC having 2 parameters—a function & history obj [https://github.com/DefinitelyTyped/DefinitelyTyped/issues/17355](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/17355)
- Higher-Order Component (HOC)
    - a function that takes a component and returns a new one
Osteosarcoma Force Directed Tree
Tags: codepen
Published: 2021-05-13 02:59:12

<p>Force Directed Tree is a special kind of chart used to display of multi-item data related in hierarchical, linear or mixed way, as a series of linked bubbles.</p>

<p><a href="https://www.amcharts.com/docs/v4/chart-types/force-directed/">Learn more about force-directed charts</a> in the documentation.</p>

{% codepen https://codepen.io/team/amcharts/pen/mZMYKx %}
Easy Zeppelin install on Mac, to use AWS Athena
Tags: data, mac, athena, aws
Published: 2021-05-13 02:33:43

Installing Apache Zeppelin on my Mac was pretty easy! I then connected it to Amazon Athena.

I mostly used information from:

- [Using Amazon Athena with Apache Zeppelin | by Yuta Imai | Medium](https://medium.com/@yutaimai/using-amazon-athena-with-apache-zeppelin-464a85678c46)
- [Getting Started](https://zeppelin.apache.org/docs/0.6.0/install/install.html) (The URL says version 0.6.0, might be a newer version now!)

### Download & Install

- I downloaded the `zeppelin-0.9.0-bin-all.tgz` binary (current version at the time) from [Apache Zeppelin Download](http://zeppelin.apache.org/download.html)
- Unzipped the file by simply double-clicking on it

### Start / Stop

```
bin/zeppelin-daemon.sh start
bin/zeppelin-daemon.sh stop
```

### Access Zeppelin

`http://localhost:8080`

### Add an Interpreter for Amazon Athena

- Download driver from [Links for Downloading the Athena JDBC Driver](https://docs.aws.amazon.com/athena/latest/ug/connect-with-jdbc.html) official page
- I then found that [Using Amazon Athena with Apache Zeppelin | by Yuta Imai | Medium](https://medium.com/@yutaimai/using-amazon-athena-with-apache-zeppelin-464a85678c46) was the best resource for configuring the Interpreter
- However, **the driver name has changed** to `com.simba.athena.jdbc.Driver`
- Some information from [Connecting Apache Zeppelin Up to Amazon Athena with an IAM Profile Name | rud.is](https://rud.is/b/2018/08/11/connecting-apache-zeppelin-up-to-amazon-athena-with-an-iam-profile-name/) was thus useful.

The fields I configured were:

- default.url: `jdbc:awsathena://athena.ap-southeast-2.amazonaws.com:443` (Your region might be different)
- default.user (IAM Access Key)
- default.password (IAM Secret Key -- not very secure, but I couldn't figure out how to get it to use the AWS credentials file)
- default.driver: `com.simba.athena.jdbc.Driver`
- default.s3_staging_dir (Added this property myself, and pointed it to an Amazon S3 location to store the Output of Athena queries)
- Artifact: Provided the full path to the downloaded Athena JDBC driver

**Hint:** I had a problem referencing the Driver when the path included a space, so be careful where you put the driver file!

The credentials used to access Amazon Athena are also used to access the source data in Amazon S3.

### Query the data

Simply use the name of the Interpreter at the top of the section, eg:

```
%athena
SELECT 42
```

## Selecting a Schema

To change the default schema, append the information onto the JDBC URL: `jdbc:awsathena://athena.ap-southeast-2.amazonaws.com:443;schema=my-schema`

Similar options are available in the [driver documentation](https://simba.wpengine.com/products/Athena/doc/JDBC_InstallGuide/content/jdbc/ath/using/connectionurl.htm).
Deploy en Heroku
Tags: heroku
Published: 2021-05-13 02:27:55

Utilizando el boilerplate [react-flask-hello](https://github.com/4GeeksAcademy/react-flask-hello/tree/main/docs), realizar el deploy de tu applicación es bastante simple.
- Lo primero es crear una cuenta en [Heroku](https://heroku.com)
- Una vez tengas la cuenta, instalas heroku:
  ```
  $ npm i heroku -g
  ```
- Crea la app en heroku:
  ```
  $ heroku create <your_application_name>
  ```
- Agregas Python y Node.js para poder usar npm en producción:
  ```
  $ heroku buildpacks:add --index 1 heroku/python
  $ heroku buildpacks:add --index 2 heroku/nodejs
  ```
- Agregas una base de datos. Para esto, puedes revisar [aca](https://elements.heroku.com/addons) cual es la opción que se adecua mejor a tus necesidades. En el caso de MySQL, puedes usar JawsDB MySQL ya que da una opción gratis de la siguiente manera:
  ```
   heroku addons:create jawsdb:kitefin
  ```
Si utilizas PostgreSQL, puedes utilizar Heroku Postrgres:
  ```
  $ heroku addons:create heroku-postgresql:hobby-dev
  ```
- Si estas utilizando PostgreSQL, debes realizar un paso extra. Debido a que se genera automaticamente la 'DATABASE_URL' con el paso anterior, debemos agregar en /src/app.py, .replace("://", "ql://", 1) de esta manera:
  ```
  # database configuration
  if os.getenv("DATABASE_URL") is not None:
    app.config['SQLALCHEMY_DATABASE_URI'] = 
  os.environ.get('DATABASE_URL').replace("://", "ql://", 1)
  else:
  ```
- Luego agregamos el resto de las variables del archivo .env de la siguiente forma:
  ```
  $ heroku config:set FLASK_APP_KEY="any key works"
  $ heroku config:set FLASK_APP=src/app.py
                   # Importante: En archivo .env está en 
                     development, heroku hay que setearlo para 
                     producción     ↓
  $ heroku config:set FLASK_ENV=production 
  $ heroku config:set BASENAME=/
                   # Importante: Esta variable tiene que     
                     quedar vacia   ↓
  $ heroku config:set BACKEND_URL=
  ```
- Si tienes cambios pendientes, solo guarda y ya estas listo para hacer el deploy:
  ```
  $ git add .
  $ git commit -m 'deploying to heroku'
  $ git push heroku main
  ```
Issue installing cargo-generate
Tags: rust, cargo
Published: 2021-05-13 02:16:54

## Problem 1: `libgit2` missing

I tried to install `cargo-generate`. My current machine is MacOS BigSur 11.3 Beta. 

```sh
cargo install cargo-generate --features vendored-openssl
```


somehow I got an error related to `libgit2` and it confused me. 

```sh
fatal: not a git repository (or any of the parent directories): .git


  error occurred: Command "cc" "-O3" "-ffunction-sections" "-fdata-sections" "-fPIC" "-m64" "-arch" "x86_64" "-I" "/var/folders/70/91y0tylx71x1wjv_275y8x8c0000gn/T/cargo-install6KpOP3/release/build/libgit2-sys-1319684400f5f70f/out/include" "-I" "libgit2/src" "-I" "libgit2/deps/http-parser" "-I" "libgit2/deps/pcre" "-I" "/var/folders/70/91y0tylx71x1wjv_275y8x8c0000gn/T/cargo-install6KpOP3/release/build/libssh2-sys-4c230072710e2672/out/include" "-fvisibility=hidden" "-DGIT_REGEX_BUILTIN=1" "-DHAVE_STDINT_H=1" "-DHAVE_MEMMOVE=1" "-DNO_RECURSE=1" "-DNEWLINE=10" "-DPOSIX_MALLOC_THRESHOLD=10" "-DLINK_SIZE=2" "-DPARENS_NEST_LIMIT=250" "-DMATCH_LIMIT=10000000" "-DMATCH_LIMIT_RECURSION=MATCH_LIMIT" "-DMAX_NAME_SIZE=32" "-DMAX_NAME_COUNT=10000" "-DSHA1DC_NO_STANDARD_INCLUDES=1" "-DSHA1DC_CUSTOM_INCLUDE_SHA1_C=\"common.h\"" "-DSHA1DC_CUSTOM_INCLUDE_UBC_CHECK_C=\"common.h\"" "-o" "/var/folders/70/91y0tylx71x1wjv_275y8x8c0000gn/T/cargo-install6KpOP3/release/build/libgit2-sys-1319684400f5f70f/out/build/libgit2/src/streams/stransport.o" "-c" "libgit2/src/streams/stransport.c" with args "cc" did not execute successfully (status code exit code: 1).
```


### Solution
The `libgit2` was somehow missing from my machine. So we just need to install it. 

For MacOS brew user,

```sh
brew install libgit2
```

---

## Problem 2: `CoreFoundation` not found

After fixing the previous issue and installed again, I encountered the new issue.

```sh
cargo install cargo-generate --features vendored-openssl
```

```sh
ld: framework not found CoreFoundation
          clang: error: linker command failed with exit code 1 (use -v to see invocation)


error: aborting due to previous error

error: failed to compile `cargo-generate v0.6.1`
```

### Solution
It is probably the issue on MacOS BigSur which removed some of the built-in libraries.

1\. Reinstall xcode command line tools to make sure we have the latest version.

```sh
sudo rm -rf /Library/Developer/CommandLineTools
sudo xcode-select --install
```

2\. Install gcc & llvm via Homebrew. If it mentions that you already installed, perform the next step.

```sh
# WARNING: This can take several hours
brew install gcc
brew install llvm
```

3\. Reinstall (only for machine with gcc and llvm installed via home brew.) 

```sh
brew cleanup
brew update
brew upgrade
brew reinstall gcc
brew reinstall llvm
```

4\. Try installing cargo-generate again. 🎉

---

> Special thanks to @iporsut for helping me solve the issue. 🙏
Higher Order Function di Javascript
Tags: javascript, webdev, node
Published: 2021-05-13 02:14:27

Higher Order Function singkat kata adalah sebuah function yang memiliki function sebagai argument-nya ataupun function sebagai nilai return dari function tersebut.

Function yang menjadi argument atau nilai return dari sebuah Higher Order function disebut callback function.

Mungkin tanpa sadari, ada beberapa higher order function yang pernah teman-teman pakai, contohnya beberapa function array seperti find, filter dan banyak lagi.

Find adalah sebuah function array yang mengembalikan sebuah nilai yang sudah ditentukan.

Contoh penerapan find:
```
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const number = numbers.find(number => number >= 5 // 5 adalah nilai yang ingin dicari)
console.log(number) // menampilkan angka 5
```

Script diatas menunjukan bagaimana cara kita mencari angka 5 dari array numbers yang berisi angka dari 1 sampai dengan 10. nilai hasil pencarian tersebut nantinya di assign ke konstanta number dan lalu ditampilkan menggunakan console.log.

Lalu bagaimana jika nilai yang dicari tidak ada? maka secara otomatis callback akan me-return undefined.

Contoh lain dari higher order function yaitu filter. Filter akan memilah nilai yang ditentukan lalu dikembalikan menjadi sebuah array baru.

Contoh penerapan filter: 
```
const numbers = [1, 23, 21, 51, 43, 2, 54, 34]
const newNumbers = numbers.filter((number) => number > 40)
console.log(newNumbers) // [ 51, 43, 54 ]
```

Array numbers berisi nilai acak. Dalam contoh ini, kita ingin mencari nilai lebih dari sama dengan 40 dari array numbers. Hasil pencarian tersebut akan menghasilkan array baru newNumbers yang berisi [ 51, 43, 54 ].

Berikut pengertian dari higher order function, contoh penerapannya dan function-function yang termasuk higher order function.

terima kasih sudah membaca.
why does it say not detected to network?
Published: 2021-05-13 01:49:22

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>MOORE TOKEN SWAP</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>