teleren/devto huggingface dataset:
14 sites to submit your app (updated list)
Tags: showdev, startup, beginners, productivity
Published: 2021-02-01 22:15:26

Hi everyone 👋, I've been working on [iplan.to](https://iplan.to) during January and spent the last week researching how to launch it.

![how it works](https://dev-to-uploads.s3.amazonaws.com/i/rueoxk4iw0q8utvhgsb0.gif)

I documented the process [here on DEV](https://dev.to/notanaiyet/series/11027), where you can check the resources and tips I found.

Today I'm sharing the updated list of all the sites where I posted my app (you can do it in all of them for free).

# Full list

I decided to separate them based on the time it takes from submission until it gets accepted.

### Immediately

It's immediate, but I suggest you create an account on these sites as soon as possible, so you don't have a newly created one when you really need it. Better if you start interacting and networking before your launch!

✈ [Product Hunt](https://www.producthunt.com/)

✈ [Hacker News](https://news.ycombinator.com/show)

✈ [Indie Hackers](https://www.indiehackers.com/)

✈ [Reddit](https://reddit.com/)

✈ [DEV](https://dev.to/)

✈ [Makerlog](https://getmakerlog.com/)

### Took a few hours

🚗 [AlternativeTo](https://alternativeto.net/)

🚗 [Launched!](https://launched.io/)

### Weeks or even months

🐌 [10words](https://10words.io/)

🐌 [AppRater](https://apprater.net/)

🐌 [BetaPage](https://betapage.co/)

🐌 [Startup Buffer](https://startupbuffer.com/)

🐌 [Startup Stash](https://startupstash.com/)

🐌 [Launching Next](https://www.launchingnext.com/)

### Bonus track!

If you can also write an article, these are some sites where you could consider posting:

📰 [Mashable](https://mashable.com/submit/)

📰 [TechCrunch](https://techcrunch.com/pages/tips/)

📰 [MakeUseOf](https://www.makeuseof.com/contact/)

📰 [Netted](https://www.netted.net/contact-us/)

📰 [ReadWrite](https://readwrite.com/contact/)

📰 [Listly](https://list.ly/)

# Thanks, I'd really appreciate your feedback!

If you want to leave some feedback, you can do it on my **Product Hunt** post: 

### 👉 [Leave a review](https://www.producthunt.com/posts/iplan-to) 👈


Thank you and good luck with your own projects! 🚀
Setting up MongoDB
Tags: mongodb, node
Published: 2021-02-01 22:03:25

It's been a while since I fired up MongoDB, so I opened up a terminal and typed **mongo** thinking everything would be fine. Instead *macOS Catalina* gave me some grief about the developer being unrecognized...

The solution: **Homebrew**
```bash
>> brew tap mongodb/brew
>> brew install mongodb-community
```
Next I added the `/data/db` folder in `System/Volumes/Data`
```bash
>> sudo mkdir -p /System/Volumes/Data/data/db
>> sudo chown -R `id -un` /System/Volumes/Data/data/db
```
The first command creates the folders and the second changes its permissions.
##Finally
Here are the commands to start and stop MongoDB as a background service:
```bash
>> brew services run mongodb-community
>> brew services stop mongodb-community
```
Unless you love typing things, edit your `.bash_profile` and set some aliases for the above commands.

Once MongoDB is running, you can type **mongo** in the terminal to start the mongo shell or run a Node.js program.
```js
var MongoClient = require('mongodb').MongoClient;

// Connect to the db
(async () => {
  const client = await MongoClient.connect('mongodb://localhost:27017', {useUnifiedTopology: true });
  const dbs = await client.db().admin().listDatabases();
  console.log(dbs)
  client.close();
})();
```
Bohemian Turned Dev
Tags: beginners, introduction, learning
Published: 2021-02-01 22:01:10

  Hello there, 
(Taps on mic) "Testing one two" 
This is the me, H3 that has joined to learn things and stuff about the things and stuff I haven't learned yet. 

  I am here saying hello. In my past lives I have been a bohemian musician, guitar instructor, performer, event organizer, and general scallawag with what I would consider a pinky toenail in web development. I have built and maintained a few sites over the years since 2001 but have not really understood the programming side of it. This year at my ripe old age of  "too old to be doing this" I have decided to join a bootcamp during the plagues and learn another new skill. 

I thank you all immensely in advance for your patience while embarking upon this next journey. 

With some excitement, 
HMBIII
Introducing Wrap.sh - an internal hackathon project
Tags: devops, reactnative, cicd, go
Published: 2021-02-01 22:00:40

Hey DEV Community!Some of the coolest people I've met were through university hackathons. It was always a great way to take a break from school/work, get to know others, and come up with interesting ideas to hard problems. I remember discovering my love for Awake Chocolate, learning new tools and pitching nervously the next day. What I loved most about these events is that no matter who won, everyone felt that they contributed and made something worth sharing.

Unfortunately, I hadn't worked at a workplace before LayerCI where experimentation was so engrained into the company DNA. Why did we ever stop making things together and instead only go to engineering conferences? Smack in the middle of the pandemic, our team decided to do an internal hackathon together and the results were awesome.I remember discovering my love for Awake Chocolate, learning new tools and pitching nervously the next day. What I loved most about these events is that no matter who won, everyone felt that they contributed and made something worth sharing.

Unfortunately, I hadn't worked at a workplace before LayerCI where experimentation was so engrained into the company DNA. Why did we ever stop making things together and instead only go to engineering conferences? Smack in the middle of the pandemic, our team decided to do an internal hackathon together and the results were awesome. 

Our very first open source project was born! 

I'm excited to share the winning, internal hackathon project idea my teammate Dmitri on the engineering team led - it's a bash script that can be installed with anyone's CI to create preview environments without having to spend the engineering hours building it yourself. 

Try for free here: https://wrap.sh/

Below is a high level overview on the experience. Feel free to try it out and let us know what you think at hello@wrap.sh


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


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9r7oq37w4lwqrln4ki8t.png)
7 of the Most Helpful React Videos I've Found
Tags: webdev, react, resources, programming
Published: 2021-02-01 21:56:12

So you've learned HTML, CSS, and some vanilla JavaScript, and you've decided that its finally time to get your feet wet with React.

It can be a pretty confusing place out there with all the resources available, many helpful and others not so helpful.

I've gone ahead and compiled a list of some of the most useful React videos that I have found. Each one of these videos has helped immensely with my understanding of React, and I hope that you will share a similar sentiment.

Don't be put off by some of the clickbait titles, there is some real gold here!

---
[Learn REACT JS in just 5 MINUTES (2020)](https://www.youtube.com/watch?v=MRIMT0xPXFI)

[Learn React In 30 Minutes](https://www.youtube.com/watch?v=hQAHSlTtcmY)

[React Tutorial for Beginners [React js]](https://www.youtube.com/watch?v=Ke90Tje7VS0)

[Learn React JS - Full Course for Beginners - Tutorial 2019](https://www.youtube.com/watch?v=DLX62G4lc44)

[React JS Crash Course (2019)](https://www.youtube.com/watch?v=sBws8MSXN7A)

[React + Material UI #1: Introduction - 2020 Edition](https://www.youtube.com/watch?v=pHclLuRolzE)

[React Tutorial For Beginners](https://www.youtube.com/watch?v=dGcsHMXbSOA)

---

I've watched all of these videos, and there is a decent amount of content overlap between them. However the more times you learn a concept, the more it gets cemented into your brain.

You don't have to build all of the projects in the videos, you don't even have to watch every video. However simply watching some of these videos and seeing how different people build React apps from start to finish can really shed some light on the mystique of building React apps.

After these you won't be a React master, but surely you'll be well on your way!![Will Smith Celebrating](https://dev-to-uploads.s3.amazonaws.com/i/c13yps9axxscbktr29di.gif)

I hope that you were able to take away something useful from here!
10 dicas para começar com DevOps em 2021
Tags: devops, cloudskills, developer
Published: 2021-02-01 21:36:19

DevOps é algo que é de grande importância em todos os projetos de Software, e é algo que acredite ou não, ainda causa muita confusão. Até hoje ainda existem pessoas que acreditam que porque rodam uma aplicação em um container, estão aplicando DevOps, ou então aquelas que tem um deploy automatizado.

DevOps é uma mudança cultural que precisa acontecer, e essa mudança também vem em conjunto com algumas ferramentas que podemos utilizar para apoiar todas as mudanças necessárias.

E apesar de algumas pessoas ainda movimentarem as “brigas” sobre DevOps ser ou não um cargo, o fato é, que muitas empresas buscam profissionais capacitados para apoiar essa transformação e implantação de todo o necessário,  e aí, se encaixam as pessoas que buscam trabalhar foçadas no DevOps.

Pensando nisso, gravei um vídeo bem legal, com 10 dicas para quem está pensando em começar nesse mundo de DevOps em 2021, com uma dica bônus bem legal no fim do vídeo. 
Acompanhem o vídeo, e deixem suas opiniões sobre o tema.

{% youtube 5ctkzaJbECQ %}
UI Dev Newsletter #42
Tags: html, css, javascript, webdev
Published: 2021-02-01 21:25:26

- [New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly](https://bit.ly/2MDBZRo)
Una Kravets introduces the new CSS property that helps maintain spacing in responsive layouts.


- [Don’t Shut Down Your Business! Instead Use Eleventy Image](https://bit.ly/3pBYGUH)
Zach Leatherman announces an exciting new utility to perform build-time image transformations for both vector and raster images.


- [Re-Creating the Porky Pig Animation from Looney Tunes in CSS](https://bit.ly/3j7zym4)
Kilian Valkhof shows how to use transforms and 3D perspective to make Porky Pig come out of red rings.


- [Create Loading Animations with SVG and CSS](https://bit.ly/39xumF3)
James Sinkala shows how to animate SVG stroke with CSS and a bit of math.


- [The most useful accessibility testing tools and techniques](https://bit.ly/36u6KiT)
Artem Sapegin shares a list of tools he uses to ensure everything is accessible for people with different abilities.


- [Making Remote Work Work: Useful Tools And Resources](https://bit.ly/2L7uNwx)
Cosima Mielke shares some useful tools and resources to stay creative, focused, and organized when working remotely.


- [Mesh](https://bit.ly/2L6VhOB)
The app for creating beautiful mesh gradients.


- [A single-div panda](https://bit.ly/3oAVuHD)
Diana, an 8-year-old, explains how to build a panda using CSS and a single div.



Happy coding!

[Subscribe to the newsletter here!](https://bit.ly/34155z3)
Npx in React ... A typo or something that actually makes sense
Tags: beginners, react, webdev
Published: 2021-02-01 21:10:44

Npm as we all know is a package manager for node. It is a tool that we use to install packages locally on our machine. It is a default package manager for node. If you wanna run the package that you just installed then you gotta specify that package in your package.json and install it locally and then do `npm run the-package-you-just-installed`.
 
But when initializing a new react project using create-react-app we do `npx create-react-app`. why is that? First, let's understand the problem we're trying to solve. So let's just forget npx and all that and let's do it using npm. 
* ok so first we gotta create the package.json file. So fire up your cmd and type `npm init -y`. -y will generate the package.json file without asking any questions. 
* next step is to __install the create-react-app__ so type `npm install create-react-app`.
* so we just installed create-react-app and now we run the package to create our react project. to do that we gotta modify the package.json file and tell npm the command to execute. Open up package.json in your favorite code editor and in the scripts object create a new key and name it react-app (you can name it anything you want). then store the string name "create-react-app" in that key. 
    ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h94tedybpfzujc55r05u.png)
* finally go to your terminal again and type `npm run react-app [your app name]`. after doing this your react project should be created. uuuf such a long process. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p4y8ys0ip6f6udeeq3d4.png)

### __lets make it much much much simpler ...__
so now instead of npm just type `npx create-react-app [app name]`. this will skip all the previous steps and just create your project directly. so easy right xd. so what's happening here? 
well, npx just executed the package specified without ever installing it locally. while npm installed the package locally npx just executed the package without ever installing it. so the conclusion is __npx makes sense__ 

Drop a comment or like the post or do both if you enjoyed the read. Follow me for more such content.
Building a Contact Form with Gatsby & getform in 5 minutes
Tags: gatsby, react
Published: 2021-02-01 21:08:04

Hi there!

I'm Arisa, a freelance Full Stack Developer living in Germany🇩🇪

I'm developing [Lilac](https://note.com/frontendlifeinde/m/m9b8feda1d547), an online school with hands-on Frontend e-books and tutoring👩‍💻

# What is this article about?

- Building a contact form with [Gatsby.js](https://www.gatsbyjs.com/) and [getform](https://getform.io/)

# Who is this article for?

- Anyone wants to build a form with Gatsby
- Anyone wants to build a form for free

Building a form is my favorite part since we've been introduced to use full of free sources.

I think you'll agree with me after what's written in this article😎

![gif](https://media.giphy.com/media/NaboQwhxK3gMU/giphy.gif)

# How to get started?

First thing first, sign up for [getform](https://getform.io/).

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

Create a new form.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3f8khbdyfsf1dj0lxcxk.png)

Name your form.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8g91z46yxnqx5ehcjgbu.png)

Copy example form snippet to paste & adjust in your contact form component file.

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

Make sure to put `action` attribute and the value you got in a form element.

As long as you keep the basics of the snippet like this, you're good to go.

```javascript
// src/pages/contact.js

<form method="post" action="https://getform.io/{your-unique-getform-endpoint}">
  ...
  <label>
    Email
    <input type="email" name="email" />
  </label>
  <label>
    Name
    <input type="text" name="name" />
  </label>
  <label>
    Message
    <input type="text" name="message" />
  </label>
  ...
</form>
```

Test your results by submitting something.

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

You'll even see a nice Thank you page by default.

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

Check your getform dashboard.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7ahd836hwswh52294q24.png)

Only takes under 5 minutes👍

But no one realizes without a reminder.

Let's set up an email reminder when someone sends you a form submission.

Just fill in your email address, and done✨

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

You'll get a reminder right away👍

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pcp1t34m0jwzl666hlwr.jpg)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wtxv8p49zgpzl0xugv97.jpg)

Of course, it works with other languages😎

Your Gatsby contact form is ready in just 5 minutes!

# Sources: 

> [Gatsby: Building a Contact Form](https://www.gatsbyjs.com/docs/building-a-contact-form/)

> [getform: Building a Gatsby contact form using Getform](https://blog.getform.io/building-a-gatsby-contact-form-using-getform/)
File Modes in Nodejs
Tags: node, javascript, filesystem
Published: 2021-02-01 20:55:53

####DAY 1 :
###**Hey folks**,
This is my short tutorial on File Modes (write,append)


#####1)fs.writeSync(fd, buffer[, offset[, length[, position]]])

```javascript
const fs=require('fs')
// 1.using writeFileSync
fs.writeFileSync('notes.txt','my name is ana')
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3qfz96pbkzzi3bkfvlip.png)

#####2)fs.appendFileSync(path, data[, options])
```javascript
const fs=require('fs')
// //1.using writeFileSync
fs.appendFileSync('notes.txt',',I live in India')
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/94p4jh7x6jwil1le1v3j.png)

>####Will continue further in the next tutorial.
2nd-3rd Weeks of JavaScript Bootcamp at Claim Academy
Tags: javascript, beginners, html, css
Published: 2021-02-01 20:46:02

Things are starting to progress in the boot camp as we learn more skills and have started delving deeper into JavaScript. 

The second week of the boot camp was focused entirely on HTML/CSS. A lot of the week was review for me as this would be the third time I have worked through HTML/CSS fundamentals. I was really happy with my weekend project landing page site. I created a simple resume/portfolio website that included a contact form at the bottom with radio buttons. I utilized my refreshed knowledge of CSS flex-box to align the sections on my site against background images and created 'cards' with rounded corners and some transparency to contain the different sections of my site and make it look aesthetically pleasing.

The third week we jumped right back in to JavaScript. After not doing any JavaScript the week prior, I was a little nervous that I had forgotten everything from week one. I was pleasantly surprised to find out that things quickly started coming back to me and I have started to realize just how much I have picked up in just a few weeks. We learned what OOP(Object Oriented Programming) is and the parent child relationship with object classes. We learned that we can use parent classes to create object types and then use child classes to 'inherit' the properties and functions from the parents. This allows us to create new object types that share common properties but also assign unique properties and functions to them. We can then create a new object using these object classes. At the end of the week we focused heavily on Arrays and learned new ways to interact with data in Arrays by using the filter and map methods. Filter allows us to pull out all of the items in an Array that fit within the parameters we select for. Map allows us to create a new Array from an existing Array and modify the data without mutating the original Array. 

Looking back on the last few weeks I have realized that we have really covered a lot of material and I am really pleased with how much I have learned thus far. I can't wait to start connecting front end HTML/CSS to the JavaScript and start getting some real functionality on my projects!
What is happening under the hood when you use toString(2) in JavaScript?
Tags: javascript, beginners, webdev, discuss
Published: 2021-02-01 20:33:36

I recently reviewed JavaScript base conversations and came across the `.toString(base)` method. While it is useful, I don't quite understand what is actually happening under the hood with this method.

Below is a quick function I wrote to convert a decimal number to binary. Is JavaScript essentially doing the same thing or something else?

```javascript
function toBinary(n){
    let bin = []
    
    while(n > 0){
        if (n%2==0){
            bin.push(0)
            n = n/2
        } else {
            n = n-1
            bin.push(1)
        }
    }
    return bin
}
```
Watch me Consume GraphQL with just HTTP Requests
Tags: graphql, contentful, post, video
Published: 2021-02-01 20:11:44

---
title: Watch me Consume GraphQL with just HTTP Requests
published: true
description: Shy from the Contentful DevRel Team, shows us how you can get started with consuming GraphQL without any client libaries, using just HTTP Post requests in cURL, Python, JavaScript, Ruby and PHP.
tags: #graphQL, #Contentful, #POST, #Video
canonical_url: https://youtu.be/aM2K55TJ4q4
series: Shy's Contentful GraphQL Posts
---

I wrote a blog post last week about how you can get started with consuming GraphQL without any client libaries, using just HTTP Post requests in cURL, Python, JavaScript, Ruby and PHP. For folks who would rather see the code than read it, I made a video showcasing how to get started. 


Check out the original article, and copy my code samples on the [Contentful blog](https://www.contentful.com/blog/2021/01/14/GraphQL-via-HTTP-in-five-ways/).
Setting Up Typescript with ESLint in 5 Easy Steps
Tags: typescript, javascript, eslint, react
Published: 2021-02-01 19:55:56


## Backstory

In June 2019, the team at Microsoft shared a [roadmap](https://github.com/Microsoft/TypeScript/issues/29288) for TypeScript which included an overhaul to the way they handle linting. One of the major changes to come about was the deprecation of TSLint and the adoption of ESLint as the formal linter of choice.

This article assumes you are starting a brand new project, but if you want to migrate from TSLint over to ESLint, the VSCode team has provided a [wonderful walkthrough](https://code.visualstudio.com/api/advanced-topics/tslint-eslint-migration).

Because of these changes, the ESLint team is no longer maintaining the `typescript-eslint-parser` package and they instead [recommend using](https://eslint.org/blog/2019/01/future-typescript-eslint) `@typescript-eslint/parser`.

## Setup

In order to get started, you'll need to navigate to your projects directory and run the following sequence of commands:

**1)** `yarn init -y`

This will create a brand new `project.json` file using the recommended default configuration.

**2)** `yarn add -D typescript eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser`

This installs the necessary base packages to get typescript and eslint integrated into the project.

**3)** `touch .eslintrc.js`

This creates your eslint configuration file where you can specify rules, options, settings, and much more. You'll want to add any necessary configuration options to the file as a part of this step. Make sure to also install any necessary dependencies, if you're extending a base configuration such as `airbnb`. I've provided a few example configuration files [here](https://github.com/thefrugaldev/dotfiles). These may be helpful if you're using react, react native, or node as your framework of choice, otherwise feel free to start with a blank slate. If you are using a base configuration, you'll want to make sure to install any peer dependencies as well.

**4)** Add a `lint` script to your `package.json` file that was created in step 1.

```
"scripts": {
  "lint": "eslint --ext .ts ."
}
```

**5)** Finally, run the previous script `yarn lint` to search for any errors or warnings in your `.ts` and `.tsx` files.

Thats it! I hope this quick reference guide served useful to you as you begin to build out your next great project!

> **Quick Note**: if you're extending the `airbnb-typescript` configuration, you may run across the following error:
>
> ```
> Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated.
> ```
>
> If this happens, you'll first need to add a `.tsconfig` file to your project, either manually or with the following command: `npx tsc --init`. Once that's been created, you'll want to update your `.eslintrc.js` file and include `project: './tsconfig.json'` under the `parserOptions` section.