teleren/devto huggingface dataset:
What is the Future of Mobile App Development in Hybrid Apps?
Tags: hybridapps, development, android, ios
Published: 2021-07-05 05:15:17

<a href= "https://codersera.com/blog/list-of-top-hybrid-apps">Hybrid apps</a> integrate the advantages of both the website and the app in one package. Some programmers prefer hybrid apps because they make it easier to add device functions like push, camera, and GPS notifications. Because apps are accessible through the App stores, they have the additional advantage of gaining customers from Google and Apple's platforms. Because they're still essentially online programs, they're less expensive to develop, but they may necessitate professionals with a deeper understanding of the phone's various interfaces and functions.

Many people have previously heard of the hybrid concept. If not, we'll walk you through some of the most popular frameworks right now. We'll mention a couple of cross-platform frameworks:

<ol>
<li>React Native
<li>Ionic
<li>Native Script
<li>Flutter
</ol>

Many options are readily available to meet all of our development requirements. The demand for good quality is the most critical factor. This necessitates the careful selection of a mobile app framework. As a result, we can consider some of the advantages and disadvantages of hybrid development.

There are numerous advantages to using a cross-platform approach.

<ul>
<li>For many devices, a single code base is created.
<li>Shorter development cycles can be achieved with less code.
<li>Programming expenditures are lower.
<li>Deployments are easier, and there are fewer compliance difficulties to deal with. </ul>

<b>To conclude…</b>

It has been established that hybrid apps would not substitute native apps because the latter has some feature constraints. Native apps, for example, provide a better user experience than hybrid apps. If they notice it's a hybrid app, there's a good possibility it won't be accepted into the App Store. Additionally, when it comes to running high-performance apps and games, native apps are the favored option.

When it comes to picking between platforms (there are just four: Windows, HTML, iOs, and Android), we're still in the early stages. To summarise, hybrid apps are a lot more cost-effective solution for a business to migrate their app. Their technical expert doesn't have to learn a new language or employ someone to do it for them.

The user experience in native apps, on the other hand, is something the corporation cannot overlook. iOS users and developers, for example, are intimately familiar with the apps. Without changing the UX for each platform, the apps will cease to function as they once did, resulting in a lack of usefulness and, ultimately, the loss of app users.
01-Installing Visual Studio Code for JavaScript Development
Tags: javascript, node, react, vscode
Published: 2021-07-05 04:43:11


Visual Studio Code is the ultimate editor for JavaScript development. I would like to demonstrate how to set it up and make it ready for the development. In later part of another video, I will demonstrate about various different productivity tips for Visual Studio code and explore some essential Extensions. 

{% youtube X_qtwQLq6Uw %}
Node proxy to add CORS headers to API response!
Tags: node, cors, proxy, programming
Published: 2021-07-05 04:40:19

With the introduction of CORS (Cross Origin Resource Sharing) policy, frontend code won't have access to a response if correct CORS headers are not embedded in it. If you own the backend code, then it becomes easy to handle since you can just add the headers before sending the response. If it's not owned by you, then you have no way to add headers directly before the response reaches your frontend code. 

![Error message due to response being blocked by CORS policy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iigho8mbboxr3ulsybzv.PNG)

Manually inserting them using GUI can be tiresome. The easiest way to get past this is to use a proxy server.

Check out this repo: [add-cors](https://github.com/das-jishu/add-cors)

It includes a public proxy server which can be used to fetch data by adding CORS headers so that it's not blocked by CORS policy. A better way is to create your own proxy and use it without relying on a public server. The repo contains instructions on how to go about creating a proxy and host it on Heroku. 

```
   git clone https://github.com/das-jishu/add-cors.git
   cd add-cors/
   npm install
   heroku create cors-everywhere //cors-everywhere is an example. Use a unique name for heroku to create.
   git push heroku master
```

The code is fairly simple which enables someone to write it from scratch instead of cloning the code and add more features and utility as needed.
How to Arrange the Axis Labels Smartly in React Charts
Tags: react, charts, webdev, customization
Published: 2021-07-05 04:39:05

Learn how easily you can arrange axis labels smartly in Syncfusion [React Charts](https://www.syncfusion.com/react-ui-components/react-charts "React Charts") when they overlap with each other. This video explains how to adjust, position, and customize labels, use line breaks, and add multi-level labels. 

Download the example from GitHub: 
https://bit.ly/3hf5Kn2

Refer to the following documentation to place labels smartly in the Syncfusion React Charts:
https://ej2.syncfusion.com/react/documentation/chart/axis-labels/

Check out this online example of smart axis labels in the Syncfusion React Charts: 
https://ej2.syncfusion.com/react/demos/#/material/chart/smart-axis-labels

Check out this online example of a multi-level label in the Syncfusion React Charts: 
https://bit.ly/3xbJ8us

{% youtube NLrOSKAnxes %}
Uma saída para a adição de Dark Mode.
Tags: beginners, javascript, brasil
Published: 2021-07-05 04:22:42

![Exemplo-de-dark-mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n22tohz9ji8e2k72pmss.gif)

## Minha recém experiência com dark mode
Em meu ultimo projeto que fiz que pode ser encontrado **[aqui](https://github.com/gabrlcj/anchor.finance)**. 
Eu me coloquei na situação de utilizar e construir um dark mode para a minha aplicação, sendo essa minha primeira vez e vi que existem diversas maneiras de fazer isso, então resolvi mostrar a que eu achei, e achei deveras 'fácil' de implementar:

### Passo a passo desta utilização
#### Primeira etapa
```js
Pegar o elemento que irá causar o evento de troca de temas para o js (DOM)
// Pode ser um input de toggle ou um botão, o que você achar melhor xD
const alteraTema = document.querySelector('nomeDoSeuAlterador')

// Então vamos adicionar um evento à ele
alteraTema.addEventListener('change', () => {})
```
#### Segunda etapa
```js
Primeiro vamos criar uma função assim
const darkMode = () => {} // Podendo ser arrow function ou não, vai da sua escolha
```
#### Terceira etapa
```js
Depois vamos criar uma variável e pagar o elemento body da aplicação
const darkMode = () => {
    var element = document.body // O nome da variável pode ser qualquer um da sua escolha
}
```
#### Quarta e ultima etapa
```js
Vamos adicionar uma classe para o body da nossa aplicação podendo assim estilizar ela com o tema dark e usar o um botão para a troca de temas
const darkMode = () => {
    var element = document.body
    element.classList.toggle("dark-mode")
}
```

### Considerações finais
Em minha opinião achei bem simples de fazer essa parte da aplicação e deixo aqui pra vocês trazerem mais meios de fazer essa adição do tema dark, **quais métodos vocês usam?**
갑자기 웹사이트 로그인이 안되거나 글쓰기가 안될 때
Tags: login, website, server, linux
Published: 2021-07-05 04:15:13

정상적으로 잘 운영되던 웹사이트가 갑자기 로그인이 안되거나 게시판 글쓰기가 안될 때 당황할 수가 있다.
소스 수정이나 업데이트를 진행한 일도 없는데 이런 일이 발생할 때는 프로그램의 문제가 아닐 경우가 많다.

이런 일이 발생하는 대표적인 이유는,
서버의 공간이 부족할 때이다.
그리고 가장 큰 원인제공자는 로그파일이다.
서버 로그파일은 꼭 필요한 파일이지만 지나치게 빨리 비대해진다.

/var/log 폴더의 크기를 확인해 보자.

```
sudo du -h /var/log
```

기존엔 웹서버관련 로그파일이 문제가 되는 경우가 많았는데
최근 리눅스 버전에서는 /var/log/journal 폴더가 문제될 수 있다.

* 시스템이 부팅될 때부터 발생하는 모든 이벤트를 수집해서 바이너리 행태로 저장함.
* journal 로그 확인
```
sudo journalctl -r
```
* 10일 이상된 자료 삭제
```
sudo journalctl --vacuum-time=10d
```
* 용량제한
```
sudo journalctl --vacuum-size=1G
```

* 자동설정하기
```
sudo vi /etc/systemd/journald.conf
```
SystemMaxUse=1000M

* journal 새로 시작
```
sudo systemctl restart systemd-journald
```
Preconfigured EC2 instances - AWS AMI
Tags: aws, devops, cloud, beginners
Published: 2021-07-05 04:13:03

In the last tutorial we created lots of EC2 instances for auto scaling but what if we want our EC2 instances configured already before adding them to our ASG. This is where AMI comes in an AMI stands for Amazon Machine Image. It allows you to customize your EC2 instance. With an AMI you can add your on configured software, config, monitoring and operating system.

# How does an AMI work ?

If you create your own AMI then AWS saves all the configurations and software in an EBS snapshot in such a way that it can start an EC2 instance can be configured from that AMI. After that we can launch our EC2 instances from these AMI. These are available to use in a region and can be copied across regions to take advantage of global presence of AWS.

We were already using AMI from the first time we created an EC2 instance. Where we selected Amazon Linux 2 AMI in the second step while creating an EC2 instance. These are three types of AMI available on AWS.

1. Public AMI provided by AWS 
1. Marketplace AMI which we saw in the [second part](https://dev.to/this-is-learning/start-an-instance-on-aws-ec2-hands-on-2hb3) of this series where AMI with preconfigured software. 
1. Private AMI: AMI which we build and maintain ourselves.

So you can see AMI are very powerful we can get preconfigured EC2 instances from it. Which can be put behind a load balancer and an ASG to get a group of preconfigured servers where we can deploy our apps. Next up we will do a Hands on how to create an AMI.
Wine Quality Prediction
Tags: beginners, machinelearning, firstmlproject, python
Published: 2021-07-05 04:02:43

After getting the fundamentals clear from the courses, I knew it was time to jump right in into a machine learning project. But what exactly was in a machine learning project? 

<a name = "https://www.youtube.com/watch?app=desktop&v=nKW8Ndu7Mjw"> The 7 steps of machine learning </a>

After looking at the above video by Google, I started off on my project right away. 

The first step was to gather and clean the data for my project. 

Fortunately, the wine data is available in the SKLearn library and so I just had to import it from there.

Thereafter, I wanted to better understand the data so I put it in a pandas dataframe and saw the first 5 data points in the dataset. The wine dataset has many characteristics which include alcohol, malic acid, ash, alkalinity of ash, magnesium and any more. The wine dataset also had this column called *Target* with values only of 1 to 3. Reading up on the dataset, each number represented a class of wine with certain characteristics. Each data point in the wine dataset belonged to one of the classes.

After looking at the graphs of the data points of each characteristic of wine, I realised that the alcohol levels of the wines were very distinctly putting  each wine to 3 separate classes.

![graph of wine type against alcohol level](https://raw.githubusercontent.com/Param3103/wine_quality_prediction/main/wine_data.png)

Each of these classes had values 0,1 or 2.

So, the problem had now become on predicting if the wines belonged to classes 0, 1 or 2.

So, now I split the data into training and test sets and scaled the 2 sets to each other.

I then used the k neighbors classifier algorithm by letting k=6.   
 *It turns out k=6 had highest accuracy*. I fit the model to the training set and tested it out with the test set. I turns out, this gives an accuracy of 0.83 or 83%.

I was now able to predict the classes of wines with pretty good an accuracy.

To conclude off, I just want to roughly share what my understanding is of the k neighbors classifier. How the k neighbors classifier works in this case is that, when a new point is given to the classifier, it plots it onto a horizontal 1-dimensional graph where the previous alcohols were already plotted on based on its alcohol level. It then finds the k nearest points to it on the horizontal graph, depending on what k you give it, and gives a class that is the majority amongst the "neighbor points".

So, that is my first machine learning project. I am eager to try new machine learning algorithms.
RT-Thread IoT OS Tech Conference Virtually on Sep.16–17, 2021.
Published: 2021-07-05 03:52:58

The first-ever RT-Thread IoT OS Global Tech Conference will be holding from September 16–17,2021 features embedded technologies, new projects showcase, community contributors track. We welcome embedded developers from across different countries to come together to exchange ideas, showcase projects, identify solutions, discuss future strategies, and provide mutual learning opportunities on a wide variety of topics, let’s exploring embedded technologies.

**Free Register: https://forms.gle/8W1j2ZhCSLKFfyFQ8**

##About RT-Thread:

RT-Thread is an embedded real-time operating system, with its rich middle-tier components and great hardware & software ecosystem delivered great support for the Internet of Things (IoT) industry. Born in 2006, till now, RT-Thread has powered 1 Billion devices, applied in Wearable Devices, Smart Home Appliances, Energy, Automotive Electronics, Medical Electronics, Consumer Electronics, and many other industries.

RT-Thread, a community-powered open source project, we also want to take this time to thank all contributors who shared their time, energy, and talent to help RT-Thread growing! Working alongside the 100K+ community developers strongly inspires RT-Thread to continue exploring and delivering the Best Class of IoT operating system. Let open-source project benefits more people!


##Call for Speakers 2021

**Submission Link:**
https://forms.gle/ZFB3zww5spUWuziY6

##Register to Conference:
https://forms.gle/8W1j2ZhCSLKFfyFQ8

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xyhmdfx4p8vwpqc1y86.png)
Finding the host
Published: 2021-07-05 03:23:48

Replit turns out to be very convenient because you can build your application directly in their web-based editor.  You can choose a framework from a whole list of choices.  Mine was to use React (and maybe Redux, but we'll get there).  Replit will build your entire directory structure, including all the node.js components - which is nice because, if you know node components, you know that they take a LOT of space and they are not friendly about being moved around.  It's a real benefit to not have to deal with that! Also, Replit will let you directly interact with Github as a repository.  No command line commands required.  Just follow the prompts.  It's pretty slick.  But ... Replit goes to sleep.  If you are not using the application frequently enough, then the service goes to sleep and wakes up again when you next call for it.  The wake up period can take a few minutes and when you are relying on a pretty quick response, that few minutes can really make a difference.  So, I'll continue to use Replit for my algorithm practice but I'm going to have to move to another service to build my application.  My next choices are between Netlify and Heroku.  At this point, I have no experience with either one of them.  So, I'll let you know next week how it went!
Unable to navigate to pages in react (MERN app) which is deployed on Heroku
Tags: react, heroku, node, express
Published: 2021-07-05 03:11:42

I am working on a MERN app and it is working fine in localhost. Yesterday I hosted it in heroku and the API , UI are working fine.

But I am unable to navigate between pages.

I already asked this question in stackoverflow but no one answered. I hope some of you can find a solution for this.

The whole question and the relevant links are in here.
Please help.

https://stackoverflow.com/q/68246950/13942764
Stepping into AI world
Tags: machinelearning, ai, beginners, python
Published: 2021-07-05 03:09:43

As I began my journey into the world of machine learning in python, I was totally lost on what should I do. Machine Learning has been the latest craze in the world of programming and I was eager to step my foot into this newest world in the realm of programming.

AI is set to be the next craze in the next 50 years or so and my curiosity helped me churn out some possible resources I could need to understand this bleak idea to me.

[CS50's Introduction to Artificial Intelligence](https://cs50.harvard.edu/ai/2020/)

I first came across this link above, in which Andrew Ng _(He is awesome by the way)_ , a very renowned machine learning expert, shares on the mathematical and conceptual logic and understanding of the machine learning algorithms. I found this very educational as it was here I first was able to relate machine learning problems to optimisation.

Hereafter, I went to the _Elements of AI_ course.

[Elements of AI](https://www.elementsofai.com/)

In this course, I was able to get a better grasp of the fundamental logic and reasoning behind machine learning algorithms.

I thought now I was ready to dive into the programming part of machine learning. However, the courses I found either only talked about the code with no explanation about the concept or showed the code after explaining the concepts. It was only until I saw this video series by _CodeBasics_ that I was really able to piece things together.

[Data Science Full Course For Beginners- CodeBasics](https://www.youtube.com/playlist?list=PLeo1K3hjS3us_ELKYSj_Fth2tIEkdKXvV)

He explained the machine learning algorithms, explained the logic behind each line of code he was writing and what steps he was taking to use the ml model. Shout out to him and to all other beginners out there, I would recommend you to follow him.

After looking at his videos, I thought it was time I began my first ml project. More about it in the next post!
Go Programming - GORM
Published: 2021-07-05 02:34:56

The fantastic ORM library for Golang

Source Code: https://github.com/codebangkok/golang

####ติดตามผลงานได้ที่
* **Page:** [https://fb.com/CodeBangkok​](https://fb.com/CodeBangkok​)
* **Group:** [https://fb.com/groups/msdevth​](https://fb.com/groups/msdevth​)
* **Blog:** [https://dev.to/codebangkok](https://dev.to/codebangkok)
* **YouTube:** [https://youtube.com/CodeBangkok](https://youtube.com/CodeBangkok)
How to reduce running time with Multi-threading.
Tags: python, programming, django
Published: 2021-07-05 02:27:56

As you all know, we use multi-threading to handle processing parallelly.
I also know it and created 100 threads that create PDF in each thread.
so I am going to create 100 PDFs in one PDF creation time.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xg7vid8pdl224oxlnpc.png)
I have attached my code.
However, even it takes 3 seconds for running thread_body, it took 60 seconds for running the 100 threads.
What's wrong with it?
Node vs HTML
Published: 2021-07-05 02:19:03

I thought I'd take a post to just lay out something I know, and maybe drop a few related facts along the way.

##HTML script tags

HTML documents import files into the browser via \<script> elements in the document head. Actually, that's not totally true. The elements can be inserted anywhere in the document (as far as I know -- which isn't very far. Perhaps this should say anywhere between the \<html> tags..but even then I doubt how accurate I'd be).

Generally, you'll see them up in the \<head> of the document, before the \<body>. On occasion you'll see them somewhere inside, but at the bottom of, the body of the file. That's because scripts are loaded when and where they're rendered (or read? or interpreted?) and if the script depends on *something* that has not yet loaded, the javascript within that file will be unable to locate that *something* and act on it.

In other words, if a script needs an element to exist, you can place the script in the document below the element. That way the element will exist and the .js won't be looking for something that doesn't yet exist.

Here's another fact: scripts are *executed* once they're loaded. So a variable that exists within the script's global scope will be available within the document's global scope.

Here's a demonstration:

```html
<!DOCTYPE html>
<html>
  <head>
    <script src="example.js"></script
  </head>
  <body>
  </body>
</html>

```

```javascript
//example.js

var exampleVariable = 'check this out'
```

In the console of your browser's developer tools you can access the code within your script. Simple as this:

```javascript
//in browser console

console.log(exampleVariable)
> 'check this out'
```

And here, let's demonstrate that the 'window' is the global object (read: global scope) inside the browser.

```javascript
//in browser console

console.log(window.exampleVariable)
> 'check this out'
```

If you have multiple scripts, they can interact with each other because the browser imports and executes them all within one environment.

##Let's relate this to node

Node isn't a browser. It's an environment that allows you to run javascript outside of the browser.

So without having access to script tags, how can you provide files access to each other?

Node provides two complementary tools that allow files to interact: *export* and *require*.

They work like this:

```javascript
//thisFileExportsThings.js
var exampleVariable = 'hey look!'

var exampleFunction = () => return 'check this out'

exports.exampleVariable = exampleVariable
exports.exampleFunction = exampleFunction

```

```javascript
//thisFileImportsStuff.js

var imported = require('./thisFileExportsThings')

console.log(exampleVariable)
console.log(exampleFunction())

>'hey look!'
>'check this out'
```

##And finally Python

Python follows a similar syntax. The only difference is that python's `import` statement does double duty, handling the work of both of  `require()` and `exports` from javascript.

```python
#exporting_file.py

def example_func():
  print('python is great')

```

```python
#importing_file.py

import exporting_file

example_func()
>'python is great'

```
Como adicionar um menu de contexto "abrir com VS Code" ao Windows Explorer?

Tags: vscode
Published: 2021-07-05 02:00:58

Segue tutorial:

1) Abra um novo bloco de notas (notepad) e salva o documento com o nome **vsCodeOpenFolder.reg** e o tipo como todos os arquivos

![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qvdn83xdyye3jztdrert.png)

2) Cole o seguinte script dentro desse documento em branco:

```
Windows Registry Editor Version 5.00
; Open files

[HKEY_CLASSES_ROOT\*\shell\Open with VS Code]
@="Edit with VS Code"
"Icon"="C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe,0"

[HKEY_CLASSES_ROOT\*\shell\Open with VS Code\command]
@="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\" \"%1\""

; This will make it appear when you right click ON a folder
; The "Icon" line can be removed if you don't want the icon to appear

[HKEY_CLASSES_ROOT\Directory\shell\vscode]
@="Open Folder as VS Code Project"
"Icon"="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\",0"

[HKEY_CLASSES_ROOT\Directory\shell\vscode\command]
@="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\" \"%1\""

; This will make it appear when you right click INSIDE a folder
; The "Icon" line can be removed if you don't want the icon to appear

[HKEY_CLASSES_ROOT\Directory\Background\shell\vscode]
@="Open Folder as VS Code Project"
"Icon"="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\",0"

[HKEY_CLASSES_ROOT\Directory\Background\shell\vscode\command]
@="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\" \"%V\""
```

3) Clique no arquivo 2 vezes e execute:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ppsjk7ntey63ksg59udd.png)

4) Feito isso será exibido a opção de "Open Folder as VS Code" ao seu windows explorer:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1w63n1nq9pl72s60wtk.png)