teleren/devto huggingface dataset:
Road to Genius: superior #58
Tags: javascript, beginners, computerscience, codenewbie
Published: 2020-07-23 11:32:19

Each day I solve several coding challenges and puzzles from Codr's ranked mode. The goal is to reach genius rank, along the way I explain how I solve them. You do not need any programming background to get started, and you will learn a ton of new and interesting things as you go.

```JS
let S = 0;
for (let i = 0; i < 192; i++) {
  let h = Math.floor(i/2)
  if (h > 0)
    S += i % h
}

// S = ? (number)
```

Today's coding challenge is a very interesting one, because we need to play smarter than usual to solve it. It's only a few lines of code but we need a strategy to solve it.

The for-loop iterates 192 times which is quite a lot, so doing it in our heads, paper or excel will be a huge overkill. Let's start by briefly analyzing what the code does in pseudo-code:
```JS
S = 0
for i in [0 to 192]:
  h = floor(i/2)
  S += i % h
return S
```

The variable `h` is half of `i`. The remainder from dividing `i` by `h` is added to `S`. Let's do a few iterations to illustrate this: 
```
i:0 S+=0
i:1 S+=0
i:2 S+=0
i:3 S+=0
i:4 S+=0
i:5 S+=1
i:6 S+=0
i:7 S+=1
i:8 S+=0
i:9 S+=1

i:10 S+=0
i:11 S+=1
i:12 S+=0
i:13 S+=1
i:14 S+=0
i:15 S+=1
i:16 S+=0
i:17 S+=1
i:18 S+=0
i:19 S+=1
```

Notice that the numbers [0, 9] produce three ones. But everything else, that is [10, 19] produce five ones. The same is true for [20, 29], and so on... In a nutshell this algorithm is related to the number of odd numbers within the range, with the exception of the first ten numbers:

```
The first 10 numbers (0 to 9) produce 3 odd numbers.

The next 90 numbers (10 to 99) produce 9*5=45 odd numbers.

The next 90 numbers produce once again 45 odd numbers.

The last 2 numbers (190 to 192) produce 1 odd number.

3 + 45 + 45 + 1 = 94
```

![coding challenge answer](https://dev-to-uploads.s3.amazonaws.com/i/46rqj16j8qg9ehn37koz.png)

By solving these challenges you train yourself to be a better programmer. You'll learn newer and better ways of analyzing, debugging and improving code. As a result you'll be more productive and valuable in business. Get started and become a certified Codr today at https://nevolin.be/codr/
What React RxJS libs do You Use?
Tags: discuss, react, rxjs, javascript
Published: 2020-07-23 11:31:02

I'm currently using [redux-observable](https://redux-observable.js.org/) for effects. It fits nice into whole redux flow _(the question is if I need Redux itself, but that's a separate matter)_

Sometimes I use RxJS directly in an effect hook _(surely, with teardown!)_, but there are RxJS hook libraries for that, e.g.: [re-rxjs/react-rxjs](https://github.com/re-rxjs/react-rxjs), [crimx/observable-hooks](https://github.com/crimx/observable-hooks) and [LeetCode-OpenSource/rxjs-hooks](https://github.com/LeetCode-OpenSource/rxjs-hooks) _(they have thousands of weekly downloads! Alas, I haven't tried them well yet)_

And I made a tiny [React + RxJS package](https://github.com/kosich/react-rxjs-elements) to display Observable content:

```jsx
import React from 'react';
import { $ } from 'react-rxjs-elements';

function App(){
  return <div>
    <$>{ timer(0, 1000) } sec</$>
  </div>
}
```

<figcaption>npm i react-rxjs-elements</figcaption>

**P.S.** I also created an ⚠️ experimental [JSX + RxJS framework](https://recks.gitbook.io/) — it's cute, check it out!

And what RxJS + React addons do you use?
How do you like them? Share an example!
Do you think we even need RxJS in React?

![I'm listening](https://dev-to-uploads.s3.amazonaws.com/i/81oapj2wxweve8zbvd0j.gif)

<figcaption>Share your thoughts!</figcaption>
CUSTOMIZE GRUB IN UBUNTU
Published: 2020-07-23 11:25:21

1.Go to https://www.pling.com/s/Gnome.
2.select Grub themes.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/apkubz4e8ghbx2xb0pee.jpg)

3.Arrange the themes on the basis of score. Select the theme that you prefer & download the zip file.

4.Extract the zip folder.

5.To install:- Copy the extracted folder to /boot/grub/themes. if you don’t have a ‘themes’ folder use ‘sudo mkdir /boot/grub/themes’.

6.Now open terminal and type sudo gedit /etc/default/grub to add the following line GRUB_THEME=”/boot/grub/themes/Cyber-Security/theme.txt”
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6yutr9hadyu3cw5jezji.jpg)

7.Now update grub using following command ‘sudo update-grub’, or ‘sudo grub2-mkconfig -o /boot/grub/grub.cfg. After the command is executed the following message should be shown:-
 Generating grub configuration file …
 Found theme: /boot/grub/themes/Cyber-Security/theme.txt

Reboot your system you must see your grub like this as(based on your downloaded theme):-

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

To uninstall or remove the theme open sudo gedit /etc/default/grub and comment the line #GRUB_THEME=”/boot/grub/themes/Cyber-Security/theme.txt”
Major benefits with Canada Permanent Residency

Tags: canadapermanentresidency
Published: 2020-07-23 11:23:00

Canada is the most desired nation to get settled as a Permanent Resident. Candidates and professionals all across the world opt to Canada Immigration for globalized education, best career opportunities, quality living, etc.

BENEFITS:

Right to live, work and stay in any part of the country.

Free Heath care and social benefits similar to Canadian Citizens.

Can apply for Citizenship.

Free Education to children and more.

Read More: https://www.kansasxpress.com/canada-permanent-residency
Array Left Rotation | HackerRank practice
Tags: javascript, algorithms, tutorial, codenewbie
Published: 2020-07-23 11:18:23

It's that sweet time in every developers career when you have to prepare for job interviews!

To practice for upcoming interviews I decided to make my way though the problem solving challenges on HackerRank and share my solution here for further discussion.

The first exercise in this series is [Array Left Rotation](https://www.hackerrank.com/challenges/array-left-rotation/problem), which I solved in JavaScript.

In this problem you get the length of an array(*n*), the number of left shifts(*d*), and an array(*a*). The goal is to performs *d* rotations on the array, moving one element from the beginning to the end of the array.

For example: if you have the array `[1, 2, 3, 4, 5]` and *d* is 2 then the algorithm should output `3 4 5 1 2`.

## Brute force approach

This was my first solution to the problem: loop though the array *d* times and each time move the first element to the end of the array.

Remember: *a* is the array and *d* is the number of shifts to the left
 
```javascript
for(let i=0; i<d; i++){
    let elem = a.shift()
    a.push(elem)
    }

console.log(a.join(' '))

```

## The slice solution

If you look at the constrains listed in the HackerRank instructions you'll notice that *d* is always smaller than *n*, the array's length. This means we can use *slice()* to slice off the first *d* elements of the array and then concatenate it to the end of the array.

```javascript
let toShift = a.slice(0, d)
let remaining = a.slice(d, n)
    
console.log(remaining.concat(toShift).join(' '))
```

___
These are my 2 solutions! 

Please feel free to comment and add other solutions to this problem!

Also if you want you can follow me here or on [Twitter](https://twitter.com/maria_modan) :)
Quick Tip: Scrollable containers without scrollbars
Tags: css
Published: 2020-07-23 11:13:32

Here are two SCSS mixins that I have used to hide scrollbars while maintaining touch scrolling on mobile devices.

```scss
@mixin horizontallyScrollable() {
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    // hide scrollbar: IE and Edge
    -ms-overflow-style: none;
    // hide scrollbar: Chrome, Safari, Opera
    &::-webkit-scrollbar { display: none; }
    // hide scrollbar: CSS Scrollbar Styling spec standard (Firefox 64+)
    scrollbar-width: none;
    // we do not want overflow-x: hidden; to hit mobile accidentally
    @media screen and (min-width: 1024px) {
        // hide scrollbar: Firefox 63 and earlier (but also prevents touch scroll)
        @-moz-document url-prefix() { & { overflow-x: hidden; } }
        // undo if CSS Scrollbar Styling spec is supported
        @supports (scrollbar-width: none) {
            @-moz-document url-prefix() { & { overflow-x: auto; } }
        }
    }
}

@mixin verticallyScrollable() {
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    // hide scrollbar: IE and Edge
    -ms-overflow-style: none;
    // hide scrollbar: Chrome, Safari, Opera
    &::-webkit-scrollbar { display: none; }
    // hide scrollbar: CSS Scrollbar Styling spec standard (Firefox 64+)
    scrollbar-width: none;
    // we do not want overflow-y: hidden; to hit mobile accidentally
    @media screen and (min-width: 1024px) {
        // hide scrollbar: Firefox 63 and earlier (but also prevents touch scroll)
        @-moz-document url-prefix() { & { overflow-y: hidden; } }
        // undo if CSS Scrollbar Styling spec is supported
        @supports (scrollbar-width: none) {
            @-moz-document url-prefix() { & { overflow-y: auto; } }
        }
    }
}
```

Nothing too special here: just that all the pieces for maximal cross-browser support is figured. You can even make it simpler now if you drop support for Firefox 63 and earlier :)

Usage: apply these styles to a container that has a child that is larger than the container. You may also need to add JavaScript buttons for scrolling the child as visual indicators so that people don't have to wonder what they are looking at :)
🚀 Build and Publish a Custom React Hook Package on npm
Tags: javascript, react, tutorial, beginners
Published: 2020-07-23 11:07:49

---
title: 🚀 Build and Publish a Custom React Hook Package on npm
published: true
description: Build your own custom React Hook and publish to npm for the world to use. 
tags: javascript, react, tutorial, beginners
cover_image: https://imgur.com/ol7lghj.png
---

In this episode learn how to build your own custom React Hook and publish to npm for the world to use. In this video, we will go over all the step. At the end of the video, I will give you a couple of tips on versioning your packages at the end. 

{% youtube mWCrzUGkGKQ %}

📝 NOTE:
I will edit this later to add a written guide to all the steps involved. 💜 So if you are looking for a written guide, bookmark the page and check back next week. 🤓

---

[Follow me on Twitter](https://twitter.com/nialljoemaher)

Subscribe on [Codú Community](https://www.youtube.com/c/Cod%C3%BACommunity)
What type of computer do you use for programming and why?
Tags: discuss, watercooler, webdev
Published: 2020-07-23 10:59:37

I use a MacBook Pro (Retina, 13-inch, Mid 2014). It is pretty old but it still almost looks like its brand new. Apple really do have good build quality I have never had any problems with it. I have even installed Windows on it using Bootcamp so I can dual boot which is pretty cool.
Mobile Security Market Research Report 2020
Tags: mobile, security, research, report
Published: 2020-07-23 10:47:34

Mobile technology has been favored by the world incredibly over the last decade. Almost two-thirds of the worldwide population is using mobile phones, especially smartphones. In 2017, according to the report published by Soti, Inc., nearly half of the global internet traffic was consumed by mobile devices. Furthermore, the report cited that, over 175 billion applications have been downloaded in 2017 by smartphone users globally. Moreover, the increasing consumption of the internet has attracted cybercriminals as well. Mobile safety solution helps to protect the portable and mobile devices from cyberattacks.

Growing Implementation of EMM and MTM in the Market for Enhanced Security

The mobile solution can be implemented in an operating system (OS) as well as on individual mobile devices. The security solution deployed over OS is considered under Enterprise Mobility Management (EMM), whereas those implemented on a mobile device is considered as Mobile Threat Management (MTM). Deployment of EMM, together with MTM, offers additional features like device configuration, device management, real-time device monitoring, and GPS tracking, among others. 

Therefore, the integration of EMM, along with MTM, is trending in the market for better safety features. For example, IDC conducted a survey on enterprise mobility decision-makers, in the year 2017, which states that almost half of the small and medium enterprises (SMEs) in the U.S. have deployed mobile device security solutions. 
The device security solutions such as mobile threat management, mobile scanning, or mobile antimalware, along with enterprise security solutions are mainly adopted by SMEs. Moreover, one-third of the businesses in the U.S. are using EMM and further planning to deploy MTM solution technology in the upcoming years.
Create a Custom JavaScript Audio Player with playlist & visualizer
Tags: javascript
Published: 2020-07-23 10:32:03

---
title: Create a Custom JavaScript Audio Player with playlist & visualizer
published: true
description: In this tutorial you'll learn how to make a custom audio player with JavaScript with a playlist and visualizer.
tags: JavaScript
---

Originally published [here on YouTube](https://youtu.be/jZL9gVwxO-U).
(Give me a thumbs up and subscribe if you found this useful 🙏).

Get the source code here: https://github.com/codebubb/javascript-audio-player

The visualisations article on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API

00:42 Setup
02:52 Creating elements
08:49 Hooking up playback
15:46 Styling the player
21:20 Adding the viusalizer
30:58 Customising the visualiser

— Follow Me —
Twitter: https://www.twitter.com/codebubb
Facebook: https://www.facebook.com/juniordevelopercentral/
Blog: https://www.juniordevelopercentral.com/
— Thanks! —

So in this JavaScript Audio Player tutorial we'll build our own custom audio player with JavaScript.  There will also be a playlist with our audio player.

We'll make a JavaScript class that constructs a new custom audio player object that we can load our own audio files into.

The class will build all of the HTML markup for us and we just need to add our own custom stylesheet to style the playlist elements which is basically the links to play each song in our player.

The final piece of our JavaScript audio player with playlist will be to create a JavaScript audio visualizer to create a frequency graph based on the audio input that is currently playing.

Enjoy this tutorial on how to make.an audio player in JavaScript!

Check out some more Junior Developer Central Web development projects here: https://www.youtube.com/watch?v=e0e6m2mxJlU&list=PLpc_YvcwbxaTW88GAFDJ77DGihUr5H3Ha
Spring Stereotypes
Tags: java, spring, repository, annotation
Published: 2020-07-23 10:20:02

---
title: Spring Stereotypes
published: true
description: Spring custom stereotypes 
tags: #java #spring #Repository #annotation
//cover_image: https://direct_url_to_image.jpg
---
Spring stereotype annotations are aliases for @Component annotation, like Service, Repository and Controller.
Hence you can define your own stereotype and customize it like the Api component here and spring container will take the rest on initializing the suitable component.

![Spring](https://dev-to-uploads.s3.amazonaws.com/i/cn49230dd2njvytwkfq3.jpg)
Safety on the streets with python
Tags: python, security, web
Published: 2020-07-23 10:15:06

---
title: Safety on the streets with python
published: true
description: A quick weekend project for street safety in neighbourhoods that aims to start working in Madrid.
tags: python, security, web
cover_image: https://images.unsplash.com/photo-1541323016765-ad7d24cd2e5a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80
---

For a few years I've been thinking in ways tech could help neighbourhoods into becoming more safe taking advantage of the people collaboration. It first came to me after realizing a neighbour a loved in my home town had some communication problems with the essential services. The whole idea of mine is logistically difficult to perform as so I ended up just theorising for a long time without actually writing a single line of code for that idea. Recently, after a discussion in [Mastodon](https://joinmastodon.org/), I realized **there are some tiny goals to make public spaces safer** and that we could start from there.

![](https://media.giphy.com/media/bKnEnd65zqxfq/giphy.gif)

I've been curious about **Open Street Map** for a while, so I decided I could work in my spare time between projects in a simple python code that created a OSM with marks. The whole idea was to create a launching portal (static, at first) with a map-launching button, and the map contains marks with dangers around the neighbourhood. The warnings could be  from to broke asphalt to unsafe LBGTIQ spaces. Or! in a more positive sight, safe spaces! (**safe LBGTIQ** shops and meeting points, **feminist friendly** spaces, etc) as well as identifying trigger spaces such as betting places/alcohol stores. It kind of depends on the needs of each neighbourhood. It only needs a JSON (there's an example already) where you have to set location and the advise. 

![](https://media.giphy.com/media/1j18lLRk2RqCxpCg/giphy.gif)

The idea is for the people to be able to upload information through **email or hashtags**, some people already suggested to add a form and some of them are planning on merge request that option. I'm so happy about how many people from my city wanted to help as soon as I launched the repo and I decided to share it here in case you guys want to use it in your neighbourhoods as well, or in any case modify the [repo](https://gitlab.com/terceranexus6/barriocheck). 

![](https://media.giphy.com/media/3rgXBrLlRs4ZlpnVDO/giphy.gif)

Have fun and stay safe! I believe in the collaboration of the people for creating safer cities.     

Right now [it's in Spanish](https://gitlab.com/terceranexus6/barriocheck), as I thought it would help local groups to better understand it, but I hope to soon add the English translation.
What's your favorite templating engine?
Tags: webdev, discuss, productivity
Published: 2020-07-23 10:09:13

---
title: What's your favorite templating engine?
published: true
description: 
tags: webdev, discuss, productivity
//cover_image: https://direct_url_to_image.jpg
---
There are a lot of options to choose from when it comes to templating engines. Same of the most popular ones include Pug(Jade), Handlebars, Mustache, Nunjucks, EJS, Dust, etc..

So far I've tried just Pug and EJS and I must say I prefer EJS without a doubt. Each one is not that hard to learn, so it's worth investigating each one.

Which ones have you tried and which one did you settle on?
Antier Solutions| Delivers Best cryptocurrency wallet development Solutions
Tags: crypto, bitcoin
Published: 2020-07-23 09:48:55

Cryptocurrency wallet development requires in-depth expertise and a sound knowledge base. We at Antier Solutions is equipped with both the parameters and provides with best white label crypto wallet solutions and customized solutions from the scratch. Connect with our experts now.
Know more about multi cryptocurrency wallet features through : https://www.antiersolutions.com/cryptocurrency-wallet-app-development/
My first Vue npm package
Tags: vue, npm, webdev
Published: 2020-07-23 09:37:45

So basically i just published my first npm package.

It is a Vue component that displays a reactive credit card preview for payment forms.

You can download it from [NPM](https://www.npmjs.com/package/vue-ccard) or see the code in the [Github repo](https://github.com/hildorjr/vue-ccard).

![Showcase GIF](https://dev-to-uploads.s3.amazonaws.com/i/84qn94ewxv7cuy7palgf.gif)

What you think about it?

Please leave your suggestions in the comments.

I hope you guys like it!
What is non relational database for beginners?
Tags: database, beginners, mongodb, codenewbie
Published: 2020-07-23 08:43:58

This article was originally published at https://www.blog.duomly.com/6-most-popular-backend-questions-and-answers-for-beginners/#what-is-non-relational-database

---

### What is non relational database?

{% youtube JsAbcIWKR_4 %}
Now you already know the relational database, but there is also the other type, the non relational database, also called NoSQL databases.

A non relational database is a database that doesn’t follow the tabular schema with rows and columns. 
There are four categories of grouping data in non relational databases: 

- **key-value stores** - data is collected as a key-value pair. It allows the horizontal scaling, which is impossible with different databases. The most popular use cases for this kind of non relational database are gaming or IoT.

- **graph stores** - those types of databases are used to build applications that work with the highly connected datasets. The most popular use cases of this type of database are social networking apps, recommendation apps, and fraud detection.

- **column stores** - in those NoSQL databases, data is collected similar to a relational database, by columns and rows, but the difference is that in non relational databases the names and formats of the columns can be changes from row to row in the same table.

- **document stores** - those are the databases where the data is stored in the file in a JSON format. The best cases to use document non relational database are projects with big data and real-time applications.

The most popular NoSQL databases are MongoDB, DynamoDB, ElasticSearch, Cassandra.
The biggest benefits of using the non relational database are simplicity of the design, developers don’t have to care about the proper relations between the data in the tables and speed, because operations in NoSQL databases are much faster.

<a href="https://www.duomly.com/?code=lifetime-80">![Duomly - Programming Online Courses](https://dev-to-uploads.s3.amazonaws.com/i/k00bacsgkavhcziauwrg.png)</a>

Thank you for reading, 
Anna from Duomly