teleren/devto huggingface dataset:
Crowtail NodeMCU IOT Kit for Christmas
Tags: crowtail, nodemcu, esp8266, elecrow
Published: 2020-12-28 15:27:43

---
title: Crowtail NodeMCU IOT Kit for Christmas
published: true
description: A running list of how to get the IOT kit working
tags: crowtail, nodemcu, esp8266, elecrow
cover_image: https://www.elecrow.com/pub/media/catalog/product/cache/f8158826193ba5faa8b862a9bd1eb9e9/e/s/esp8266_nodemcu_iot_kit_0.jpg
---

The big kid got an IOT kit for Christmas.  He's obsessed with electronics so we thought this would be a fun experiment.  So far it's proven to be a bit tricky.  I'm going to document our progress here since I haven't found a great resource yet to help us.

1. Out of the box it seems like either we're missing some parts (based on photos I've found) or we have some updated version of the kit.  The first lesson is an LED but we don't have the basic LED module that is displayed in the manual.
2. There wasn't a [manual](http://www.elecrow.com/download/ESP8266%20NodeMCU%20kit.pdf) with the kit so I had to dig around on the [product page](https://www.elecrow.com/esp8266-nodemcu-iot-kit.html) to find one and print out.  It appears to be loosely translated from another language into English.
3. We downloaded the [LUALoader app](http://benlo.com/esp8266/) and installed that on a very inexpensive Windows laptop that the kids use.  After fighting a bit with the first step in the manual of connecting to a port I was finally able to get it working by changing to an Admin user on the computer and rebooting.  I'm not certain how to know which COM port to use but when I rebooted a COM3 showed up (previously only COM2 and COM4 appeared) so when I picked that it connected.
4. So far we haven't gotten the LED that we did have in the kit to light up as indicated in the first lesson.  Now looking at the photo of the product from the [Elecrow website](https://www.elecrow.com/esp8266-nodemcu-iot-kit.html), it doesn't show the yellow LED I tried, so maybe I will try the red or green and see if that makes a difference.  

Stay tuned. :)
Image Live Preview app with React.js
Tags: react, javascript, webdev, tutorial
Published: 2020-12-28 15:25:23

In the beginning, the web was only text. And it was somehow boring. It didn't take too long for the introduction of images (one of the best types of content) on the web. Today we are not going to talk about how to upload images. We are going to look at how to **preview an image** on the frontend before uploading it to the server. *Hope you don't get bored.*

I'm using [React js](https://reactjs.org) in this article.

###Let's get started: 

Firstly create a react js project by using **create-react-app** or another approach you want.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/akpc6lfxg6bdc77i215k.JPG)

Edit `App.js` and insert this code.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3f3nlrc4c69e21076o29.jpg)
The result will be:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f91are298hro416nh5tm.JPG)

Update `handleFile` function with these codes:
```javascript
let tempFile = e.target.files[0];
const reader = new FileReader();
reader.addEventListener(
"load",
function () {
  setfile(reader.result);
},false);

if (tempFile) {
   reader.readAsDataURL(tempFile);
}
```

I added a few CSS in `App.css`
```css
form {
  width: 60%;
  margin: 5rem auto;
}

form div.output {
  border: 1px solid rgb(218, 213, 213);
  margin-top: 20px;
  padding: 10px;
  max-width: 50%;
}

.output img {
  max-width: 100%;
}
```
Finally, our app has a new look.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2kpa0dbayf067czen8rl.JPG)

Thanks for reading this article until this line. If you want the code of the app, find it [here](https://github.com/oreste-abizera/image-live-preview). You can also test it [here](https://image-live-preview.netlify.app/). To read more about **FileReader** visit this [site]
(https://developer.mozilla.org/en-US/docs/Web/API/FileReader).

You can find me anytime on [Twitter](https://twitter.com/AbizeraOreste) and [Instagram](https://www.instagram.com/coder__tauras). Have a nice day😍😍
[PT-BR] Ciclo PDCA
Tags: pdca
Published: 2020-12-28 15:01:34

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

Uma das diversas formas de testar algo novo ou resolução de um problema é o ciclo **PDCA**.

As siglas vem de Plan-Do-Check-Act (planejar, executar, checar/analisar e agir/ajustar).

O criador dessa técnica foi Walter Andrew Shewhart na década de 20, mas somente ficou popular na década de 50, através do estatístico e guru do gerenciamento da qualidade William Edward Deming.

#Como funciona?

Plan - analisar o problema ou o que será testado e planejar tarefas, ações, determinar prazos, resultados esperados. 

Do - executar o que foi planejado.

Check - checar, analisar o resultado obtido na execução e comparar com é esperado.

Act - baseado no resultado das etapas anteriores, "do" e "check", uma ação deve ser tomada. Seja refazer o ciclo, ajustando o que for necessário ou determinar que o processo foi concluído com sucesso.

#Exemplo:

Um confeiteiro quer comercializar uma nova massa de bolo, mas possuí diversas opções. 

Então precisa testar a que acredita ser a melhor.

**P** - produzir 20 unidades de uma massa e dar para alguns clientes experimentar e obter o feedback através de um formulário. Quando aprovado enviar para mais 20 e só depois colocar em linha de produção.

**D** - fazer as massas e distribuir.

**C** - solicitar o preenchimento e analisar o resultado.

**A** - alguns clientes relataram, através do formulário, que a massa não estava macia o suficiente. Então o confeiteiro deve refazer a massa com esses ajustes e fazer um novo ciclo.
How to do you store items with unique id ?
Tags: javascript, question, help, typescript
Published: 2020-12-28 14:52:33

Let's imagine we want a list of object that contains an unique id for each item.

Which format/way of storing data is the best in the long term ? (data1 or data2)

```typescript
type itemType = {
	name: string;
	age: number;
};

const data1: Record<number, itemType> = {
	1: {
		name: 'foo',
		age: 14,
	},
	2: {
		name: 'fee',
		age: 16,
	},
};

// --- OR ---

const data2: (itemType & { id: number })[] = [
	{
		id: 0,
		name: 'foo',
		age: 14,
	},
	{
		id: 1,
		name: 'fee',
		age: 16,
	},
];
```
Celebrating small wins
Published: 2020-12-28 14:43:22

Everybody wants big wins, thinking about being lauded by the family, friends, and society. But how often we had those big wins? While we are running towards the big wins, we missed the small wins that happen during the process. 

Every big win is compounded by small wins. If we haven't thought of a way to celebrate, we should rethink our process. Because falling in love with the process is all we need. Big wins are rare. End we are chasing towards, may be successful or not. Take a look back and amplify the wins you had earlier and enjoy the journey. Celebrating little wins also rethinks the way we define our process. 


### Fall in love with the process
I still remember the time, I can't focus on much spending time for my #100daysofcode challenge in the initial days. I would do a project one day, then the next day, I would take a break. At first, I used to feel the moment when I completed the 100 days. But I realized this alone won't be enough to push me further each day. Between, it is so long.

A moment that changes me is the time I posted a  [daily challenge](https://twitter.com/code_rams/status/1278756336084246528?s=20) on Twitter. I got more support from the Twitter community for the work. It made me start working on this challenge again. Every day, in the end, I make sure to post the progress on Twitter. For myself, the reward I set for myself is this. This reward feedback loop pushes me each day to love the process of learning and building cool things. It might be a small win to feel satisfied with, but it's what drives us to be consistent. 


You can better make use of celebrating these little wins by defining your reward prior, how you will celebrate at the end of the day, and plan your daily task to that moment. Don't worry. Reward you use to celebrate those little wins might be smaller for others. It is your journey. Learn to fall in love with each moment.

### Action Points
1. Create your reward for your big win right now.
2. Every time you win, take some time to enjoy the moment 🎉. Just feel it.

### Best moment
Between those small wins, I felt I have to secure the best wins from what I do. These drove me to an idea to record the best moment for a day's goal. The more I keep closing the difference between the most recent best moment, I feel better I am on the right track. 


![Frame 1 (6).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608610958149/8_UXfd0IO.png)


### Thought for the day

![Set out to conquer the ocean. (8).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608613078456/TxJ8v05_b.png)

---
This article is written by [Rams](https://twitter.com/code_rams) and co-authored by [Karthikeyan](https://twitter.com/_karthikyn). 

> This article was written as part of day 05 of the [#14daysbreakloop](https://100daysof.codes/the-14daysbreakloop-challenge) challenge. This article was originally published in [blog.100daysof.codes](https://blog.100daysof.codes). Install the extension from [Chrome Web Store](https://chrome.google.com/webstore/detail/100daysofcodes/cecmfhlijbbeeeobbgnoaajmhckdganc)
How to Get the Last Inserted Id Using Laravel Eloquent?

Published: 2020-12-28 14:40:11

Check out this post on the [devdojo.com](https://devdojo.com/) website!

It is a post on [How to Get the Last Inserted Id Using Laravel Eloquent?](https://devdojo.com/bobbyiliev/how-to-get-the-last-inserted-id-using-laravel-eloquent) 🔥!

To make things even better you can use this referral link to get a free $100 credit that you could use to deploy your virtual machines and test the guide yourself on a few DigitalOcean servers:

[Digital Ocean $100 Free Credit](https://m.do.co/c/2a9bba940f39)

Link to the post:

https://devdojo.com/bobbyiliev/how-to-get-the-last-inserted-id-using-laravel-eloquent

I strongly encourage everyone to go ahead and check out the [devdojo.com](https://devdojo.com/) website, there's a lot of valuable content there.
Angular 11 Pagination example
Tags: angular, javascript, webdev, typescript
Published: 2020-12-28 14:38:14

In this tutorial, I will show you how to make Angular 11 Pagination example with existing API (server-side pagination) using ngx-pagination.

Full Article: [https://bezkoder.com/angular-11-pagination-ngx/](https://bezkoder.com/angular-11-pagination-ngx/)

## Overview of Angular 11 Pagination example
One of the most important things to make a website friendly is the response time, and pagination comes for this reason. For example, this bezkoder.com website has hundreds of tutorials, and we don’t want to see all of them at once. Paging means displaying a small number of all, by a page.

Assume that we have tutorials table in database like this:

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

Our Angular 11 app will display the result with pagination:

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

You can change to a page with larger index:

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

Or change quantity of items per page:

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

Or paging with filter:

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

The API for this Angular client can be found at one of following posts:
- [Node.js Express Pagination with MySQL](https://bezkoder.com/node-js-sequelize-pagination-mysql/)
- [Node.js Express Pagination with PostgreSQL](https://bezkoder.com/node-js-pagination-postgresql/)
- [Node.js Express Pagination with MongoDB](https://bezkoder.com/node-js-mongodb-pagination/)
- [Spring Boot Pagination & Filter example | Spring JPA, Pageable](https://bezkoder.com/spring-boot-pagination-filter-jpa-pageable/) - [Spring Boot MongoDB Pagination example with Spring Data](https://bezkoder.com/spring-boot-mongodb-pagination/)

These Servers will exports API for pagination (with/without filter), here are some url samples:

*   `/api/tutorials?page=1&size=5`
*   `/api/tutorials?size=5`: using default value for page
*   `/api/tutorials?page=1`: using default value for size
*   `/api/tutorials?title=data&page=1&size=3`: pagination & filter by title containing 'data'

This is structure of the response (server-side pagination) for the HTTP GET request:
```js
 {
    "totalItems": 8,
    "tutorials": [...],
    "totalPages": 3,
    "currentPage": 1
}
```

This is a kind of server-side paging, where the server sends just a single page at a time. `ngx-pagination` supports this scenario, so We actually only need to use `tutorials` and `totalItems` when working with this library.

## Technology

*   Angular 11
*   RxJS 6
*   ngx-pagination 5

For more details, implementation and Github, please visit:
[https://bezkoder.com/angular-11-pagination-ngx/](https://bezkoder.com/angular-11-pagination-ngx/)
I Changed My Mind After 2nd Try Tailwind CSS
Tags: css, react, javascript, webdev
Published: 2020-12-28 14:30:48

> TL;DR: Tailwind won't help you write CSS faster or easier, it helps you think less.

Because I wanted to give [my plain HTML website] a little style, I gave Tailwind CSS a shot yesterday. I spent about an hour to read through its documentation and try it on [its playground][tailwind play]. The first impression was _"meh"_. Tailwind is essentially a set of CSS classes mapping to a few CSS properties, so, in order to use Tailwind, you basically have to kinda learn CSS again, which I believe very few developers enjoy. Tailwind's creators actually knew that and put a very interesting note:

> Now I know what you're thinking, "this is an atrocity, what a horrible mess!" and you're right, it's kind of ugly. In fact it's just about impossible to think this is a good idea the first time you see it — you have to actually try it.
>
> -   [Tailwind's documentation](https://tailwindcss.com/docs/utility-first).

I gave it a try, but less than an hour was probably not enough for me to shift my mind from typical CSS properties to Tailwind classes. So, I didn't like it.

## Use typcial CSS

Because I didn't like Tailwind, today I decided to style my website using Sass while **keeping an eye on what better and worse compared to yesterday experience**. And, it took me almost 3 hours to finish simple styles and the experience wasn't fun either.

##### So, what's wrong? 😠

I spent **more than half of the time to think of which CSS properties should be grouped, which selectors I should do, what the class names should be**. Although I consciously tried to avoid that, it still consumed a lot of my energy. I couldn't really explain why, the biggest reason is probably because we always have so many options with CSS and they keep growing over time.

## Switch back to Tailwind again

So, I switched back to Tailwind again, not that I was convinced that Tailwind will work better, but to see again if Tailwind could solve the problems I mentioned above.

And... yeah... it actually solved the problems:

-   Tailwind comes with a very complete set of utilities, I've never had to think of grouping styles together. Almost every element can be styled with just Tailwind classes.

-   I styled directly at element-level, in HTML, so I've rarely had to think of CSS selectors.

-   Because I've never had to write CSS utilities myself, there wasn't any CSS "codebase" growing. Most importantly, I had nothing about CSS to **keep in my mind**. Now I knew it! When you write CSS, I believe "remembering its existence" consumes a lot of energy!

## Conclusion

I had to say it was oddly interesting. Tailwind appears to be a _"CSS framework"_, so my expectation was _"I'll be able to write CSS faster and easier"_, but when looking at its documentation, it doesn't look faster and easier at all. It turned out, the problem Tailwind solved is somewhat a physiological problem when working with CSS.

So, give it try if you've ever skeptical!

<!-- Links -->

[my plain html website]: https://phuctm97.com/blog/hello-world-start-blog-in-html

[tailwind play]: https://play.tailwindcss.com
Generate Swagger spec from persistent and serial classes in InterSystems IRIS
Published: 2020-12-28 14:21:03

Recently I needed to generate a Swagger spec from persistent and serial classes, so I'm publishing my code (it's not complete - you still need to hash out the application specifics, but it's a start). It's available [here](https://github.com/eduard93/Utils/blob/master/Utils/YAML.cls.xml).

Let's say you have these classes:
```
Class REST.Test.Person Extends %Persistent
{

/// Person's name.
Property Name As %String [ Required ];

/// Person's Social Security number. This is validated using pattern match.
Property SSN As %String [ Required ];

/// Person's Date of Birth.
Property DOB As %Date;

/// Person's home address. This uses an embedded object.
Property Home As Address;

/// Person's office address. This uses an embedded object.
Property Office As Address;

/// Person's spouse. This is a reference to another persistent object.
Property Spouse As Person;

/// A collection of strings representing the person's favorite colors.
Property FavoriteColors As list Of %String;

/// A collection of strings representing the person's favorite colors.
Property FavoriteNumbers As array Of %Integer;

/// Person's age.<br>
/// This is a calculated field whose value is derived from <property>DOB</property>.
Property Age As %Integer;

}

Class REST.Test.Address Extends %SerialObject
{

/// The street address.
Property Street As %String(MAXLEN = 80);

/// The city name.
Property City As %String(MAXLEN = 80);

/// The 2-letter state abbreviation.
Property State As %String(MAXLEN = 2);

/// The 5-digit U.S. Zone Improvement Plan (ZIP) code.
Property Zip As %String(MAXLEN = 5);
}
```
You can automatically generate this Swagger definition from them:

```yaml
 REST.Test.Person:
   type: "object"
   properties:
     Age:
       type: "integer"
     DOB:
       type: "string"
     FavoriteColors:
       type: "array"
       items:
         type: "string"
     FavoriteNumbers:
       type: "object"
     Home:
       $ref: "#/definitions/REST.Test.Address"
     Name:
       type: "string"
     Office:
       $ref: "#/definitions/REST.Test.Address"
     SSN:
       type: "string"
     Spouse:
       $ref: "#/definitions/REST.Test.Person"
 REST.Test.Address:
   type: "object"
   properties:
     City:
       type: "string"
     State:
       type: "string"
     Street:
       type: "string"
     Zip:
       type: "string"
```
Main method: `Utils.YAML:GenerateClasses`

Test run: `do ##class(Utils.YAML).Test()`
12 Must Have Browser Extensions for Developers

Published: 2020-12-28 14:29:52

Check out this post on the [devdojo.com](https://devdojo.com/) website!

It is a post on [12 Must Have Browser Extensions for Developers](https://devdojo.com/bobbyiliev/12-must-have-browser-extensions-for-developers) 🔥!

To make things even better you can use this referral link to get a free $100 credit that you could use to deploy your virtual machines and test the guide yourself on a few DigitalOcean servers:

[Digital Ocean $100 Free Credit](https://m.do.co/c/2a9bba940f39)

Link to the post:

https://devdojo.com/bobbyiliev/12-must-have-browser-extensions-for-developers

I strongly encourage everyone to go ahead and check out the [devdojo.com](https://devdojo.com/) website, there's a lot of valuable content there.
Let's Discuss 💳 Stripe's Docs & APIs: Day 1 of Docs
Tags: discuss, documentation
Published: 2020-12-28 14:27:11

## 👉🏼 Do you have opinions on tech docs?

Let's talk! In the next weeks, I'll be sharing several doc sites. I want to hear what you do/don't love about each one. My new role as a Developer Educator involves improving my team's docs, evaluating what updates are most needed.

Ready?

### Day 1 —  Stripe's Docs & APIs 💳

Do you like the UI? Does the Information Architecture make sense? What about their code snippets?

What is one thing you would change about Stripe docs?

📑 https://stripe.com/docs/api 
📑 https://stripe.com/docs

🙏🏾 Like for reach and/or comment below 🙏🏾
How I got a job as a developer at 16
Tags: webdev, firstyearincode, codenewbie, motivation
Published: 2020-12-28 14:16:19

In this article, I want to talk about how I got my first job as a web developer at 16 having 0 experience.


### Introduction

I started coding at 15 in Python and then after a few months, I switched to web development. I learned HTML and CSS from Freecodecamp where I also built a few front-end projects.

I understood media query in CSS and I was able to build responsive websites using them (this helped me get the job).


### Where I found the job

I was really active on Reddit and one day I found a subreddit with developers from my country. I made a post where I told everyone what I was doing and that I was looking to work on some projects during the summer.

I thought that no one will see my post but I was wrong. A guy who had a start-up saw the post and asked me if I want to make their website responsive because he really liked the websites I built in the past.


### How I got the job

We had a phone call and we talked about things related to the job. After that, he gave me two simple tasks that I solved using media query.

He really liked my work so I got hired for 3 months.


### What I did next

In the first 2 months, I made all their website responsive and changed the design of a few features.

After that, I talked with the senior developer from that start-up and I told him that I can do some Javascript tasks too so he gave me some simple ones.


### Now, how can you get a job too

Based on my past experience I can only recommend you to find some online communities with developers from your country and tell them what are you working on and that you are looking for a job.

You never know who sees the post you make and you might get a job as I did.


### What's next?

Now that I no longer have a job I'll focus more on learning Javascript and building more front-end projects, you can  [follow me on Twitter](https://twitter.com/VladPasca5) as I continue to document my journey there.
📚 The Complete Guide to Node.js User Authentication with Auth0 🔐
Tags: authentication, node
Published: 2020-12-28 14:12:46

📖 Learn how to add user authentication to Node.js web apps built with Express using middleware
[Read more...](https://auth0.com/blog/complete-guide-to-nodejs-express-user-authentication/?utm_source=content_synd&utm_medium=sc&utm_campaign=node_auth)