teleren/devto huggingface dataset:
ReactJS para iniciantes #04 - React router e absolute imports
Tags: react, javascript, tutorial
Published: 2020-04-28 14:55:57

{% youtube 2jPuoLD--Us %}
Nesse vídeo nós damos continuidade no nosso clone do Gatry, integrando o react router no projeto e implementando a configuração para os absolute imports.

✅ Me acompanhe nas redes sociais:

https://twitter.com/vinicius_dacal
https://www.instagram.com/dacaldev
https://www.linkedin.com/in/viniciusdacal

✅ Pull request(faça o review): https://github.com/viniciusdacal/react-iniciante/pull/3
✅ Código Inicial: https://github.com/viniciusdacal/react-iniciante/tree/feature-4
✅ Código final: https://github.com/viniciusdacal/react-iniciante/tree/feature-5

✅Problemas de Segurança com target blank:
https://developers.google.com/web/tools/lighthouse/audits/noopener?hl=pt-br#why
File upload with Arduino and GSM
Tags: arduino, gsm, fileupload, sdcard
Published: 2020-04-28 14:55:45

> Have you ever tried uploading a file with the arduino and GSM from an SD card? I have started some work on it using Sim800l and I invite collaborators and advisers on how to perfect it and enable sending of larger data sets on my repo [here.](https://github.com/ashirafumiiro/Arduino-File-Upload "Git Repo")
> So far, the code can upload a file with some fewer lines and I have tested it with around 10 in a csv file.
ReactJS para INICIANTES #03 - Inicio do Projeto [CLONE do Gatry]
Tags: react, javascript, tutorial
Published: 2020-04-28 14:53:31

{% youtube dKtvxPmAyXs %}
Nesse vídeo nós damos início ao projeto que estaremos desenvolvendo ao longo da série. E desenvolvemos nosso primeiro componente, PromotionCard. Ao longo do vídeo nós aprendemos como podemos desenvolver um componente de forma isolada utilizando as props e como estilizar um componente utilizando CSS. Confere aí.
✅ Me acompanhe nas redes sociais:

https://twitter.com/vinicius_dacal
https://www.instagram.com/dacaldev
https://www.linkedin.com/in/viniciusd...

✅ Código Inicial: https://github.com/viniciusdacal/react-iniciante/tree/video-2
✅ Código final: https://github.com/viniciusdacal/react-iniciante/tree/feature-4

✅ Estrutura da Promotion: https://gist.github.com/viniciusdacal/e2a48b6d0c1b12f0ea68a768f5428207
ReactJS para INICIANTES #02 - Components, Props e State
Tags: react, javascript, tutorial
Published: 2020-04-28 14:50:58

{% youtube vXDoVQrmiBE %}
Nesse vídeo nós convertemos o componente App de classe para uma function utilizando react hooks e depois batemos um papo sobre três conceitos por trás do ReactJS: Components, props e state.

✅ Me acompanhe nas redes sociais:

https://twitter.com/vinicius_dacal
https://www.instagram.com/dacaldev
https://www.linkedin.com/in/viniciusdacal

✅ Código Inicial: https://github.com/viniciusdacal/react-iniciante/tree/video-1
✅ Código final: https://github.com/viniciusdacal/react-iniciante/tree/video-2
Have you ever felt to run away from programming?  
Tags: discuss, career, programming, productivity
Published: 2020-04-28 14:48:48

---
title: Have you ever felt to run away from programming?  
published: true
cover_image: https://imgbbb.com/images/2020/04/28/linh-nguyen-J8k-gzI0Zy0-unsplash.jpg
description: not feeling much interest in programming. What should be done? 
tags: discuss, career, programming, productivity
---
Hi Folks? 

I don't know if you have gone through this feeling. For a couple of weeks, I am not finding interest in programming or coding. I am just doing what should be done for the deadline at the last moment. I can't concentrate on.

Did you ever feel this kind of block? What have you done to get rid of it? 

Cover Photo by Linh Nguyen on Unsplash
ReactJS para iniciantes #01 - Começando um projeto do ZERO com create react app
Tags: react, javascript, tutorial
Published: 2020-04-28 14:48:45

{% youtube 4juIVSWo-pw %}

Iniciando uma série de vídeos para ensinar React do ZERO para vocês. Aprenda a criar um projeto em React utilizando create-react-app. Crie seu primeiro componente, aprenda o que é JSX e veja como mostrar e esconder uma imagem na tela.

✅ Me acompanhe nas redes sociais:

https://twitter.com/vinicius_dacal
https://www.instagram.com/dacaldev
https://www.linkedin.com/in/viniciusdacal


✅ Link para download do Node e NPM: https://nodejs.org/en/

✅ Post Renderização Condicional: https://www.viniciusdacal.com/blog/2018/02/12/renderizaco-condicional-em-react

✅ Link repositório: https://github.com/viniciusdacal/react-iniciante/tree/video-1/web
ReactJS para Iniciantes #06 - hooks | como implementar uma busca com useEffect hooks
Tags: react, javascript, html, jsx
Published: 2020-04-28 14:44:57

{% youtube IeH9qljCN3c %}

Nesse vídeo, nós aprendemos como utilizar o useEffect para implementar uma busca na nossa aplicação.

✅ Me acompanhe nas redes sociais:

https://twitter.com/vinicius_dacal
https://www.instagram.com/dacaldev
https://www.linkedin.com/in/viniciusdacal

✅ Pull Request:
https://github.com/viniciusdacal/react-iniciante/pull/5

✅ Código Inicial:
https://github.com/viniciusdacal/react-iniciante/tree/feature-1

✅ Código Final:
https://github.com/viniciusdacal/react-iniciante/tree/feature-6
How do big companies effectively store and serve video (over a CDN) - I don't get the math
Tags: help, discuss
Published: 2020-04-28 14:42:02

I am building a course hosting website - I want my users to be able to upload videos which their students will stream. This is how I plan to do it but I don't get the math behind this. I'm surely missing something.

 1. How do I store the video? - AFAIK rn I can use the cheapest object storage anything like S3, GCP etc. = **$0.005/GB** being the cheapest option.
 2. How do I serve those videos? AFAIK rn I can use a CDN that will cache the videos on the edge and serve it to the students = ~ **0.05/GB** being the cheapest option.

Now let's suppose a teacher uploads a 30 min 1080p video that 10000 students will watch.

Size of vid ~ 1.5GB 
Object storage cost = 0.0075

As 10k students will watch it - then data that will go through the CDN = 15000GB

At that 0.05/GB the CDN pricing will be - 15000GB x 0.05/GB = $750

This is unaffordable, obviously, for anyone hosting and serving the video. 

There is definitely something that I'm missing here (almost ready to feel dumb after this is solved). Or is this how much it actually costs?

UPDATE: [Cloudflare Stream](https://cloudflare.com/products/cloudflare-stream) seems to cut the price to $350 for our case. Still pretty expensive.
Why Firebase Authentication and Hosting?
Published: 2020-04-28 14:24:47

Even if you don’t like firebase for anything, you should love it for it authentication and hosting efficacy.
 
Authentication:
Firebase auth has a built in email/password authentication system. It also supports OAuth2 for Google, Facebook, Twitter and Github. Firebase’s OAuth2 system is well-documented and very easy to implement.
As a developer, if you’ve ever written an authentication system, you can agree with me that it is never an ordinary piece of cake, most especially for some of us who are still novice in the industry. Custom authentication is terrible, I will never write an auth system again for as long as I live (it’s a joke anyways). At a glance, I fell in love with Firebase Auth, and the flame of it beauty has never departed. In software development, sometimes it could get frustrating but with the odd experience of trying to write a custom auth system, you will definitely have to think twice.
Firebase Auth integrates directly into Firebase Database, so you can use it to control access to your data which is another great experience. 


Hosting:
Firebase includes an easy-to-use hosting service for all of your static files. It serves them from a global Content Delivery Network (CDN) with HTTP/2. To make your development particularly painless, Firebase hosting utilizes Superstatic, which you can run locally for all of your testing.
Superstatic is an enhanced static web server that was built to power. It has support for html5 pushState applications, clean URLs, caching and many more. Superstatic should be installed globally using npm.
For use via CLI: $ npm install –g superstatic
For use via API:  npm install superstatic --save
Android Game went all wrong
Tags: Beta, android, gamedev
Published: 2020-04-28 14:21:32

So I published my first Android Game for beta testing and it just went terrible. I've tried fixing it and feel I might be getting closer but it's still very up in the air mostly due to trying to get the file to be as small as possible since the ue4 obb is huge at 716mb so I'm trying to reduce it further below the Google Play 100mb limit..
How to Convert date format to PHP with MYSQLI, using secure queries to avoid SQL injection
Tags: php, mysqli, injection, sql
Published: 2020-04-28 14:19:54



There are cases in which we need to send a date format in Spanish to a sql query, for example the format of (Abril 28 2020) and for this we must do the following:

$ query = mysqli_query ($ conn, "SET lc_time_names = 'es_ES';");

$ query = $ conn-> prepare ('SELECT id, DATE_FORMAT (date, "% M% d% Y") ,, text FROM table WHERE id =?');

Keep in mind that these queries are what we should do in our developments to avoid sql injection.
Adding a PWA in Nuxt.js
Tags: nuxt, vue
Published: 2020-04-28 14:11:06

---
canonical_url: 'https://debbie.codes/blog/nuxt-adding-pwa'
---
Most people don't realise how easy it really is to add a PWA with Nuxt.js. Progressive Web Apps (PWA) deliver native-like capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase. You can turn your website into a PWA which will give you the benefits of better offline support as well as that app like look and feel. Just save it to the home screen and open it from there and you will see how amazing it is. 

The Nuxt.js PWA module registers a service worker for you to deal with offline caching.
* It automatically generates a manifest.json file
* It automatically adds SEO friendly meta data with manifest integration
* It automatically generates app icons with different sizes
* And you can even set up free push notifications using OneSignal

Ok so there is a lot of automatic stuff so what do you need to do exactly?

1) Install the npm package
```bash
yarn add @nuxtjs/pwa 
or
npm i @nuxtjs/pwa
```

2) Add the module to your nuxt.config.js file
```javascript
{
    modules: [
        '@nuxtjs/pwa',
    ]
}
``` 

3) Add an icon.png file to your `static` directory. It should be square and be at least 512px x 512px.

4) In your .gitignore file make sure you ignore the service worker file.
```markdown
sw.*
```

And that's it you now have a PWA up and running. 

You can also further customise the PWA by modifying the title and author or name for example. The module by default adds the `package.json` name and author but you can modify this by creating a `pwa` key in your `nuxt.config.js` file and modifying the `meta` or `manifest` properties. 
```javascript
pwa: {
  meta: {
    title: 'My PWA',
    author: 'Me',
  },
  manifest: {
    name: 'Nuxt.js PWAs are so easy',
    short_name: 'Nuxt.js PWA',
    lang: 'en',
  },
}
```

For a full list of meta options for your pwa see [the Nuxt PWA docs](https://pwa.nuxtjs.org/modules/meta.html#mobileappios)
April 28 — Daily CodeNewbie Check-in Thread
Tags: codenewbie, checkin, beginners, discuss
Published: 2020-04-28 14:02:15

---
title: April 28 — Daily CodeNewbie Check-in Thread
published: true
description: A daily thread to ask questions, share progress, and stay accountable!
tags: codenewbie, checkin, beginners, discuss
series: Daily Checkin
---

You are encouraged to use this daily thread to:
- Ask for help (all questions encouraged)
- Explore topics you’re curious about
- Share something you’ve written or read
- Celebrate your wins
- Stay accountable to your goals
- Support your fellow programmers

Happy Coding!

---

_Interested in joining the twice-weekly live [#CodeNewbie Twitter chats](https://twitter.com/search?q=codenewbie)?  You can find us [on Twitter](https://twitter.com/search?q=codenewbie) each Wednesday at 9pm ET (1am GMT on Thursday) and Sunday at 2pm ET (6pm GMT)!_
Launching GitBetter - Level up your game in Git
Tags: git, showdev, tutorial, beginners
Published: 2020-04-28 13:56:31

---
title: Launching GitBetter - Level up your game in Git
published: true
description: Level up your game in Git. Tricks and advanced topics of Git delivered right in your inbox
tags: git, showdev, tutorial, beginners
---
Hey Devs

Super excited to launch [GitBetter](https://gitbetter.substack.com) newsletter. GitBetter is a newsletter that helps you to level up your game in Git.

I will be covering the tricks and tips of Git that you can start using in your workflow right away. And also will be covering some advanced topics of Git that help you to handle Git in a professional way.

Some of the topics that I have planned for the future are (not in any particular order) 
1. Git branching
2. Rebasing
3. Trunk-based vs Branch-based development
4. Git hooks
5. Some internals of Git - Objects, Tree, blob
6. Git stash - how to use it effectively and some useful tricks
7. Git GUIs you should know
8. How to have a clearer Git history.
9. How to write a better and consistent commit message.
10. Adopting a clearer Git workflow across team members.
11. Git tags

Apart from these topics, I will also share some tips in handling frequent and hard problems you face in Git.

So if you are interested in Git, don't forget to subscribe :)
New Vim Hack
Tags: vim, linux
Published: 2020-04-28 13:55:00

Previously I am using [spf13](https://github.com/spf13/spf13-vim) for my vim configuration. However it is a bit sluggish for me since it includes too much settings and plugins which might not be needed for my daily usage, therefore I deicide to move to this [vimrc](https://github.com/amix/vimrc).

New plugins installed manually such as vim-rails, vim-autoformat, YouCompleteMe, tagbar, vim-ctrlp-tjump etc.

Ctags is also needed for go to definition.


I remove/comment out the line to have deafault key mapping for multiple selection in plugins_config.vim 

    let g:multi_cursor_next_key="\<C-s>"


Here is how it looks for my_configs.vim

{% gist https://gist.github.com/chuanjin/f302b7c4d852f13bdaaaaea366b3dbac %}


Final look:

![](https://www.chuanjin.me//images/new_vim.png)
I built Remoteclerk - a video consultation app for retailers
Tags: twiliohackathon, vue, node
Published: 2020-04-28 13:48:23

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project.)

[Reminder]: # (Make sure you've submitted the Twilio CodeExchange agreement: https://ahoy.twilio.com/code-exchange-community)

[Important]: # (By making a submission, you agree to the competition's terms: https://www.twilio.com/legal/twilio-dev-hackathon-terms)

Covid-19 is going to push the retail marketplace faster than it has been moving toward a more remote experience. Stores and showrooms are closed but online shops are still open. However, product categories like furniture or sports gear usually require consultation by an experienced shop-employee before the purchase.
That's why I built a video consultation software for retailers:

Benefits:
• Outside opening hours - Offer your expertise to the people at home even if your store is already closed
• Offer expertise at home - Offer additional information about the material or functionality of a product. The customer gets the same experience as he would get it in the real shop.
• Up-/Crosselling - Suggest additional, complementary or higher-end products to your customer.
• No App installation - No app installation needed - everything is web-based. Works on smartphonse, tablet and desktop.
• No Sign-Up required - The user does not need to sign-up and stays anonymous.
• Easy to integrate - Easy to integrate widget for every online-shop.
It's way easier to handle video calls with a fully integrated solution like this than it would be with Whatsapp, Zoom or other proprietary solutions.



#### Category Submission: 
Engaging Engagements

## Demo Link
https://www.theremoteclerk.com/
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0u1m60je65oi12rmq1vu.png)

## Link to Code
https://github.com/AdrianKrebs/remoteclerk

## How I built it (what's the stack? did I run into issues or discover something new along the way?)
I used Vue.js as a frontend framework and Node.js on the server. Going through the Twilio API docs was interesting but not always easy.


## Additional Resources/Info
I'm currently reaching out to retailers who would be interested in beta-testing the app.
Transfer file over TCP/UDP
Tags: tcp, udp, python
Published: 2020-04-28 13:44:18


This is a small lab I have done to see how easy to use python to transfer file over TCP and UDP. File formats including plain text, MS word, pdf, image and vedio.


{% gist https://gist.github.com/chuanjin/b42d5be6725d99deb33ce778256ba931 %}

{% gist https://gist.github.com/chuanjin/46917092b77912ceef953a9890650456 %}

{% gist https://gist.github.com/chuanjin/f2419d0dd76159c6a8e39daf15dff6f3 %}

{% gist https://gist.github.com/chuanjin/cf5168173d22f9174c3c2bbdf496cb84 %}
Python + Pulumi - Creating an Azure Kubernetes Service Cluster
Tags: kubernetes, python, devops
Published: 2020-04-28 13:43:48

Hi Everyone!

I wanted to share a YouTube video I made on creating an AKS cluster with Python and Pulumi. Pulumi seems to be a pretty popular topic lately for taking the programming language you're comfortable with and turning it into Infrastructure-as-Code... like BYOL (Bring-Your-Own-Language) :) I hope this video helps!

[![Python3 and Pulumi](https://i.imgur.com/i94KS6t.jpg)](https://www.youtube.com/watch?v=oq5pNECRzdg)
Flipping UNO cards using only CSS
Tags: css, 100daysofcode, html, codepen
Published: 2020-04-28 13:40:19

Today, when I opened twitter, I was greeted with this beautiful cards animation by **Ellie**. Here it is:

{% twitter 1254806844373184513 %}

I thought it was a really cool idea. So I set out to create something similar. Soon enough, I got an idea to implement the same for UNO cards as we are playing more and more of UNO during this lockdown period. 

It was quite an interesting process to build the Illustration from scratch. Learned about:
- **preserve-3d** transform style
- **linear-gradient** text color using *-webkit-linear-gradient*
- Using the **before** and **after** pseudo selectors
- The **flip-on-hover** custom implementation.

Here is the codepen for the finished product:
{% codepen https://codepen.io/kokanek/pen/YzyVmEe %}

Hope you are utilizing your free time too by building cool stuff!
Cheers!
I created a step-by-step tutorial demonstrating how to integrate React with Rails
Tags: webdev, react, rails
Published: 2020-04-28 13:32:16

- [Live Demo](https://rails-react-example.herokuapp.com/)
- [Tutorial](https://stevepolito.design/blog/rails-react-tutorial/)

I really wanted to learn React and API development, so I went head first into building a simple application, and documented my experience. I think what sets this apart from other Rails and React tutorials is that I cover...

- API authorization
- API versioning
- Setting HTTP status codes
- Form validation on the front-end
- Handling errors
- Debouncing requests
- CSRF Countermeasures

---

[Follow me on Twitter](https://twitter.com/stevepolitodsgn)
MQTT security
Tags: mqtt, mosquitto, security
Published: 2020-04-28 13:18:13

We have covered the [MQTT Basics](https://www.chuanjin.me/2015/03/19/MQTT/) and [MQTT with websockets support](https://www.chuanjin.me/2015/12/07/mqtt-with-websockets/), now we talk about security.

{% gist https://gist.github.com/chuanjin/070cfc4e253d6d77ba297d4cdfab0ebc %}
Its always a good idea to keep your project simple and under scope.
Tags: twiliohackathon, mexico
Published: 2020-04-28 13:18:04

Yesterday i hit the wall at 100MPH, the wall of complexity and frustration. The worst part is that is all my fault. I more or less narrow my faults in the following points.

- Started my project 2 days ago.
- Over scope my project (take a look at my first post detailing the project structure)
- Spent a ton of time creating the web portal components

Thankfully is see the light at the end of the tunnel. Today i will start working on connecting the front end and back end (DB + server-less functions + Twilio ) Tomorrow, hopefully i will have time to complete the security and connect the remaining services.
Custom mail address
Tags: discuss, watercooler, email
Published: 2020-04-28 13:08:20

Most devs have 1 or more domains for their own blog/portfolio or some side-projects that never gets finished 😉.
A year ago I asked on DEV what kind of mail solutions people are using for their custom domains.

{%link https://dev.to/glennmen/how-to-setup-a-mailbox-with-custom-domains-4oj4 %}

Most answers that I received where focussed around self-hosted mail solutions.
I did setup a [mail-in-a-box](https://mailinabox.email/) instance and learned a lot about mail spam filters and SPF/DKIM/DMARC DNS records.

This time I would like to discuss specifically what 3rd party mail solutions you use and why. For personal use and/or projects.

- GSuite 
- Zoho
- Or maybe something else

Let me know in the comments.
On.NET Episode: Home automation with Hubitat and .NET Core
Tags: dotnet, iot, azure, homeautomation
Published: 2020-04-28 13:00:53

Who doesn’t love a good DIY (Do It Yourself) IoT project? There are so many interesting things that we can do with a few components and a little creatively.

In this episode, Cam Soper comes on to show us how he automated his home with .NET Core, Hubitat, and Azure with his open source project called Puppet.

{% youtube FyVmAxuc32M %}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [.NET Developers YouTube Channel](https://www.youtube.com/channel/UCvtT19MZW8dq5Wwfu6B0oxw).


## Useful Links
<ul><li><a href="https://github.com/CamSoper/puppet" target="_blank">Puppet - A .NET Core framework for automating Hubitat Elevation</a></li>
<li><a href="https://dev.botframework.com?WT.mc_id=ondotnet-devto-cephilli" target="_blank">Bot Framework</a></li>
<li><a href="https://docs.microsoft.com/en-us/dotnet/core?WT.mc_id=ondotnet-devto-cephilli" target="_blank">.NET Core Guide&nbsp;</a></li></ul>
Understanding Kubernetes: part 14 – Persistent Volume, Persistent Volume Claim an Storage Class
Tags: kubernetes, devops, docker, beginners
Published: 2020-04-28 12:55:18

---
title: Understanding Kubernetes: part 14 – Persistent Volume, Persistent Volume Claim an Storage Class
published: true
description: Serie of sketchnotes about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/pt628tl2mgx1raeyb483.jpg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes. I think it could be a good way, more visual, to explain Kubernetes (and others technologies).

We continue the serie of Sketchnotes about Kubernetes, we will talk about Persistent Volume, Persistent Volume Claim and Storage Class.

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

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 120 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).