teleren/devto huggingface dataset:
Embroidery Digitizing Services
Published: 2022-02-09 07:11:24

We are providing excellent quality best embroidery digitizing and [vector art services](https://digitizings.com/) at the lowest cost with a superfast turnaround. We use the 3D secured payment method Paypal. We offer multiple features as well. We can convert any of your logo, design, image, artwork, screenshot, or any other design file into your embroidery machine file format.
CURD Operations MongoDB with Node
Tags: node, mongodb, mongoe, curd
Published: 2022-02-09 06:36:00

## What is the CURD operations?
When we create a project with React as a client site and with NodeJs as a server site, we have to process some operations on the server site with NodeJs. CURD is an acronym that stands for Create, Update, Read, and Delete. According to our needs, We use to get, post, put, delete methods.

_Important Note:

> - NodeJs is a separate or another runtime of JavaScript.
> - NASA, Uber, IBM, Paypal use NodeJs.
> - The V8 engine makes JavaScript fast Just in time (JIT) compile.
> - npm stands for Node Package Manager.
> - MongoDB keeps the data in JSON structure.
_


- **Non-blocking:** Single-threaded accepts the request and then sends the request to others. The current thread won’t remain blocked with the request.
- **Asynchronous/ Call back:** NodeJs does not work synchronously or one by one.


## get any data from mongodb with node.js

```
Use a database collection by
const productcollection = database.collection('product');
Then, use app.get() function by below system
app.get('/product', async (req, res) => {
const getdata = productcollection.find({});
const showdata = await getdata.toArray();
res.send(showdata);
})
```

## get any single data from mongodb with node.js

```
Use a database collection by
const productcollection = database.collection('product');
Then, use app.get() function by below system,
app.get('/product/:id', async (req, res) => {
const id = req.params.id;
const getId = { _id: ObjectId(id) };
const showId = await productcollection.findOne(getId);
res.json(showId);
})
```


##  Post any data to mongodb with node.js

```
Use a database collection by
const productcollection = database.collection('product');
Then, use app.post() function by below system

app.post('/product', async (req, res) => {
const add = req.body;
const result = await productcollection.insertOne(add);
console.log(result);
res.json(result);
})
```


## delete any data from mongodb with node.js



```
Use a database collection by
const productcollection = database.collection('product');
Then, use app.delete() function by below system

app.delete('/product/:id', async(req, res)=>{
const id = req.params.id;
const getId = {_id: ObjectId(id)};
const deleteId = await productcollection.deleteOne(getId);
res.json(deleteId);
})

```
Fetch Jokes story from Joke API
Tags: javascript
Published: 2022-02-09 06:14:28


Fetch Jokes from https://icanhazdadjoke.com/api

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

**Console:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbenidlo5tw46vfq0mte.png)
 
I just learned it today so hopefully it can help someone. If there is mistake, please tell me so i can correct it. 

Thanks for reading.
Have a nice coding day!!!
Weekly web development resources #108
Tags: webdev, weekly
Published: 2022-02-09 06:31:26



______

##[Scale by Flexiple](https://2.flexiple.com/scale/multi-color-illustrations)
[![Scale by Flexiple](https://wweb.dev/weekly/content/108/illustration.jpg)](https://2.flexiple.com/scale/multi-color-illustrations)
A website with free multi-color illustration that gets updated every day.

______

##[Oldbook.css](https://github.com/UtilityHotbar/oldbook-css)
[![Oldbook.css](https://wweb.dev/weekly/content/108/oldbook.jpg)](https://github.com/UtilityHotbar/oldbook-css)
A cool CSS library that applies a clean, old-school parchment style.

______

##[Google Webfonts Helper](https://google-webfonts-helper.herokuapp.com/fonts)
[![Google Webfonts Helper](https://wweb.dev/weekly/content/108/googlefonts.jpg)](https://google-webfonts-helper.herokuapp.com/fonts)
A website that helps you to easily self-host Google Fonts.

______

##[Unique Buttons Animation](https://codepen.io/noob460/pen/qBVNVYO)
[![Unique Buttons Animation](https://wweb.dev/weekly/content/108/buttons.jpg)](https://codepen.io/noob460/pen/qBVNVYO)
A nice codepen with a bunch of creative button hover animations.

______

##[dddraw](https://fffuel.co/dddraw/)
[![dddraw](https://wweb.dev/weekly/content/108/dddraw.jpg)](https://fffuel.co/dddraw/)
A cool app to freehand draw some SVGs that have a hand-drawn feel.

______

##[Device Frames](https://deviceframes.com/)
[![Device Frames](https://wweb.dev/weekly/content/108/deviceframes.jpg)](https://deviceframes.com/)
A tool to create mockups by using a 3D device .

______

##[LetMeScroll](https://github.com/BMSVieira/letmescroll.js)
[![LetMeScroll](https://wweb.dev/weekly/content/108/scroll.jpg)](https://github.com/BMSVieira/letmescroll.js)
A JavaScript library to help handling scroll events.

______

##[Files](https://www.files.gallery/)
[![Files](https://wweb.dev/weekly/content/108/files.jpg)](https://www.files.gallery/)
A Single-file PHP app that can be dropped into any folder, instantly creating a gallery of files and folders.

______

##[a11yphant](https://a11yphant.com/)
[![a11yphant](https://wweb.dev/weekly/content/108/accessibility.jpg)](https://a11yphant.com/)
A cool project that teaches the basics of web accessibility.

______

##[EmojiAI](https://emojiai.com/)
[![EmojiAI](https://wweb.dev/weekly/content/108/emojiai.jpg)](https://emojiai.com/)
A small app that suggests emojis based on a text you enter.

______

##[Medusa](https://www.medusajs.com/)
[![Medusa](https://wweb.dev/weekly/content/108/medusa.jpg)](https://www.medusajs.com/)
An open-source Shopify alternative to easily create a headless commerce store.

______

##[Shades](https://reactry.github.io/shades/)
[![Shades](https://wweb.dev/weekly/content/108/shades.jpg)](https://reactry.github.io/shades/)
A small tool, written in React to generate tints and shades.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
Amigo CSS - A New CSS Framework
Tags: css, cssframework, amigocss
Published: 2022-02-09 06:00:42

---
title: Amigo CSS - A New CSS Framework
published: true
description: Amigo CSS is a simple, custom-first and intuitive CSS framework for CSS lovers
tags: css, cssframework, amigocss
cover_image: https://amigocss.com/img/amigocss-image.png
---

This past Sunday I launched my first open source project, a new CSS framework - [Amigo CSS](https://amigocss.com/)

Amigo CSS is a simple, custom-first and intuitive CSS framework for CSS lovers. 

Amigo CSS is tailored for:

1. Beginners
2. Developers' creative freedom

Let me know what you think. I recommend to first check the philosophy behind Amigo CSS at our website [amigocss.com](https://amigocss.com/)
Unix and Git
Tags: mkdir, touch, dvcs, git
Published: 2022-02-09 05:56:36

Using **Unix and Git** was interesting and realizing they are almost used all the time during development encourages beginners like me to learn it thoroughly.

*Git* is important for teams because they help save previous version of the projects while newer branches are being worked on. This way previous versions can be retrieved at any time when ever required. *Git* also helps that every one in the team can receive a copy of the whole project files remotely at any time. 

Some of the basic commands of *Unix* regarding files are 
1. touch 
2. echo 
3. head 
4. tail 
5. cat 
6. grep 
7. nano 
8. rm

Commands using directories are 

1. mkdir
2. rmdir
3. git 
4. mv
5. git cp
6. git branch
7. git checkout
8. git pull
9. git push
10. git clone

Learning *Unix and Git* could take as much as two days. If you're interested you'll find it really useful as a developer. 

Thanks for reading :) !
Day 10 of 100DaysOfCode
Tags: 100daysofcode, react, programming
Published: 2022-02-09 05:46:05

## Day 10 of 100 Days Of Code
_I was too tired for writing a post yesterday._

Here can you find what I learned (& published) yesterday.

### What I published / coded (/ updated) yesterday?
* Day 10 of 100DaysOfCode started with....
* Coding the disweb rate limits, * Improving my #React (#ReactJS) knowledge. 


> **NOTE:** I hadn't much time, unfortunately.
Prop Types
Tags: react, javascript, reactnative, redux
Published: 2022-02-09 05:23:54

Before the release of React 15.5.0 version prop-Types is available in the react package but in later versions of React have to add a dependency in your project. You can add the dependency in your project by using the command given below:

```
npm install prop-types --save
```

Import Elements
     

```
  import PropTypes from 'prop-types'
```


SO we get a something Different type of Prop-Types below: 
 

## Basic types

> PropTypes.any: The prop can be of any data type
> PropTypes.bool: The prop should be a Boolean
> PropTypes.number: The prop should be a number
> PropTypes.string: The prop should be a string
> PropTypes.func: The prop should be a function
> PropTypes.array: The prop should be an array
> PropTypes.object: The prop should be an object
> PropTypes.symbol: The prop should be a symbol

and Here we can example
`Component.propTypes = {
  anyProp: PropTypes.any,
  booleanProp: PropTypes.bool,
  numberProp: PropTypes.number,
  stringProp: PropTypes.string,
  functionProp: PropTypes.func
}`

## Renderable types
PropTypes also exports the following validators for ensuring that the value passed to a prop can be rendered by React.
`Component.propTypes = {
  nodeProp: PropTypes.node,
  elementProp: PropTypes.element
}`



## Instance types

In cases where you require a prop to be an instance of a particular JavaScript class, you can use the PropTypes.instanceOf validator. This leverages the underlying JavaScript instanceof operator.

`Component.propTypes = {
  personProp: PropTypes.instanceOf(Person)
}`

## Multiple types
PropTypes also exports validators that can allow a limited set of values or multiple sets of data types for a prop. Here they are:

- PropTypes.oneOf: The prop is limited to a specified set of values, treating it like an enum
- PropTypes.oneOfType: The prop should be one of a specified set of types, behaving like a union of types

`Component.propTypes = {
  enumProp: PropTypes.oneOf([true, false, 0, 'Unknown']),
  unionProp: PropTypes.oneOfType([
    PropType.bool,
    PropType.number,
    PropType.string,
    PropType.instanceOf(Person)
  ]) 
}`

`**and here also **

## Collection types

## Required types
Switch github account in terminal
Tags: github, git
Published: 2022-02-09 05:29:56

If you have 2 github accounts and want to switch in different projects to commit and push, you may need to clean some old account cache, otherwise, when you run `git push`, you may see some forbidden error.

## Step 0

Make sure you have the "personal access token" for both accounts. You can create such tokens by go to your github account "[developer settings](https://github.com/settings/tokens)", then create a token there (make sure you select all "repo" related permission.

## Step 1

Install `git-credential-manager`:

```bash
$ brew tap microsoft/git
$ brew install --cask git-credential-manager-core
$ brew upgrade git-credential-manager-core
```

## Step 2

Delete your current github account in "keychain access" app: Open the "keychain access" app, search "github.com", select the current item and delete it

## Step 3

Back to your repo, run `git push`, since `git-credential-manager` auto hooked the `git push`, and it doesn't find any saved password, this time it will pop up a window to ask you sign, either sign in via web or just input the "personal access token" you saved in the step 0.

Next time, if you want to switch account again, do the same process: 
1. delete current one in "keychain access"
1. run "git push" to trigger the pop-up window to input your "personal access token"

## Reference
* https://stackoverflow.com/questions/47465644/github-remote-permission-denied
Learning PHP, JavaScript, WordPress theming & the WP REST API to Create Custom & Interactive WordPress Websites 
Tags: javascript, programming, webdev, wordpress
Published: 2022-02-09 04:55:26

I am taking this course from Udemy, so far I am having lots of fun!
{% youtube FVqzKAUsM68 %}
https://www.udemy.com/course/become-a-wordpress-developer-php-javascript/
Gatsby Project: CSS crashes when I reload page
Published: 2022-02-09 04:39:06

I am building a site with Gatsby.
I am using a component that imports a script and returns a form.
The problem is, that after you loaded the page that shows the form, and then you click to any other page and go back to that form page, the css fully crashes for the entire site and you have to refresh the whole page.
To check out what I mean click this link https://baerenherz.org/, go to the dark blue button on the very right of the menu, then click to any other navigation site and then click again on the blue button (jetzt-spenden).

Here is my component for the donation form :

```
import React, { useState, useEffect } from "react"
import {Helmet} from "react-helmet"

import Loading from "./Loading"

function Child() {
  return(
	<div style={{width: "75%", margin: "4em auto"}} >
	  <Helmet>
	    <script type='text/javascript' aysnc>
	      {` window.rnw.tamaro.runWidget('.dds-widget-container', {language: 'de'}) `}
        </script>
	  </Helmet>
	  <div className="dds-widget-container"></div>
	</div>
  )
}

function RaiseNow() {
  const [loaded, setLoaded] = useState(false)

  useEffect(() => {
	const scriptTag = document.createElement('script')
	scriptTag.src='https://tamaro.raisenow.com/xxx/latest/widget.js'
	scriptTag.addEventListener('load', ()=> setLoaded(true))
	document.body.appendChild(scriptTag)
    return ()=>{
      scriptTag.removeEventListener(); // check if necessary
      setLoaded(false) // check if necessary
    }

  }, []);


  return (
	<>
	  {loaded ? <Child /> : <Loading/>}
	</>
  )
      }


export default RaiseNow
```

What I noticed is, that the second time you visit the page, the Loading.... component does not even show anymore.. the Layout is displayed but as soon as the form shows, it crashes...

Since I cannot solve this issue since literally last year I would really appreciate any help with this. Thank you in advance.
Day 1 - Redesigning Nasa's Astronomy Picture of the day Webpage
Tags: beginners, opensource, figma, design
Published: 2022-02-09 04:24:08

Good evening to those within local time. Hello!
Today I have looked back onto my Figma file from the failed attempt in submitting a project like this for an internship.  What I have remembered is how the it is more oriented like social media and how the like button would function. 

![Figma Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lvg8c70ijc5oirddgzi.png)

When I have started I when straight to making the folders and making a whole repository out of it.
* It's always best, even though you made a plan yesterday or the day before, that you double check what you want an commit to what you want. 

First I will be starting the `npx create-react-app` command in terminal to make the directory. However, I forgot that I want to have a typescript code base, not a javascript, so I installed the default react app 😅. This was a pain since it is the first thing into the project. Now I have fixed up my mistake and used the `npx create-react-app my-app --template typescript` command. Oh yes! I don't remember, but I will be writing this in typescript because for someone learning along the way, I can make a few mistakes, so at least there is some level of safety with that. 

I have made a couple of changes to the project already, and that was changing the React.StrictMode  in index.tsx to fragments because it looks nicer to me and updated the README file to make it more like part of the project rather than a template. 

* [Check out my Repository for this project!](https://github.com/H12M54AM/nasa-astronomy-webpage)

---

## What I have learned
* Do not be hasty or overly excited to start a project, because you might commit to a codebase or a version you may not want to be in and it will be harder in the future. 

---

## Resources
* [Adding Typescript to your React Project](https://create-react-app.dev/docs/adding-typescript/)

---

This is all I have done to this project and I am glad on starting with doing it. More will come next time, thank you for reading! Bye!
Android package manager and installer for Windows
Tags: android, dart, opensource, cpp
Published: 2022-02-09 04:00:45

## [wsa_pacman](https://github.com/alesimula/wsa_pacman)
<span><strong><i class="fa fa-star">Star 1.1k</i> <i class="fa fa-eye">Watch 22</i> <i class="fa fa-code-fork">Fork 185</i></strong></span>

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

A GUI package manager and package installer for Windows Subsystem for Android (WSA).

Currently provides a double-click GUI installer for .apk files that shows app information (package, icon, version and permissions), allows normal installations as well as upgrades and downgrades.

The app additionally provides a button to open Android settings and one to open the "Manage Applications" Android settings page, from which you can uninstall or disable applications and grant or revoke permissions

## Settings

- Autostart WSA
  - on/off
- Android port
  - Default: 58526
- Language
  - [All options](./locale/)
- Theme mode 
  - System
  - Dark
  - Light
- Window transparency (mica)
  - Full
  - Partial
  - Disabled
- Adaptive icon shape
  - Squircle
  - Circle
  - Rounded square
  - Disabled
  
## More screenshots

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

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

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

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

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


## License
GPL-3.0
React NFT Website with Dark Mode Toggle
Tags: react, html, css, webdev
Published: 2022-02-09 03:29:57

## You can get the template from the link proivided in the description of the video.

### Technologies Used :
+ React
+ CSS

### Libraries and Assets Used :
+ React Icons
+ Scroll Reveal for Animations
+ Sass for scss

## To learn how to create this template watch the complete video. You can get the template for free from the link provided in the description of the video.

{% youtube up60it73iqU %}

## Please do like the video and subscribe to the channel. It helps and motivates me to create more content like this.

## If there are any room for improvements please let me know. You can also fork the repository and give me a merge request if you can implement something more.
Localization - Laravel Localization Example
Tags: laravel, php, localization, multilanguage
Published: 2022-02-09 03:56:28

In this example, I will show you the localization - laravel localization example. Laravel's localization features provide a convenient way to retrieve text in different languages, allowing you to easily support multiple languages within your application. So, here I will show you how to create localization in laravel 6/7/8 or laravel multi-language and laravel 8 localization examples.

```
Step 1 : Create Localization File

Step 2 : Create Controller

Step 3 : Add Route in web.php

Step 4 : Create Blade File
```

Run this example in your browser and get output like the below screenshot.


![Localization - Laravel Localization Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tn2pea3lai92bmz55rm6.png)

---

> **_[Read More : Localization - Laravel Localization Example](https://techsolutionstuff.com/post/localization-laravel-localization-example)_**
GCC erron Golang
Tags: go, how, webdev
Published: 2022-02-09 03:55:47

On windows you may got the gcc compiler error while trying to add packages like "gorm.io/driver/sqlite" in Golang. The cause for the error is that, underlying package require the gcc C compiler which is not installed on Windows PC by default.

## Solution
We need to install the C compiler (gcc) on Windows machine and also need to add the path to environment variable.

The easiest way to install the [mingw](https://jmeubank.github.io/tdm-gcc/), is get package from tmd-gcc repository.

Also add the path to the bin folder as follows, in environment variables. (Just type `env` on start menu and you will get environment variables dialog)

`C:\TDM-GCC-64\bin`

Read More Golang guides on [JSU](https://devmnj.wordpress.com/tag/golang)
Terminal emulator application for Android
Tags: android, opensource, java, linux
Published: 2022-02-09 03:41:07

## [termux-app](https://github.com/termux/termux-app)
<span><strong><i class="fa fa-star">Star 10.8k</i> <i class="fa fa-eye">Watch 742</i> <i class="fa fa-code-fork">Fork 1.8k</i></strong></span>

Termux is an Android terminal application and Linux environment.

Note that this repository is for the app itself (the user interface and the terminal emulation).

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

NOTICE: Termux is broken on Android 12. Android OS will kill any (phantom) processes greater than 32 (limit is for all apps combined) and also kill any processes using excessive CPU. You may get [Process completed (signal 9) - press Enter] message in the terminal without actually exiting the shell process yourself. Check the related issue #2366, issue tracker, gist with details and this TLDR comment on how to disable trimming of phantom processes. A proper docs page will be added later. An option to disable the killing should be available in Android 12L or 13, so upgrade at your own risk if you are on Android 11, specially if you are not rooted.

## Features
- Enjoy the bash and zsh shells.
- Edit files with nano and vim.
- Access servers over ssh.
- Compile code with gcc and clang.
- Use the python console as a pocket calculator.
- Check out projects with git and subversion.
- Run text-based games with frotz.

## License
The termux/termux-app repository is released under GPLv3 only license.
#### Exceptions
Terminal Emulator for Android code is used which is released under Apache 2.0 license. Check terminal-view and terminal-emulator libraries.
Check termux-shared/LICENSE.md for termux-shared library related exceptions.