teleren/devto huggingface dataset:
I'm 15 and made a 😴 bedtime calculator with React JS
Tags: react, css
Published: 2020-08-13 17:39:14

Ever wake up feeling groggy, even though you thought you had enough sleep? It turns out that by timing your wake up time based on REM cycles, you can wake up more refreshed and more productive.

This got me thinking, why don't I put my front-end web development skills to the test and build a tool that will help people, especially coders who are known for working late at night know when they should go to bed depending on when they want to wake up?

So, I built a bedtime calculator: sleepsources.com/bed-time-calculator with React JS, CSS, and some HTML for the landing page.

I would love anyone's feedback, and I think it's a useful tool because it will help anyone who uses it calculate when they should go to bed by choosing a time when they want to wake up.
Ai Generated Faces - Access it using Python
Tags: python, api, fun, programming
Published: 2020-08-13 17:37:35

You can find AI generated faces here
https://generated.photos/faces

Using this api its easy to access all the images

To access the API we will use requests package
before that get the api_key

```python
import requests

api_key = "#####################"
base_url = "https://api.generated.photos/api/v1/faces?api_key=" + api_key
```
Input fields for the api,
```python
# Page number to retrieve, Default: 1
page = "1"
# Maximum: 100, Default: 10
per_page = "2"
# short, medium, long
hair_length = "medium"
# male, female
gender = "male"
# joy, neutral, surprise
emotion = "joy"
# infant, child, young-adult, adult, elderly
age = "child"
```
add the query params value to base url
```python
url = "{}&page={}&per_page={}&hair_length={}&gender={}&emotion={}&age={}".format(base_url, page, per_page, hair_length,gender, emotion, age)
r = requests.get(url=url)
data = r.json()
```
Save the image in local for that it has to be downloaded using requests
File name be like 
  - 0-32.jpg
  - 0-64.jpg

Use [python for loop to iterate](https://www.programdoc.com/python/for-loop) over the list of value, you a use the index if needed [python enumerate will return both index and value](https://www.programdoc.com/python/enumerate) when used in for loop.
```python
for i, v in enumerate(data["faces"]):
    for j in v["urls"]:
        for key in j:
            r = requests.get(url=j[key])
            if r.status_code == 200:
                # write the image
                with open(str(i) + "-"+ key +".jpg", 'wb') as f:
                    f.write(r.content)
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9890l0lxeczcm9ynyu79.png)

[Learn Python Programming in Programdoc](https://www.programdoc.com/)
Quick tip: Vue 2 Options API vs Vue 3 Composition Api
Tags: vue, javascript
Published: 2020-08-13 17:33:12

Vue 2's Options API (left)
vs 
Vue 3's Composition API (right)

They look pretty similar here, but Composition API really shines when things get complex.

Remember to use ".value" for the ref, and to return any variables or functions you'll be using in the template!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8qxt7e1xeero0bd2nybw.jpg)
Google transforma Androids em detectores de terremotos
Tags: news, programacao, google
Published: 2020-08-13 17:22:45

A última atualização do Google Play Services, app nativo do Google, transformou os celulares Android em basicamente um sismógrafo.

O Google fez uma parceria com a Shake Alert, na Califórnia, que utiliza de uma rede com diversos sismógrafos para detectar terremotos e enviar alertas. Sendo assim, agora o Android irá receber alertas sobre terremotos e também enviará informações para a Shake Alert caso detecte algo.

![Exemplo de como será o alerta](https://dev-to-uploads.s3.amazonaws.com/i/vqm896bwjw6oalo66dsm.gif)

##Mas como isso é possível?
Atualmente os celulares já possuem acelerômetro e o Google programou para que caso o acelerômetro detecte qualquer alteração, envie esses dados juntamente com a localização da pessoa para poder criar alertas.


##Como evitam o falso positivo?
Através de uma rede enorme de voluntários e, claro, vários outros Androids! A partir dos dados vindos dos aparelhos, as informações são comparadas para que não haja falso positivo. Tudo isso extremamente rápido pois segundos fazem muita diferença!

Atualmente esse recurso só está disponível para Califórnia e passando por fases de melhorias, claro! O Google informou que ano que vem pretende lançar para mais países e estados.
Import large JSON file into MongoDB using mongoimport

Tags: docker, mongodb
Published: 2020-08-13 17:17:06

I was trying to import large data set JSON file into MongoDB my first method was using MongoDB Compass my file size was about 7GB but after 30 minutes passed still stuck on 0%, like the image below:
<br />
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fkbaluqym0htu8ybh8no.png)
<br />

So I used next method, <b>mongoimport</b> but I am using MongoDB with docker so in the first step I need to copy my huge JSON file to MongoDB container:
```shell
docker cp users.json CONTAINER_NAME:/users.json
```
then connect to my Mongodb container with below command:
```
docker exec -it CONTAINER_NAME  bash
```

and now just need to insert huge file using <b>mongoimport</b>:
```
mongoimport --db MY_DB --collection users --drop --jsonArray --batchSize 1 --file ./users.json
```
by using `--batchSize 1` option you will be insured huge JSON file will be parsed and stored in batch size to prevent memory issue.

if during import you encounter `killed` error from MongoDB import, maybe you need to increase memory size for your container by adding `deploy.resources` to your docker-compose file:
```yml
version: "3"
services:
  mongodb:
    image: mongo:3.6.15  
    deploy:
      resources:
        limits:
          memory: 4000M
        reservations:
          memory: 4000M  
```
Hasura Fit: Setting up Vercel
Published: 2020-08-13 17:15:57

## Why Vercel?

Vercel is an incredibly straight-forward hosting environment for our code. It provides a number of runtimes so that the most popular code can simply be uploaded to a Vercel project and it will run. Since our project is Javascript based, it will run just fine.

We’ll be using two separate Vercel projects for our tutorial primarily for educational purposes and as a separation of concerns.

First, we’ll be deploying our NextJs framework code to Vercel to run our primary web application.

Second, we’ll be running a very simple server function that acts as webhook for our Hasura project to update our content in GraphCMS later-on.

To begin, create an account with [Vercel](https://vercel.com/).

## Environment Variables in Vercel

Assuming you have forked and cloned both the Hasura-Fit and the Hasura-Fit-Hooks repos locally, you’ll now need to add them to your own version control account (ie. Github). If you only cloned and didn’t fork, you can [see how to change the URL here](https://docs.github.com/en/github/using-git/changing-a-remotes-url).

Once you have your code, pushed to version control, you can import those projects into Vercel from your account console.

![vercel-import-project.png](https://media.graphcms.com/K4jFMgZwQ2Ofd8eS3LdS)
![vercel-choose-repo.png](https://media.graphcms.com/OZiEkB8ATSeoRFURW1hE)

After you have imported your project, you will have the ability to define your variables under the Settings / Environment Variables page. It’s possible your project might error on the first build since the environment variables are not yet defined. Don’t worry about that yet.

![vercel-environment-variables.png](https://media.graphcms.com/tz1DlZitQRe9wQ9xfzcB)

`VERCEL_URL` in this case is a system default variable that will be dynamically populated by the Vercel environment with a special URL that is either referring to a branch from your repo or the master branch.

The remainder of the variables can be copied from the NextJs variables, with production urls being used where needed.

Next: [Set up Hasura](/blog/hasura-fit-setting-up-hasura)
Hasura Fit: Complete Guide / Start Here
Published: 2020-08-13 17:15:06

This is a multi-part tutorial on creating a fitness app with modern web-technologies. It utilises user accounts (Auth0), User data (Hasura), Editorial content (GraphCMS), serverless functions (Vercel) and the popular React framework NextJs (also hosted on Vercel).

The rough flow of our application is as follows.

A user comes to our application which shows content required no authentication. They decide to join the program and signup.

When signing up, they are redirected to Auth0 where a new user account is created, which in turn creates a new user account in Hasura for later reference, and then sends an authentication token back to our user in the web app with special permissions to be re-used with our Hasura API and a few modified parameters to help us confirm who our user is there.

The web application updates with this new information and then shows authenticated content, such as our workout programs, which comes from Hasura at the query level, but is resolved from GraphCMS through a federated API mesh which we configured in Hasura.

Once our user performs one of the workouts, this action will save a new session in our Hasura database and at the same time, trigger a web hook which increments the popularity of that workout in our GraphCMS content API.

Here’s a rough flow chart for the following steps.

![hasura-fit-master-diagram.png](https://media.graphcms.com/mB4SywivRBiQ3iUdOMKA)

If you find errors, typos, or updates to the functionality, pull requests are always welcome!

Next: [Set up GraphCMS](/blog/hasura-fit-setting-up-graphcms)
Builder's Block
Tags: beginners, career, discuss, help
Published: 2019-06-30 19:52:57

I'm a beginner, and like most beginners, I'm still learning. 

Naturally, when learning something, struggle is involved. I, though, love the struggle. I love getting stuck on something, and searching for an answer. More times than not, I usually try four or five different solutions before landing on one that works. 

I love the feeling of finally getting that piece of code to work and finally getting the output I'm looking for. 

---

Here's a little bit about me: 

My undergraduate degree is in Petroleum Engineering, but I work full time as a contract mechanical design engineer. Growing up, I was always around a computer (as I think most folks my age). My dad ran his own computer service business and was Network A+ Certified, so I was always just around computers, but hardly ever involved. 

My college degree didn't really teach anything in the way of computer science. Most of my classes were on paper, and if we did use our laptops, it was for excel. 

As a contract engineer, I don't have much room for movement. Whether that be with a new technology, more responsibility, or even chance at promotion. The things I do on a daily basis aren't challenging and not even that time consuming. 

I want to make a move into the tech industry. I'm totally enamored by startups and small companies. The idea of a small team working to push out a product just excites me. So, I leaned in on learning how to become a developer. 

For the past 6 months (and a little time in the middle of 2018) I started to learn web development, specifically the MERN stack. I've built 2 APIs, 2 react projects (one of which I'm currently working on getting the API integrated with). I've dabbled in ElectronJS development by creating a Pomodoro Timer (I actually use this at work). 

---

So, how do I struggle? 

I'm not creative. I'm not a Zero to One type of person. I'm very much a 1 to 1.5 or 2.0. I struggle with coming up with ideas for things to put in my portfolio and show that I'm ready to be a part of a team. I work best when I have a clear goal or deliverable. I'm also not that good at design. 

When I do have an idea, I can usually get the MVP built in a few days (coding after work), but design and making things look nice are always where I start to lose interest. 

I want more than anything to move myself into the tech industry, and doing so is harder than I anticipated. Which I guess I kind of expected, you don't know what you don't know. I think I'd benefit a lot from a mentor or teacher, but I would feel bad not being able to compensate them for their time. 

Every bit of advice I've gotten on "how to get better" is to just build things. "You've just got to dive in and build something. That's when you'll learn the most!" I couldn't agree more, I learn by doing, which I think most people do. But what am I supposed to do if I don't have any ideas? 

---

I'm very interested to hear what you have to say. How should I overcome this "Builder's Block"?
Calculating distance between two points using Rust and Node.js
Published: 2020-08-13 16:59:19

Hello all,

I've made an app using which call Rust functions in Node.js using SSVM and Docker.

Link: https://github.com/ManthanKeim/ssvm-nodejs-starter

Inspired by @secondstateinc 

The app is about calculating distance between two points in a coordinate system.
Share your GitHub Actions Hackathon Updates!
Tags: actionshackathon, githubactions, opensource, meta
Published: 2020-08-13 16:58:42

---
title: Share your GitHub Actions Hackathon Updates!
published: true
description: Use this thread to share progress updates on your GitHub Actions hack!
tags: actionshackathon, githubactions, opensource, meta
---

Let us know what you’re building and how things are going throughout the [GitHub Actions Hackathon](https://dev.to/devteam/announcing-the-github-actions-hackathon-on-dev-3ljn) on DEV!

**You can use this thread for sharing ideas, gathering feedback, and to get to know your fellow hackathon-ers!** 

If you have a big update or just worked through a tough problem, we encourage you to publish a standalone post, but please add the [#actionshackathon](https://dev.to/t/actionshackathon) tag so we can read all about it!

If you need help with a specific problem, check out the [help thread](https://dev.to/devteam/github-actions-hackathon-help-thread-1li4) where the support crew is standing by to answer your questions.

Happy coding!
GitHub Actions Hackathon Help Thread
Tags: actionshackathon, githubactions, opensource, help
Published: 2020-08-13 16:57:42

---
title: GitHub Actions Hackathon Help Thread
published: true
description: Comment here if you need any help during the hackathon!
tags: actionshackathon, githubactions, opensource, help 
---

**Looking for help with your [GitHub Actions Hackathon](https://dev.to/devteam/announcing-the-github-actions-hackathon-on-dev-3ljn) submission? You came to the right place!**

We'll be available to help anyone who runs into issues or has questions about the GitHub Actions x DEV Hackathon.

You are encouraged to comment below if you need asynchronous assistance!

If you'd like to share more general progress that you're making on your project, you can do so in the [community update thread](https://dev.to/devteam/share-your-github-actions-hackathon-updates-251m)!
6 things to know as a fresh IT student
Tags: computerscience
Published: 2020-08-13 16:52:55

Hi people, I wrote this a while ago but never posted it here and it's time to I guess :).  
So, like everyone I’ve been amazed by what the digital world is made of, and what it can offer us as an added value to our daily life. Don’t get me wrong I’m still amazed even as a senior computer engineering student.

I’m a Moroccan youngster who always had a dream of becoming a computer scientist, my first most real step was joining the Higher School of Technology in Essaouira, yes, where the journey did start.
I mainly address my talk to the newbies, computer engineering students and whoever wants to follow this path :

##1.It’s not easy
Demotivating you guys will never be my intention, but all I’m saying here: you’ll face some obstacles and it’s normal as one of my professors used to say:
> *“if it was easy, everybody would be doing it”*.  

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

##2.Always know that you know nothing
Always remember, whatever level you are, whatever knowledge you have, you still don’t know a thing, you must always have that hunger for more, it’s never enough, it’s never satisfying, the passion and the curiosity are what going to make you excel!

>*"One thing only I know, and that is that I know nothing"* — Socrates  

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

##3.You will lose it
The journey of a student, generally, will surely have some moments of loneliness, sometimes you lose your guiding light and sometimes you lose even the passion to do things you love, that’s totally normal, and that’s why you should take a break from time to another, you’re not a robot, do sports, go on a trip or even watch a movie then you’ll have it back.  

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

##4.Never compare yourself with others
Comparing yourself with others is a double-edged sword, it may build you up as it may destroy you down, I choose not.
It’s good to look up to people but you always have to keep in mind what they had to sacrifice in the process.
One more thing about this, you're different it must be your way of doing things.

##5.Your circle is important
The lone wolf methodology mainly won’t help you in your journey, your friends are a very important factor in your progress, choose them carefully so they will be one of your boosters.  

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

##6.Professors are only there to guide you
Learning by yourself is exactly what is going to make a difference, you must not wait for the school to give it all to you, once you know the way, the searching for information should be yours to do.

##Finally,
I want you to know that as long as you love what you do ,you’ll be doing just great !  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5n5z6nsgr57gxi404zgi.jpg)
Free hosting websites.
Tags: codenewbie
Published: 2020-08-13 16:49:21

How to host your website for FREE

Top 5 websites for hosting your website:

GitHub Pages

Netlify

https://t.co/ZrxxZBtoPk

Google Cloud

Amazon S3

Which one do you use?

Comment below for any other websites. 👇👇👇👇
#DEVCommunity #CodeNewbies
React UI Development with Storybook 6.0
Tags: storybook, react, javascript, css
Published: 2020-08-13 16:36:15

I gave a talk on the new Storybook 6.0 and also gave some tips and tricks when building UI Components in React. (the talk was using a beta version so some things have changed in storybook since then, but it's still very relevant)

https://www.youtube.com/watch?v=ZGXuzVipe1U&feature=youtu.be&t=1166
Installing Vim in a Docker Container
Tags: docker, vim
Published: 2020-08-13 16:19:53

I just realized that my docker container did not have vim installed, and had to google some commands.

All you need to do is run the commands below in the container. These commands are mainly used in Ubuntu containers.

```
apt-get update
apt-get install vim
```

In case of CentOS, the commands below will work.

```
yum install vim
```

Lastly for Alpine:

```
apk update
apk add vim
```

If you want to directly write the commands in the Dockerfile:

```
FROM ubuntu

RUN ["apt-get", "update"]
RUN ["apt-get", "install", "-y", "vim"]
```
Use Node.js to create official licensed art prints
Tags: node, javascript, showdev, motivation
Published: 2020-08-13 16:13:11

I wrote a Pinball emulator (https://github.com/neophob/wpc-emu) - and use this emulator to create nice looking art prints.
They are pretty geeky/nerdy - but I really like them.

The latest series of my art prints contains direct video memory dumps - which would scream for copyright violations. Thats why those prints are officially licensed from Bally/Williams.

What do you think about https://www.concealed-art.com/product-page/congo-dmd-art-print

Cheers
What work related websites are your daily go-to and why?
Tags: discuss, watercooler, chat
Published: 2020-08-13 15:42:10

---
title: What work related websites are your daily go-to and why? 
published: true
description: From sites like Toptal to hackernews to StackOverflow, we all have a handful of websites we visit everyday, share yours below and why it’s a must! 
tags: discuss, watercooler, chat
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jwuyl0btmvmr7k91akvu.jpg
---

From sites like Toptal to StackOverflow, we all have a handful of websites we visit everyday, share yours below and why it’s a must!
Bundling Strapi & Nuxt: E-Commerce Tutorial with Snipcart
Tags: webdev, javascript, vue, tutorial
Published: 2020-09-11 18:24:30

---
title: Bundling Strapi & Nuxt: E-Commerce Tutorial with Snipcart
published: true
date: 2020-08-13 15:35:27 UTC
tags: webdev, javascript, vue, tutorial
canonical_url: https://snipcart.com/blog/strapi-nuxt-ecommerce-tutorial
---

![Bundling Strapi & Nuxt: E-Commerce Tutorial with Snipcart](https://snipcart.com/media/204926/strapi-nuxt-ecommerce.png)

It feels like we haven’t explored a [headless CMS](https://snipcart.com/blog/headless-ecommerce-guide) for ages on the blog.

Strapi sounds like an excellent choice to come back to it 👌

It was already a solid product when we first wrote about it [back in 2018](https://snipcart.com/blog/node-js-react-strapi-tutorial). However, the team at Strapi didn’t stop the great work there. I can’t wait to see what it has to offer as of today.

In this tutorial, I’ll mix it up with two other powerful tools from the Jamstack ecosystem. The result? A Strapi-powered e-commerce website.

The frontend will be built using the neat Vue framework that is Nuxt.

The [e-commerce](https://snipcart.com/blog/ecommerce-checklist) functionalities will be provided by Snipcart, our JS/HTML shopping cart.

Here are the specific steps:

- Generating a Strapi app & creating products
- Consuming products with Nuxt.js
- Adding e-commerce functionalities with Snipcart
- Handling custom fields in the cart
- Integrating a GraphQL plugin
- Deploying the Strapi & Nuxt e-commerce app

Let’s start by meeting our players.

## What’s up with Strapi?

![strapi-tutorial](https://snipcart.com/media/204940/strapi-tutorial.png)

**[Strapi](https://strapi.io/) is an open-source Node.js-based headless CMS. It’s 100% JavaScript, fully-customizable and developer-first.**

It has made its way to the top of [the most popular headless CMSs](https://headlesscms.org/) thanks to the flexibility it gives to devs to work with any tools they love.

*Using Vue, React, or plain JS on the frontend?* It doesn’t matter. *Consuming the API with REST or GraphQL?* Both options work seamlessly. *Connecting PostgreSQL, MongoDB, SQLite, MySQL as database?* All the same to Strapi.

In our last Strapi post, we highlighted another huge benefit a Node.js headless CMS brings: **building apps that are entirely JavaScript**&mdash;on the frontend and the backend alike. Welcome code universality, performance & easy npm install at every level!

This tutorial will showcase both the flexibility of Strapi and the power of [Universal JS](https://en.wikipedia.org/wiki/Isomorphic_JavaScript) apps.

On another note, we’re big fans of the whole redesign the Strapi team did for their branding and marketing website lately. Looking sharp!
  

→ Read the full tutorial [here](https://snipcart.com/blog/strapi-nuxt-ecommerce-tutorial)