teleren/devto huggingface dataset:
[Dev Note] ฝึกตั้งคำถามกับตัวเอง #1
Published: 2020-07-11 15:03:09

ทำไมถึงต้องมี React ?
-  เมื่อก่อนเราเขียนเว็บธรรมดา ก็แค่แปะ Tag html ไป ถ้าเราจัดการ Structure (โครงสร้าง) ไม่ดี ก็จะทำให้ปวดหัวในการ Maintain ซ่อมแซมหรือปรับแต่ง 
-  ซึ่งเจ้าตัว React มันก็เข้ามาช่วยด้วยการใช้ Concept Component base คือการมองส่วนต่างๆในเว็บที่เกี่ยวข้องกันเป็น ก้อน Component ที่สามารถ Reuse ได้
แล้วมันต่างจากการเขียนธรรมดายังไง

แล้วมันต่างกับการเขียนแบบธรรมดายังไง
- เขียนธรรมดาก็แปะแท็ก สร้างไฟล์ เอาไฟล์ส่งไป ที่ Server เวลาจะเรียกใช้ก็เรียกจาก Client ตัว Client จะส่งไปหา Server เพื่อประมวลผลละส่งผลลัพธ์กลับมาให้ [Traditional]
- แต่ถ้าเขียน React ที่เป็น Javascript คือ มัน Render รอบแรก แล้วจบ ที่เหลือคือมันทำงานเบื้องหลัง เป็น Async คือติดต่อกับ Server เบื้องหลังและ ส่งมา Render ส่วนที่เปลี่ยนแปลงอย่างเดียว มันจึงเร็วเพราะมันประมวลผลที่เครื่องผู้ใช้ ไม่ได้ติดต่อกับ Server [ปัจจุบัน]
App deployed on Play Store! Accepting PRs now 👨🏾‍💻
Tags: react, reactnative, android
Published: 2020-07-11 14:59:40

Hey Folks! 🙌🏾

How are you all doing?

A few weeks back, I wrote this article in which I was planning to develop an app that would rate your days in terms of stars depending on how many tasks you got done that day. 

{% link https://dev.to/comscience/if-a-todo-app-rated-your-day-would-you-use-it-2hbe %}

I'm pleased to announce that the app is live and you can try it out from this link [Good day - Bad day](https://play.google.com/store/apps/details?id=com.studios.simplyaddictive)

Do give it a try and let me know what you feel 😁

Here is the [source code](https://github.com/kokanek/good-day-bad-day) for the app if you are interested in checking it out, **suggesting changes**, **submitting PRs**. It would be a great way to start your journey into open source development.


### Issues
Here are a few issues that I know exist on the app currently:

- The tasks on the main page do not refresh sometimes.
- After adding the tasks from the previous day to the current day and coming back to the current day, the task still does not show up until the 'refresh' button is clicked. 

Cheers!
Daily Challenge #268 - Swapping Characters in Strings
Tags: challenge
Published: 2020-07-11 14:49:36

---
title: Daily Challenge #268 - Swapping Characters in Strings
published: true
series: Daily Challenge
description: Swap adjacent characters of s until it is equal to t.
tags: challenge
//cover_image: https://direct_url_to_image.jpg
---
You are given two strings `s` and `t`. Both strings have length `n` and consist of lowercase letters.

You can swap any two adjacent characters of `s` any number of times. 
Output the minimum number of moves to transform s to t. If it is impossible to obtain the string `t` using moves, return -1.

###Examples
('abcdef', 'abdfec') => 4
('abcd', 'accd') => -1
('ab', 'ab') => 0
('ab', 'ba') => 1
('aaa', 'aaa') => 0

###Tests
{s:'abcdef', t:'abdfec'}
{s:'abcd', t:'accd'}  
{s:'ab', t:'ab'}
{s:'ab', t:'ba'} 
{s:'aaa', t:'aaa'}

Good luck!

***
_This [challenge](https://www.codewars.com/kata/5bab83fffe6c0c52b8000172) comes from arhigod on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
what is your fav online console to practice javascript? 
Tags: javascript, codepen
Published: 2020-07-11 14:49:11

hi all, 
there are various alternative to vs code to practise javascript, which one is your fav write below in comments? how many websites are there to do online practics of javascript, that has code intelligsense features like vs code provide us to work efficiently?
today I am sharing a amazing website that I got- playcode.io, how many of you know this website, its has code intellisense features thats makes us easy to do practice in javascript.
CRA vs CNA.When to use create-react-app and when nextjs?
Tags: react, javascript
Published: 2020-07-11 13:07:32

In this post, I will tell you about CRA(create-react-app) vs CNA(create-next-app).

First of all what is reactjs and nextjs?

Reactjs is a client side javascript library to build SPA(single page application). 

CSR(Client side rendered) apps use chunks of css and js that generates html content on the client side whereas SSR(server side rendered) apps generate html on the server side and instead of sending chunks of css and js, it just sends the whole html as a string from the server.

Nextjs is javascript framework built on top of reactjs which is used to build SSR(server side rendered) apps.

Can we use reactjs for server side rendering??
Obviously, as we can see that nextjs does ssr and is built on top of reactjs. So why people use nextjs? Simply because it saves them from doing a lot of stuff by themselves like configuring babel for browser compatibility, configuring webpack, express, etc. Nextjs does this for you so you don't have to worry about these.

What are the advantages of SSR?
1. SEO (search engine optimization). Obviously you want your app or business to appear at the top of google to get more organic traffic.
2. Faster first page load. 60% users will bounce back if your website will take more than 2.5 seconds to load.

When to use CRA?
When you don't care about SEO, like your portfolio website.

What are the disadvantages of SSR?
1. First page load time can increase if your app contains a lot of data.

I hope it's all clear now that when you should use CRA and when CNA. And if you have any more doubt on react, you can read https://dev.to/harshvats2000/what-is-react-and-why-to-use-it-56bo
How to specify an alternative location for the AndroidManifest.xml
Tags: android
Published: 2020-07-11 14:18:28

By default, `Gradle` expects an `AndroidManifest.xml` file on the root directory of the `main` source set of every Android project. But what if for some reason we want to change this?


For me, one such case is the default `Kotlin Native` project. When creating a new project, the template creates a few source sets for the `common`, the `iOS`, and the `Android` implementation. For the common and the iOS source sets, it uses names like `commonMain` and `iOSMain`. But when it comes to the Android source set, the name is not the expected `androidMain` but rather a plain `main`.

As I wanted to keep a consistent and more clear naming for the source sets, I decided to rename the name of the folder `main` to `androidMain`. And that's when the problem appeared. When I tried to build the app, I got an error saying `"Cannot read packageName from src/main/AndroidManifest.xml"`.


The good news are that we have the option to change this location on the `build.gradle`!


Inside the `android` block, we can set `manifest.srcFile` to the new location of the `AndroidManifest.xml`.

```gradle
sourceSets {
    main {
        manifest.srcFile 'src/androidMain/AndroidManifest.xml'
        java.srcDirs = ['src/androidMain/java']
        res.srcDirs = ['src/androidMain/res']
    }
}
```

And voilà!!
Gradle uses the `AndroidManifest.xml` inside the `androidMain` folder and we are now able to build and run the app again!

---
➡️ This post was originally published on my [blog](https://diamantidis.github.io).
Using mkcert in Node.js
Tags: node, mkcert, https, ssl
Published: 2020-07-11 13:57:58

This main purpose is to create self signed ssl certificates with [mkcert@Subash](https://github.com/Subash/mkcert) and write a quick demo locally with Node.js.

Step 1: Install NPM package `mkcert`
```
$npm install mkcert
```

Step 2: Create `ca.key` and `ca.crt`
```
$node_modules/mkcert/src/cli.js create-ca
```
>It generates two files `ca.key`, `ca.crt` in `node_modules/mkcert/src`.

Step 3: Create `cert.key` and `cert.crt`

```
$node_modules/mkcert/src/cli.js create-cert
```
>It generates two files `cert.key`, `cert.crt` in `node_modules/mkcert/src`.

Step 4: For the convenience, copy ca and cert out.
```
$cp node_modules/mkcert/src/ca.key ./ca.key
$cp node_modules/mkcert/src/ca.cert ./ca.crt
$cp node_modules/mkcert/src/cert.key ./cert.key
$cp node_modules/mkcert/src/cert.crt ./cert.crt
```

The directory looks like this.

```
./node_modules
./client.js
./server.js
./ca.key
./ca.crt
./cert.key
./cert.crt
```


Step 5: Write codes on server side
> in server.js

```js
const https = require('https');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 3001;

const server = https.createServer({
  key: fs.readFileSync("./cert.key"),
  cert: fs.readFileSync("./cert.crt"),
}, (req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at https://${hostname}:${port}/`);
});
```

Step 6: Write codes on client side
> in client.js

```js
const https = require('https');
const fs = require('fs');
const options = {
  hostname: 'localhost',
  port: 3001,
  method: 'GET',
  ca: fs.readFileSync('./ca.crt'),
};
const req = https.request(options, (res) => {
  res.on('data', (d) => {
    process.stdout.write(d);
  });
}).on('error', (e) => {
  console.error(e);
});
req.end();
```
Step 7: Start a server
```
$node server.js
```

Step 8: Send a request to server
```
$node client.js
```

> You can send a request with `curl`. Remember to put `--cacert`
```
$curl --cacert ./ca.crt -X GET https://localhost:3001
```

Thank you!
Create a Timeline in Flutter without using a plugin
Tags: flutter, programming, dart, mobile
Published: 2020-07-11 13:51:25

---
title: Create a Timeline in Flutter without using a plugin
published: true
description: Flutter timeline widget
tags: flutter,programming,dart,mobile
cover_image: https://mightytechno.com/wp-content/uploads/2020/06/cr.png
canonical_url: https://mightytechno.com/flutter-create-timeline-widget/
---
This video will explain how to create a Timeline widget in Flutter without using the plugin from scratch. 

{% youtube 2jPAUqvRelM %}


Connect with me - [Instagram] (https://www.instagram.com/mighty_techno) |[Blog](https://mightytechno.com/) |[Twitter](https://twitter.com/mightytechno)
Apt-get Update && Apt-get Upgrade
Tags: ubuntu, linux
Published: 2020-07-11 13:49:46

Se você é iniciante no Linux é bem provável que já deu ctrl+c e ctrl+v em algum comando Linux que você ainda não conhecia. Um dos principais recursos utilizados em uma distribuição Linux baseada em Debian é o apt-get.
Hoje eu quero te ajudar a entender um pouquinho mais sobre essa ferramenta, e da próxima vez que você utilizá-la saber exatamente o que está acontecendo no seu terminal.

O apt-get é um gerenciador de pacotes do Linux, ele é capaz de consultar pacotes instalados, verifica pacotes que não estão e define quais estão disponíveis para instalação, isso e possível graças ao banco de dados próprio mantido pelo apt-get.

Para atualizar a lista de pacotes do sistema nós utilizamos o comando apt-get update, este comando vai utilizar a lista de repositórios presentes no arquivo /etc/apt/sources.list e atualizar as referência dos pacotes correspondentes.

É muito comum após o uso desse comando utilizarmos o apt-get upgrade esse comando efetua a atualização dos pacotes do sistema, uma ver que o comando anterior tenha encontrado novas versões.

Caso você tenha interesse em atualizar a sua distribuição Linux você pode também utilizar o apt-get upgrade, mas o mais indicado é o apt-get dist-upgrade.

Para realizar a instalação de um pacote utilizamos o comando apt-get install [ pacote ], ele ira instalar a versão mas recente do pacote solicitado, caso haja alguma dependência será solicitada a instalação da mesma.

Caso você queira remover algum pacote você pode utilizar o comando apt-get remove [ pacote ], caso o pacote removido possua dependências as mesmas também será removida.
Free How to Design API consultancy (45 mins)
Tags: microservices, codenewbie, architecture
Published: 2020-07-11 13:39:45

If you're building a new product using a REST API, are new to it, or are having difficulties defining one, then you can schedule a call with me and I will answer any questions that you might have about it and try to help you to solve your problem.

You can schedule a call with me at:

https://getadvice.github.io/adriano.galello.html

If you have any docs that will help me understand the idea better, please bring them to the meeting so we can discuss it.

Disclaimer: I'm the guy behind GetAdvice (volunteers are needed!!). This is a way to promote getadvice.github.io and get more volunteers into the site too.
WebdriverIO Tutorial for Beginners
Tags: testing, javascript, webdev, beginners
Published: 2020-07-11 13:04:25

Browser automation has made testing much simpler and pain-free, we no longer have to do repetitive tasks each release and instead, let our automated tests take care of it for us. 🙌 

However, many organizations still have next to no test automation and are still spending countless hours testing the same application and test scenarios each week simply because they don't have "time"⏱️ for it. 

With popular test automation frameworks out there, you can get started with Browser Automation in less than 30 mins. I've created a [series of videos](https://www.youtube.com/watch?v=e8goAKb6CC0&list=PL6AdzyjjD5HBbt9amjf3wIVMaobb28ZYN) where I'll be walking you through step-by-step on how to get started with [WebdriverIO](https://webdriver.io/).


{% youtube e8goAKb6CC0 %}


### Here are some of the items we will be covering in this series - 
🔷 Introduction to WebriverIO
🔷 Installation and Setup
🔷 Writing your first test
🔷 Assertion libraries (Expect and Chai)
🔷 Page Object Model
🔷 Creating and Optimizing your test framework
🔷 Reporting
🔷 Running tests on BrowserStack
🔷 Integrating tests with Jenkins
🔷 and many more...

Also, I will be uploading new content each week on various topics around test automation. Stay tuned!

So, take your first step and begin your test automation journey with [me](https://www.youtube.com/channel/UCjugV5pnY6WjvTGYm7U1ucg). 🙂
Completing the first milestone of my GSoC Project with Oppia
Tags: opensource, webdev, typescript, showdev
Published: 2020-07-11 12:48:24

I have passed the first milestone of Google Summer of Code 2020. It was a wonderful experience working with [Oppia](https://www.oppia.org/). I wrote this post to share the things I've learnt during these awesome four weeks.

So first of all let me tell you a bit about my work.

The Oppia's codebase is being migrated to Angular from AngularJs and is currently in a hybrid state. Due to that the codebase shifted from Javascript to Typescript. When the javascript files were being converted to Typescript. In some places the *types* were not declared and were left as *any*. There were many reasons to that one of them being the absence for proper conventions for the types.

Also, there were some third party libraries that didn't have type definitions. So, to be precise my work in the first milestone was to

- Write type definitions for the third party libraries that didn't have those.
- Coming up with a convention for declaring the types.
- Declare types for about 50% of the typescript files.

<br>

Writing definitions for the third party libraries was a bit time consuming but was not too difficult. The one thing that I learnt about typescript during this task was [Namespaces](https://www.typescriptlang.org/docs/handbook/namespaces.html).

Initally, I planned to camelize the response of all the API endpoints. So, that the typescript files could have everything in camelCase. But soon realized that it was not feasible. Then after discussion with my mentor and Oppia core mantainers we decided to restrict the use of snake_case to certain typescript files. I learnt how important conventions were to ensure a **readable** and **maintainable** code.

After the conventions were finalized it was not hard to declare types in other places in codebase. But in some places where the types could be complex. I learnt some awesome things about typescript like [Union Types](https://www.typescriptlang.org/docs/handbook/advanced-types.html#union-types), [Type Guards](https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-guards-and-differentiating-types), [Discriminated Unions](https://www.typescriptlang.org/docs/handbook/advanced-types.html#discriminated-unions), [Conditional Types](https://www.typescriptlang.org/docs/handbook/advanced-types.html#conditional-types). 

I was able to complete the above tasks well before time (because I started the work bit early than the official date ;))

Summing up, it was a month full of learning and I am looking forward to working on the second milestone of my project.

[My Pull Requests To Oppia](https://github.com/oppia/oppia/pulls/nishantwrp)
[GSoC Project](https://summerofcode.withgoogle.com/projects/#4778102950985728)
Building smart garden ornaments with a Raspberry Pi and micro:bits
Tags: raspberrypi, iot, maker, microbit
Published: 2020-07-13 14:53:40

---
title: Building smart garden ornaments with a Raspberry Pi and micro:bits
published: true
date: 2020-07-11 12:42:00 UTC
tags: raspberrypi,IoT,maker,microbit
canonical_url: https://www.jimbobbennett.io/building-smart-garden-ornaments/
cover_image: https://www.jimbobbennett.io/content/images/2020/07/smart-garden-ornament-birdbox.png
---
_Ever wanted to track things happening in your garden, neighborhood or school using smart garden ornaments? Now you can using BBC micro:bits and a cloud-based IoT service._

![Building smart garden ornaments with a Raspberry Pi and micro:bits](https://www.jimbobbennett.io/content/images/2020/07/project-dashboard-1.png)

> TL;DR: check out this project on GitHub for a weeks worth of fun to do with families, friends or in the classroom using a Raspberry Pi, microbits and an IoT service.  
>   
> [github.com/jimbobbennett/smart-garden-ornaments](https://github.com/jimbobbennett/smart-garden-ornaments)

At Microsoft, we are celebrating July as out IoT month - after all who wouldn't want to make use of the pun JulyOT! As part of this month, I created a fun project for schools, families and makers.

This is a fun week long project for those who want to take their first steps into the world of the Internet of Things (IoT) using devices that are popular with kids, and tools that make programming accessible to young developers. You'll use a Raspberry Pi along with some [BBC micro:bits](https://microbit.org) and any garden ornaments you have to hand to build a smart neighborhood, gathering data such as temperature and noise levels and displaying it in the cloud using [Azure IoT Central](https://azure.microsoft.com/services/iot-central/?WT.mc_id=julyot-github-jabenn).

![Building smart garden ornaments with a Raspberry Pi and micro:bits](https://www.jimbobbennett.io/content/images/2020/07/project-dashboard.png)

This is great for families, groups of friends, or even in the classroom - gathering data around your home, neighborhood or school.

Check out the project on GitHub! It's broken down into 5 days of activities, from setting up the cloud service, to gathering data from micro:bits, to creating a mesh network to extend the range, to adding more sensors.

[github.com/jimbobbennett/smart-garden-ornaments](https://www.jimbobbennett.io/building-smart-garden-ornaments/github.com/jimbobbennett/smart-garden-ornaments)

I'd love you to contrbitute to this project! Please send in your stories of what you have set up, any additional ideas for ways to extend the project, or any other sensors you've set up!

Happy making!
What are Chatbots?
Tags: chatbots, dialogflow, ai, nlp
Published: 2020-07-11 12:40:46

A chatbot is one of the applications of Natural language Processing that makes the interaction between a human and a computer. However, from a technological point of view, a chatbot represents the natural evolution of a Question-Answering system leveraging Natural Language Processing (NLP).

The thing that makes Chatbots interesting is the way it is dominating the various industry. Now, most of the business prefer intelligent Chatbots to encounter customer queries and make things easier for them. The involvement of this technology is increasing tremendously and will make a huge impact in the coming future. We experience the use of chatbots in our daily life in the form of ordering food, booking a ticket, getting a personalized experience, and many more.

By making use of chatbots we no longer have to go to the premises of an organization for clarifying our queries. Also, it is easy and simple to handle a bot. Save time and effort because it performs the same task that generally a person handle. Most importantly it increases the Customer base because of its efficient way of tackling the user's queries upfront.

There are various ways of getting started with chatbot development. Some of the famous platforms are IBM Watson, Amazon Lex (Alexa), azure bot services, Engati, Googles Dialogflow, and others. So, here we will talk about one such method that can help you building chatbots.

DialogFlow is a platform based on Natural language Processing and popularly used for building chatbots. It provides us with a rich and easy conversational interface. Initially, Dialogflow was popularly known as api.ai. Google buy this and renamed it as Dialogflow. It uses machine learning to understand what users say and respond accordingly. Through this platform, users can interact using audio and text. Using Dialogflow we can integrate our conversational user interface into various platforms like websites, android applications, Slack, Facebook Messenger, and many more. We can even deploy our Dialogflow agent in google assistant and triggering them using certain phrases.
Learn Python Based Data Science
Tags: datascience, machinelearning, python
Published: 2020-07-11 12:29:32

Hello All!

I have been learning data science and machine learning for quite a while now, and I wanted to share this:
There is a curve that needs to be followed while learning data science. I have seen many people learning through online resources, and that is great! My experience with online resources was such that I had been unable to find a structured method to learn data science and machine learning in a flow. For this reason, I decided to create notes, for anyone who wanted to learn/revise what they have worked on or is planning to work on, and I uploaded these notes in a Day-wise format, to my GitHub repository. 

I chose a day-wise format, so that people who want to learn/revise Python, EDA, and ML Algorithms, can easily spend about a day on a particular uploaded notebook, and can grasp knowledge in a day-wise manner, so everything stays fresh and the learning is in a step-wise manner.

My repository is based on the following:
1. Basic Python
2. Advanced Python
3. Exploratory Data Analysis
4. Machine Learning Algorithms (Supervised And Unsupervised)

Here's the link: https://github.com/shauryaa117/Learn-Python-Based-Data-Science

Happy learning! Stay safe!