teleren/devto huggingface dataset:
Custom Built Nano-Quadrotor
Tags: drone, arduino, teensy, robotics
Published: 2020-05-24 11:43:55

During the summer of 2019, I worked on a project to build my custom nano-quadrotor with a custom controller, modular software and a custom-designed PCB and frame. This project was inspired by a need to develop a cost-effective, modular robot, allowing me to have complete control over the hardware and software. This culminated in designing full hardware and a software combination for a nano drone. 

We decided to have an Arduino Nano microcontroller to control the robot, an NRF24L01 module to communicate with the hardware using a handheld remote controller and also from a computer system. Micro Coreless motors are used as primary actuators, controller by a MOSFET device. Using this allows you to separate the power supply to the microcontroller and the actuators of the robots. An MPU 6050 sensor, with DMP6 algorithm, is used to estimate the orientation of the robot. Using this an the feedback, I designed a PID control loop for the control of the orientation of the robot. The PID control algorithm is a standard and proven method for basic control of a quadrotor. Also, it is computationally inexpensive and allows us to perform computations on a resource-constrained microcontroller board.

In the initial iteration, the PCB was designed in a manner to also act as a mechanical frame of the robot. The entire robot was a single piece robot with electronics fixed to the mechanical frame. This system was not as modular as desired since accidents do happen and changing the circuitry in case of mechanical damage is not possible. The PCB frame is also much heavier as it occupied unnecessary space for mechanical rigidity. Hence, in the second iteration, a tiny PCB was designed, on which the electronics were made as compact as possible, and the mechanical frame was 3D printed to be extremely flexible and lightweight.

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

In the second iteration, the microcontroller board was changed to Teensy 3.2/4.0 for having a large increase in processing power. Work is currently being done to also explore the possibility of an onboard camera and an improvement in the communication system. 

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


This project is ongoing and you can follow it at the following link:-
[https://github.com/mihirk284/goldcrest](https://github.com/mihirk284/goldcrest)
Managing Named Routes in Flutter with Extensions
Tags: flutter, dart, codequality, extensionmethods
Published: 2020-05-24 11:08:26

We can use Named Routing with flutter in an efficient way with extension methods. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f7olziqeirgfx2w7mcev.png)

With these extension methods we have less chances to committing any error  or typo. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t09dnokpuwfscbh6ge1t.png)
And in MyApp widget use it accordingly. 

With Navigator.pushNamed(); we can use it in the following way -- 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3f0f6n4ywjssmrr4yxqn.png)
Interval List Intersections - LeetCode
Published: 2020-05-24 11:05:17

---
title: Interval List Intersections - LeetCode
published: true
description: Medium Problem
tags: 
---

Given two lists of closed intervals, each list of intervals is pairwise disjoint and in sorted order.

This problem can be divided into two steps, finding intervals from two lists and looping through lists

Let's see what kind of overlaps can occur

![types-of-overlaps](https://i.imgur.com/KRYxVk6.png)

From the image the condition for overlap is

![overlap-condition](https://i.imgur.com/Im4rfJf.png)

In order to get start and end of the overlapping range

![start and end of overlap](https://i.imgur.com/l5a6SAK.png)

Now we need to figure out how to loop through the lists A and B

You can use two pointers technique. See below image to understand better

![Two pointers technique](https://i.imgur.com/bQwsOkO.png)

Here's the code

```js
/**
 * @param {number[][]} A
 * @param {number[][]} B
 * @return {number[][]}
 */
var intervalIntersection = function(A, B) {
	let res = new Array()
	let i = 0, j = 0
	while(i < A.length && j < B.length) {
		let lo = Math.max(A[i][0], B[j][0])
		let hi = Math.min(A[i][1], B[j][1])
		if(lo <= hi) {
			res.push([lo, hi])
		}

		if(A[i][1] < B[j][1]) {
			i++ // A length is over go to next one
		} else {
			j++
		}
	}
	return res
};
```
How to generate dynamic ENUM type in GraphQL from DataBase using NestJS, MongoDB
Tags: nestjs, graphql, enum, mongodb
Published: 2020-05-24 10:54:42

In this article I am gonna show how to generate **Enum** type of **GraphQL** by fetching data from Database in **NestJS**, I am using **MongoDB** as my Database with Mongoose, you can use any database.

I am taking example of User, in which I am storing user’s firstName, lastName and role, for role I want to make an Enum which will be dynamically generated from the roles available in the role table in Database. Also, I am dynamically resolving the selected role to the corresponding id of that role, so that way I can store the id of role in my user record.

First of all I’ll **fetch** all the record of role table

{% gist https://gist.github.com/badalkhatri/33de7922f1492854a3a670f455b7bde9.js %}

Then I’ll extract all the name field of role in roleNames variable,

{% gist
https://gist.github.com/badalkhatri/23d7f252a3de64a1a73814a5c22a04fb.js
 %}

In this **filter** and **map** function tweaks I have returned an array containing string of all roles.

As you can see I have discarded ‘ADMIN’ as I don’t want that user can select ‘ADMIN’ role by his own, to add admin user we might want to use seed data.

Now I will generate Enum string,

{% gist
https://gist.github.com/badalkhatri/f25fd03d5360e28c623e84478f0c70cd.js
%}

By joining all the roleNames with **‘ ’(single space)** we will have Enum type for UserRole ready, but its just **string** we didn’t put it in actual **GraphQL file**, will do it in a short time, before that let us resolve that roles to its corresponding id so that I can easily store it in user table.

{% gist
https://gist.github.com/badalkhatri/8c0ed92843b306a4e1ea70706bb63c46.js
%}

As you can see, I am making an object of UserRole which has **property** as role name and **value** as role id,

*So, every role will have its corresponding role id.*

Now we have generated Enum and its resolver, we have to put it in GraphQL, for that we have to put both of them in **GraphQL options**, which is executed every time you run the project.

{% gist
https://gist.github.com/badalkhatri/15fb6a54408e2707dcd8efdd34f6e430.js
%}

So that’s it you have successfully generated Enum type in GraphQL which is dynamically generated based on data in database.

Let us have a look at what GraphQL playground looks like,

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

As I have only 2 roles ‘STUDENT’ and ‘TEACHER’ in my DB, GraphQL shows me those 2 as suggestion in role field.

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

You can go to my [GitHub](https://github.com/badal-khatri-blogs/nestjs-dynamic-enum) to get whole code for this NestJS project.

Thank you.

Happy coding!
Pizza Hub
Published: 2020-05-24 10:47:48

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

[Note]: # (If you used the GitHub Student Developer Pack on your project, add the "#githubsdp" tag above. We’d also love to know which services you used and how you used it!)

## A Pizza Devlivery App
#### [Demo Link](https://pizzahubapp.herokuapp.com/)
#### Code {% github https://github.com/dikshagoyal26/pizza-Delivery-master %} {% github https://github.com/dikshagoyal26/pizza-delivery-Backend %}

### Tech Stack Used: HTML,CSS, Bootstrap, JS, ReactJS, NodeJS, ExpressJS, MongoDB 
##### It is a small web service, (MVP product), in which a user can purchase pizza, view his orders, add feedbacks. It has two panels admin panel and user panel. Admin can control the website, add, view, delete or update products, view/edit orders, view feedbacks, add another admin(as there is no signup page for admin, only a login page).

Would love to know reviews about the project.

P.s- I worked on it last year:P but still love it the best.
How to alias git commands?
Tags: git, todayilearned
Published: 2020-05-24 10:19:58

If you are familiar with `git`, you should know about the `git pull` command.

If you speak French, you know it's pronounce the same as `chicken (poule)`

And if you have a sense of humour as lame as mine, you need to alias the command `git pull` as `git poule` 

```bash
git config --global alias.poule pull
```

Now it's your turn, what will you do?
Best Wordpress providers in Europe?
Tags: help, discuss, php, wordpress
Published: 2020-05-24 10:19:40

Hi everyone,

I want to write again and create a Wordpress Blog to better understand SEO and also to see what is new.
 
Can you recommend me a good provider in Europe that has:

- SSL

- Very good speed 

- Latest PHP

- Dedicated IP

- AV

Update:

I think I will go with https://www.hostpapa.com, they are enough for what I need right now. Because I also have a lot of projects and technologies to learn right now.

Also if you like to see some sites hosted with them try this link https://www.webhostinghero.com/websites-hosted-by-hostpapa/

**I have no affiliation with either of these sites**

If anyone has a better solution please let me know by providing a site hosted with that recommendation.

**Thanks again @Ian for all the info and patience describing your experience.**

Thanks in advance
Localize iOS App without Coding, with Storyboard
Tags: xcode, ios, storyboard, swift
Published: 2020-05-24 10:09:45

---
title: Localize iOS App without Coding, with Storyboard
published: true
description: 
tags: xcode,ios,storyboard,swift
---

There are several ways to internationalize your app. In this article, let's check how to achieve localizeation by Storyboard, avoiding coding.

# 0. Environment
Xcode 11.0

# 1. Localize the Project
Add Japanese from PROJECT Info - Localications.
*In this article, use English as default language and add Japanse.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wwp0zihq40ouv99i2wtz.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/75uod1q9i3o6h9rrh5ci.png)

Then, .string file will be generated to selected storyboards. By doing the followings, localization is complete!:
- .storyboard file: Configure in English
- .string file: Configure in Japanse (Refer to "2. Localize after Updaing Storyboards")

Note that keys to configure are different between UI object types. After updating storyboards, it may take time to look up all the keys, so let's take a look at the shortcut in the next section.

# 2. Localize after Updaing Storyboards
Don't forget to backup the current .string file before the following steps, because it will be removed. Uncheck Japanese. Confirmation dialog may be shown, and select "Remove".

Then, check Japanese again. Select "Replace file" in the dialog shown, and .string file will be re-genereted.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nlf59o4x1kc0tfm6acg7.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jf2pyrtwiss8qdi3owff.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/070mpw6cx3h94xfw1f3g.png)

In the sample above, configuration is as following:
"cgO-CO-O4B.text": text of UILabel
"qY6-pH-68Q.normalTitle": text of UIButton
You can set Japanese in the right-hand side (Code below omits auto-generated comments).

```
"cgO-CO-O4B.text" = "Konnichiwa!";
"qY6-pH-68Q.normalTitle" = "Button label in Japanese";
```

When you add UI objects you may prefer this way, but of course you can edit .string file directly.

# 3. Localize after Adding Storyboards
From Localize menu, first add Base, and then add Japanese.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jpuxe38hawxobrb8rtb8.png)

# 4. Run and Check Localization
Just by switching language setting of simulators (or of course real devices), you can see app's language switch.
Getting a 73% increase in clicks from Google results
Tags: seo, google, learning, developer
Published: 2020-06-09 06:47:12

---
title: Getting a 73% increase in clicks from Google results
published: true
date: 2020-05-24 10:00:00 UTC
tags: SEO, google, learning, developer
canonical_url: https://roelofjanelsinga.com/articles/getting-73-increase-clicks-from-google-results
---

![Google search console for Plant care for beginners](https://roelofjanelsinga.com/images/articles/search-performance-for-plant-care-for-beginners.png)

# Getting a 73% increase in clicks from Google results

Two weeks ago I published a post about my own implementation of technical SEO for a project of mine, called: [Technical SEO: How to add structured data to your website](https://roelofjanelsinga.com/articles/technical-seo-how-to-add-structured-data-to-your-website). This was the header image of that post:

![Original Google search console for Plant care for beginners](https://roelofjanelsinga.com/images/articles/original-google-search-console-for-plant-care-for-beginners.png)

That was an actual screenshot of the numbers in the Google Search console for one of my projects over the last 3 months at that time. Since implementing Structured Data on that website 3 weeks ago, I've noticed that I was getting a lot more clicks. This is what it looks like right now, keep in mind, this is a difference of 3 weeks:

![New Google search console for Plant care for beginners](https://roelofjanelsinga.com/images/articles/new-google-search-console-for-plant-care-for-beginners.png)

That by itself is an increase of 73.28% of clicks on Google. Now the interesting part: Adding structured data, in particular FAQ items, shows a huge increase in clicks for that same time frame. From 0 to 1.8k in 2-3 weeks:

![FAQ rich results in Google Search Console](https://roelofjanelsinga.com/images/articles/faq-rich-results-in-google-search-console.png)

Those are the numbers for "Search appearance: FAQ rich results". That same timespan, since initially implementing FAQ structured data into the website, I've got an additional 1.8K clicks. Helping Google understand your website better and providing answers to FAQs directly in the search results works. At least, in my case, it works. Here's a screenshot of one of those results, including FAQs in Google.

![Google search results for FAQ items](https://roelofjanelsinga.com/images/articles/google-search-results-for-faq-items.png)

This is not to say that this will have the same impact on your websites because your site might have a lot of clicks already and getting a 73% increase is just not possible. It could be that you have a lot of competition for certain keywords, again this will slow down the number of extra clicks you're getting. This website is located in a niche, but it doesn't take away what a huge impact adding structured data, in particular FAQ items, had on the SEO results.
Lost-Found-Sell Application
Tags: githubsdp
Published: 2020-05-24 09:51:42

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

[Note]: # (If you used the GitHub Student Developer Pack on your project, add the "#githubsdp" tag above. We’d also love to know which services you used and how you used it!)

## My Final Project

Flask :heart: Github :heart:

### Demo Link

http://lostnfound.azurewebsites.net/
 

### Link to Code

{% github https://github.com/harishkaushal30/SE-Project %}

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)

[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
My React App to visualize Data
Tags: react, webdev, github, frontend
Published: 2020-05-24 09:47:03

Its the first version of my React-App that visualizes data in graphs and charts, working on importing data from different sources and in different formats.
here's the link to my GitHub repository : https://github.com/nikhiltripathi1/React-Graph 

any suggestion on how should i get more exposure of react.js
100 Days of SwiftUI — Day 4
Tags: 100daysofswiftui
Published: 2020-05-25 22:00:05

---
title: 100 Days of SwiftUI — Day 4
published: true
date: 2020-05-24 09:15:59 UTC
tags: 100daysofswiftui
canonical_url: https://zeitschlag.net/100-days-of-swiftui-day-4/
---

[Day 4](https://www.hackingwithswift.com/100/swiftui/4) was about loops. I learned how to exit outer loops when using nested loops — you can use so called labels and `break label` and that's it:

```
outerLoop: for i in 0..<10 {
  for j in 0..<10 {
    if i*j == 16 {
      // do something
      break outerLoop
    }
  }
}

```

And again: I should read the tasks of the test more carefully. Most of the time I don't see that the code wouldn't run at all as a constants should be changed, for example.

<!--kg-card-end: markdown-->
Placeholder title
Tags: gftwhackathon
Published: 2020-05-24 09:37:29

[Instructions]: # (To submit to the Grant For The Web x DEV Hackathon, please fill out all sections.)


## What I built


### Submission Category: 

[Note]: # (Foundational Technology, Creative Catalyst, or Exciting Experiments)


## Demo
 

## Link to Code

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)


## How I built it 

[Note]: # (For example, what's the stack? did you run into issues or discover something new along the way? etc!)


## Additional Resources/Info 


[Reminder]: # (We hope you consider expanding your submission into a full-on application for the Grant for the Web CFP, due on June 12.)
Clean ESLint import management for ReactJS
Tags: react, reactnative, eslint, dx
Published: 2020-05-24 09:35:37


Often times for greenfield projects, we have [Prettier](https://prettier.io/) and [ESLint](https://eslint.org/) to do the heavy lifting to organize our codes. It is a common practice today to enforce formatters using Husky and Stage-lint as per this post - [Using lint-staged, husky, and pre-commit hooks to fail fast and early](https://codeburst.io/continuous-integration-lint-staged-husky-pre-commit-hook-test-setup-47f8172924fc).

In doing so, we are investing that our project would be maintainable for a longer time when we invest time to auto-format the code from the start. Keeping aside that we will less be stressed later on after months and we have to refactor parts of the code.

### Imports are a mess in JavaScript projects

Working on solo on a ReactJS project doesn't require much attention on code styling and maintenance. You are the only code owner and maintainer.

For many though, we work professionally with ReactJS projects for 5-8 hours a day. When a newly onboarded programmer sees that the code is messy from the start then it puts him into believing that code quality standards are not important to the project, team, and company.

What your new programmer teammate see when first starting to work on a project is the block of imports at the start of every file. This first impressions is very important, it sets the impression that code quality is a first class citizen of the team and he/she will have to maintain the same care the the previous developers have given to the project.

### ESLint Plugin Import to the rescue

[eslint-plugin-import](https://github.com/benmosher/eslint-plugin-import)

### ESLint configuration

On your .eslintrc.js add these plugins and rules.

The rules below enforces that:

1. `import React from 'react'` is always on top - this is just my personal preference. Remove the `pattern: 'react',` line to disable.
1. Imports are ordered by `['builtin', 'external', 'parent', 'sibling', 'index']`
1. Each group will have new lines in-between.


```js
module.exports = {
  plugins: ['import'],
  rules: {
    'import/order': [
      'error',
      {
        alphabetize: {
          order: 'asc',
          caseInsensitive: true,
        },
        'newlines-between': 'always',
        groups: ['builtin', 'external', 'parent', 'sibling', 'index'],
        pathGroups: [
          {
            pattern: 'react',
            group: 'external',
            position: 'before',
          },
        ],
        pathGroupsExcludedImportTypes: ['builtin'],
      },
    ],
  },
};

```

TODO / Limitations:

The sorting is enforced manually, if you are using VS Code and have the [ESlint Plugin](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) then you're good to go. The editor will flag the unordered imports and you'll have the "Quick Fix..." options to sort (though you may have to repeat this multiple times).
Let me know if there is a way to automate this on-save.

![linting sample](https://dev-to-uploads.s3.amazonaws.com/i/ssi6zurlz4unte4sq6mn.png)
Scan your code in CI/CD using Security Code Scan
Tags: securitycodescan, dotnet, cicd
Published: 2020-05-24 09:31:37

<sub>Photo by Adi Goldstein on Unsplash</sub>


#The issue

Recently i came across the following [post](https://zimmergren.net/code-analysis-tools-for-azure-developers-coding-dotnet-core/) describing tools we can use to audit our code.

[SecurityCodeScan](https://security-code-scan.github.io/) and [DevSkim](https://github.com/microsoft/DevSkim) were promising but [DevSkim](https://github.com/microsoft/DevSkim)seems to be only compatible with .net core 3.1 Application.

So we tried [SecurityCodeScan](https://security-code-scan.github.io/) and are satisfied with it.
But we want to integrate it in our Azure DevOps pipeline but the [task available](https://marketplace.visualstudio.com/items?itemName=JaroslavLobacevski.SecurityCodeScan) seems to be only for TFS on Premise.

#Integration

As suggested in this [issue](https://github.com/security-code-scan/security-code-scan/issues/161), we just had to add a script to inject the dependency in our .csproj before the build to perform analysis without impacting local dev.

```
REM @Echo off

FOR /R %~dp0 %%f in (*.csproj) do  ( 
    CALL dotnet add %%~ff package SecurityCodeScan --version 3.5.3 
)
```

A [page](https://ss64.com/nt/for_r.html) helped me with the syntax for the FOR loop.

%~dp0 refers to the directory the script is.

Hope this help !
Customize your favorite VSCode extensions
Tags: vscode
Published: 2020-05-24 09:22:47

Steps

1. Find the source code, and clone it, probably from GitHub.
2. `cd` to the folder, then

```sh
# npm install -g vsce
npx vsce package
# make sure `code` is in PATH first
code --install-extension my-extension-0.0.1.vsix
```

I am doing it with this package, https://github.com/patarapolw/vscode-language-ignore
From Containers to Kubernetes
Tags: octograd2020
Published: 2020-05-24 08:56:02



## My Final Project

This project implementing laraval, nginx and mysql into containers and then migrating to minikube kubernetes cluster.

## Presentation Link

[Intro Presentation](https://uitedumm-my.sharepoint.com/:p:/g/personal/naingnainghtun_uit_edu_mm/EU7fh7J4aX5EhgRsV3SdGU8B6yH5bd5zdgdJTR8wH2xVKQ?e=i6LElm)
[Final Presentation](https://uitedumm-my.sharepoint.com/:p:/g/personal/naingnainghtun_uit_edu_mm/EUD9sQ-Nam9IpudfZq1Nb0kBSPC9tv9JNZMc04MozuWHFw?e=pskQUM)

Project Code

———

{% github https://github.com/naing2victor/project %}

———

[Final Note]: # This project is not in a perfect one. There might be issues with volumes in kubernetes cluster.