teleren/devto huggingface dataset:
React-Redux Hooks with Typescript in 2020
Tags: react, redux
Published: 2020-01-02 08:44:59

This is going to be a continued version of our previous blog, <a href="https://codersera.com/blog/react-hooks-with-typescript-use-state-and-use-effect-in-2020/">React Hooks with Typescript</a>, So if you are new to hooks, I would suggest looking into that article first, which talks about setting up the starter kit of react hooks with typescript and AntD for UI components.

If you know basic of react hooks, like useEffect or useState, you can even give it a skip.

Since React push using of functional components, a lot of libraries around react start publishing their own <a href="https://codersera.com/blog/hooks-getting-in-a-new-relationship/">hooks</a>, Redux being one of them, as almost most react project use redux these days.

The Redux hooks APIs provide an alternative to connect HOC and go away with mapStateToProps, and mapDispatchToProps, and I must say these hooks API provide a much cleaner way of doing that.

Now without going much in theory, lets deep dive into the coding part.
Daily Coding Problem #4
Tags: dev, practice, algorithms, challenge
Published: 2020-01-02 08:44:33

---
title: Daily Coding Problem #4
published: true
description: Daily Coding Problem sends you a coding task every day for you to practice for coding interview tasks
tags: 
- dev
- practice
- algorithms
- challenge
---

## How it works?
The folks at [Daily Coding Problem](https://www.dailycodingproblem.com/) send you a problem that was asked at a top company every day for you to solve. The premium membership also offers the opportunity to verify your solution.

# Problem #4
```
This problem was asked by Stripe.

Given an array of integers, find the first missing positive integer in linear time and constant space. In other words, find the lowest positive integer that does not exist in the array. The array can contain duplicates and negative numbers as well.

For example, the input [3, 4, -1, 1] should give 2. The input [1, 2, 0] should give 3.

You can modify the input array in-place.
```

# My solution
```
using System;
using System.Collections.Generic;
using System.Linq;

namespace DailyCodingProblem.Solutions.Problem04
{
	public class Solution
	{
		public static void Test()
		{
			var input = Console.ReadLine()
				.Split(' ')
				.Select(int.Parse)
				.ToHashSet();

			var minPositiveNumber = GetMinimalPositiveNumber(input);

			Console.WriteLine(minPositiveNumber);
		}

		public static int GetMinimalPositiveNumber(HashSet<int> input)
		{
			var minPositiveNumber = 1;
			while (true)
			{
				if (!input.Contains(minPositiveNumber))
				{
					break;
				}

				minPositiveNumber++;
			}

			return minPositiveNumber;
		}
	}
}
```

Solutions are posted in my Github account

{% github cwetanow/DailyCodingProblem %}. 

Feel free to leave a like and post a comment.

If you also have any better solution in mind, by all means, share it, so we can learn from each other.
Front End Developer Skills That Grow Your Career In 2021
Tags: javascript, beginners
Published: 2020-01-02 08:25:06

Front End Developer Consist of two types of skill
1. Technical Skills
2. Soft Skills

Both the Skill are important to grow your career as a front end developer.
Technical Skills

1. PhotoShop

2. HTML

3. CSS

4. Javascript

5. CSS Framework and Processor.

    (A) Bootstrap

    (B) CSS Preprocessors

6. Javascript libraries

    (A) Jquery

    (B)  Angular

    (C) React

7.  Debugging 


Soft Skills

1. Communication

2. Time management

3. Honesty/Integrity

4. Emotional intelligence

5. Critical Observation

6. Leadership

7. Teamwork

For detail, information [click here](https://www.htmlentities.xyz//2019/10/front-end-developer-skills.html) to read our article
Python Loops Cheat Sheet
Tags: python
Published: 2020-01-02 08:22:10

Coming from C++, Python loops confused me--I'm talking about for loops, in specific. In C++, you tell a loop exactly how to behave from the initializer, condition, to the increment. In Python you _write it in English_. That is if you simply want it to print the items (and only the items) in the order it's in. This isn't a blog post for beginner coders, only new pythoners (pythonists? snake charmers??) 

I. simply iterate through the list and print the values:
```python 
arr2 = [10, 20, 30, 40, 50, 60]
for i in arr2:
    print(i)
```
II. simply iterate through list and print the values and the indexes: 
```python
arr2 = [10, 20, 30, 40, 50, 60]
for i, num in enumerate(arr2):
    print(i, num)
```
III. iterate backwards:
```python
arr2 = [10, 20, 30, 40, 50, 60]
for val in reversed(arr2):
    print(val)
```
IV. iterate with the indexes alone:
```python
arr2 = [10, 20, 30, 40, 50, 60]
for i in range(len(arr2)):
    print(i) 
```
V. Iterate the index backwards:
```python
arr2 = [10, 20, 30, 40, 50, 60]
for i in range(len(arr2), 0, -1):
    print(i)
```
 VI. iterate with the index and value backwards:
```python
arr2 = [10, 20, 30, 40, 50, 60]
for i in range(len(arr2), 0, -1)::
    print(i, arr2[i])
```
VI. iterate from the index 3 to the index 5:
```python
arr2 = [10, 20, 30, 40, 50, 60]
for val in arr2[3:6]:
    print(val)
```
VII. iterate from the index 3 to the index 5 with the index:
```python
arr2 = [10, 20, 30, 40, 50, 60]
for i in range(3,6):
    print(i)
```
IX. iterate from the indexes backwards with access to the index (not just the value):
```python
arr2 = [10, 20, 30, 40, 50, 60]
for i in range(5,0,-1):
    print(i)
```
X. looping using enumerate: 
```python
# this one is probably my favorite
arr2 = [10, 20, 30, 40, 50, 60]
for i, val in enumerate(arr2):
    print(i, val)
```

This is literally copied and pasted from my notes. Hope it makes sense. 

Did anyone else think Python loops were weird? Do you loop any of these differently in Python? Comment to let me know. 

*Special thanks to [Ben Sinclair](https://dev.to/moopet) and [rhymes](https://dev.to/rhymes) for their contributions to this article.*
Why I don't like JavaScript
Tags: r, python, javascript
Published: 2020-01-02 07:54:34

> When I want to get a unique random sequence ...

### R
```r
print(sample(1:10, 10))
```
![happy](https://thepracticaldev.s3.amazonaws.com/i/djt7vilf07ss9340t2wo.jpg)

### Python
```python
import random
l = list(range(1, 10 + 1))
print(random.sample(l, 10))
```
![happy](https://thepracticaldev.s3.amazonaws.com/i/djt7vilf07ss9340t2wo.jpg)

### JavaScript
```js
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getRandomArray(min, max) {
  let result = [];
  for (i = min; i <= max; i++) {
    while (true) {
      let v = getRandomInt(min, max);
      if (!result.includes(v)) {
        result.push(v);
        break;
      }
    }
  }
  return result;
}

console.log(getRandomArray(1, 10));
```
![angry](https://thepracticaldev.s3.amazonaws.com/i/h3ink2oijsca4dhmk3uf.png)
Learn HTML5 and CSS3 for Beginners
Tags: html, css, webdev, javascript
Published: 2020-01-02 06:57:16

## Learn HTML5 and CSS3

### All HTML and CSS Elements are explained in easiest ways.

HTML and CSS are the basic programming languages for web development and design. They are beneficial to learn for developers, marketers, and people in many other disciplines. Learning HTML can be used for situations like formatting a blog or email, working with a CMS, embedding external content on your site, and creating usable content.

Cascading Style Sheets or CSS are an important way to control how your Web pages look. CSS can control the fonts, text, colors, backgrounds, margins, and layout. But it can be very difficult to learn CSS, and some people would rather not learn it.

By learning CSS you can modify pre-built templates so that they have your colors and styles. Thus you'll have a customized website without a lot of effort.

Knowing how to modify the CSS will save you money when you find small problems that you can fix yourself. And as you practice, you'll be able to fix bigger and bigger problems.​

CSS gives you the opportunity to create sites that look very different from page to page, without a lot of extensive coding.

This course going to cover:
* HTML Basic Tags.
* CSS - Selectors.
* CSS - Units & Color codes.
* CSS - Margin, Padding and Border.
* CSS - Display, Box-sizing & Positioning.
* CSS - Font Styling.
* CSS - Flexbox.
* CSS - Grid.
* CSS - Background Properties.
* CSS - Gradients.
* CSS - Transform, Transitions and Animations.
* Bonus - SASS.

{% youtube BEHQji8nAzo %}
UI Challenge 2020 (part 1)
Tags: ui, flutter, design, dart
Published: 2020-01-02 06:50:49

---
title: UI Challenge 2020 (part 1)
published: true
description: An implementation of an awesome instagram-like UI i found on dribble.
cover_image: https://raw.githubusercontent.com/RegNex/InstaPic/master/screenshot/original.png
tags: UI, Flutter, Design, Dart
---

As 2020 starts, i'm trying to sharpen my UI skills in flutter and also digging deep into Animation and Native Dart features. I started the year by implementing an Awesome mockup i saw on dribble.com by Mickael Guillaume. The first Page implemented and second page to go!
source code here: https://github.com/RegNex/InstaPic

Don't forget to give it a 🌟
🎊Happy New Year 🎉
`-100_i32.abs()` outputs `-100` ...... What?
Tags: rust
Published: 2020-01-02 06:25:59

---
title: `-100_i32.abs()` outputs `-100` ...... What?
published: true
description: How unary operator and method calls work.
tags: rust
---

Sometimes I forgot that this occurs in Rust.

But in Rust, method calls have a higher precedence than unary prefix operators.

~~~rust
println!("{}", -100_i32.abs()); // -100
~~~


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nmij076e8yuqw0ejyiqy.png)



so if `100` is what we want as an output, we need to put the parentheses around `-100_i32`.

~~~rust
println!("{}", (-100_i32).abs()); // 100
~~~
React Hooks with Typescript: Use State and Use Effect in 2020
Tags: react, redux
Published: 2020-01-02 05:58:52

In this title, we are going to see how functional components can be used with react hooks to reduce the amount of code used in writing class-based components and still achieving all the features of it.

We are going to use typescript for this tutorial so that our code remains 100% typesafe, and I must say if you are doing a big project, Typescript is a must feature one should go with, which helps to keep the code clean.

The above command will create a project with the name <B>codersera-hooks-tutorial.</B> Once it is done, go straight to the directory and either npm start or yarn start, will kickstart the project.

<B>We will be using yarn throughout this tutorial to maintain consistency.</B>

Let us now integrate antd ( a design library by the name of ant design), which we will be using to have some standard UI components. And, this does not have to do anything with hooks or react in general.

For complete code and structure, you can use this <a href="https://codersera.com/blog/react-hooks-with-typescript-use-state-and-use-effect-in-2020/">React Hooks with Typescript</a>

<H2>Part 2</H2>

<h3>React-Redux Hooks with Typescript in 2020</h3>

This is going to be a continued version of our previous blog, React Hooks with Typescript, So if you are new to hooks, I would suggest looking into that article first, which talks about setting up the starter kit of react hooks with typescript and AntD for UI components.

If you know basic of react hooks, like useEffect or useState, you can even give it a skip.

Since React push using of functional components, a lot of libraries around react start publishing their own hooks, Redux being one of them, as almost most react project use redux these days.

The Redux hooks APIs provide an alternative to connect HOC and go away with mapStateToProps, and mapDispatchToProps, and I must say these hooks API provide a much cleaner way of doing that.

Now without going much in theory, lets deep dive into the coding part.

create a new component file src/components/ReduxHooksComponent.tsx, if not already with 2 input fields and a submit button.

Complete Code with an example you can use this link <a href="https://codersera.com/blog/react-redux-hooks-with-typescript/">React-Redux Hooks with Typescript in 2020</a>
Multilingual In Xamarin forms.
Published: 2020-01-02 05:34:38

Mobile Application Development.

Make your Xamarin.Forms app Multilingual Automatically 
 
Install the extension, configure it and the project properly. 
We will create the project and make the user interface load the appropriate language resources depending on the user’s current language. 
Here, I’ll guide you through the steps required to make the extension work properly, you will have to go through most of these steps only once and after, you will only have to translate your strings with a few clicks. You need to install the Multilingual App Toolkit extension  from. 
https://marketplace.visualstudio.com/items?itemName=MultilingualAppToolkit.MultilingualAppToolkit18308 and follow these steps. 
 
1. Create an azure translator text API resource, which you will use in project 
 
 Take down your API key. Open your credential manager in Windows control panel 
 

 
 
 Select add generic credentials.  Add exactly the same credentials as shown below, your password is your Translator key you kept earlier. 
 



2. Right click on your shared project, click on multilingual app toolkit and select add translation languages.
 3. Select your language choices, after this .xlf files will be created in your project.
 4. Right click on your project, go to Multilingual App Toolkit and select Generate machine translations.
 5. Build your project and, you will have all your string resources translated to the language of your choice.
How to create continuous deployment pipeline for quasar app in under 5 minutes using aws-amplify
Tags: codeguru, vue, quasarframework, aws
Published: 2020-01-02 04:16:52

{% youtube eBKCyxOipGI %} 

Hello, code guru’s welcome back.

In this video, we are going look at How to create continuous deployment pipeline for quasar app in under 5 minutes using aws-amplify. Since quasar framework is not supported out of the box. we will discuss instruction on how to modify aws amplify build file in order to build and deploy Quasar application.

If you like more content from us please do consider supporting us on Patreon at https://www.patreon.com/codeguru

Please do not forget to provide your feedback or any topic suggestion in the below comments section.

You can also find us on
twitter: https://twitter.com/codeguru_io
facebook: https://www.facebook.com/codeguru.io
Instagram: https://www.instagram.com/codeguru.io/
Youtube: https://www.youtube.com/c/codeguru_io
Being paranoid with help of Devise
Tags: rails
Published: 2020-01-05 18:00:28

---
title: Being paranoid with help of Devise
published: true
date: 2020-01-02 04:15:47 UTC
tags: rails
canonical_url: https://prathamesh.tech/2020/01/02/being-paranoid-with-help-of-devise/
---

I have used devise for authentication in all my Rails projects in last 7 years. But recently I came across a nifty feature provided by Devise – **_paranoid mode._**

In our Rails application, we have ability to reset password by clicking on the "Forgot password" link using devise. If we enter user's email, we will get an error if the user is not present in the database.

<!--kg-card-begin: image-->

![](https://prathamesh.tech/content/images/2020/01/Paranoid-2019-12-30-10-27-20.png)

<!--kg-card-end: image-->

But this message indicates that user with given email does not exist in database. One can keep trying with different email addresses to see which ones exist in database and which ones don't.

This is called **user enumeration attack** and is one of the top web attacks listed in OWASP [https://www.owasp.org/index.php/Testing\_for\_User\_Enumeration\_and\_Guessable\_User\_Account\_(OWASP-AT-002)](https://www.owasp.org/index.php/Testing_for_User_Enumeration_and_Guessable_User_Account_(OWASP-AT-002))

Devise solves this problem by providing paranoid mode.

<!--kg-card-begin: code-->
```rb
Devise.setup do |config|
  config.paranoid = true
end
```
<!--kg-card-end: code-->

Once we enable the paranoid mode as above, Devise does not reveal whether the user exists in the database or not. This mitigates the problem of user renumeration in a way.

<!--kg-card-begin: image-->

![](https://prathamesh.tech/content/images/2020/01/Paranoid-2019-12-30-10-27-57.png)

<!--kg-card-end: image-->

Paranoid mode is not applicable when we are creating a new user. Because in that case, we do want to show an error that user with given email already exists.

> Paranoid mode is not available in registrable module, only available in confirmable, revokable and unlockable modules.

It is not a full proof way of stopping the user remuneration attack but it helps in mitigating it in a way.

<!--kg-card-begin: hr-->
* * *
<!--kg-card-end: hr-->

Interested in knowing more how I use Rails in day to day work? [Subscribe to my newsletter.](https://prathamesh.tech/mailing-list)
Learn Python and Develop Python Apps using Tkinter
Tags: python, machinelearning, tutorial, beginners
Published: 2020-01-02 03:53:37

## A Complete Python, Tkinter Hands-On with 7 Projects 

### Learn Python and Develop Python Apps using Tkinter

#### A complete course to understand python and develop python apps using Tkinter 

What you’ll learn
* About Python
* About Tkinter
* Create projects using various tools
* Python Programming and approach to build python apps using Tkinter

{% youtube fLz0Cm5Cb4U %}
Holidays Over, Time to Power Up
Tags: watercooler
Published: 2020-01-02 03:49:27

Well, now the holidays are officially over for me it's time to power everything up again.

Having now moved everything over to my new MacBook Pro 16", it is time to find a bag that it fits in to keep it safe during those daily travels.

I also am forcing myself to stick with the zsh in macOS Catalina rather than the trusty Bash that I have used for so many years. This also means adding my aliases to the configuration before I lose my brain.

Next up, some new podcast episodes for [CompileSwift](https://compileswift.com/podcast) and getting some new videos made for my [Patreon page](https://patreon.com/pwcom).

It is funny how quickly we get used to ramping things down and enjoying maybe a little too much gaming and TV time.

On the plus side, the new machine setup has given me a chance to fix some bad install choices I made from the terminal that I never did get around to fixing.
Alright, walk away...
Tags: random, firstpost
Published: 2020-01-02 03:23:42

To each their own, or so they said. Bigger things to come.
For now, I'll drop random facts you already know: 
## Frank facts
        * Chelsea is the best team in the league(#No arguments.)
        * One is enough for today(Ocaml is really cool.)

      
Your head moves faster than the rest of your body.
สวัสดี dev.to
Published: 2020-01-02 02:40:50

```javascript
const turorialFunction = (name) => {
  console.log(`Hello ${name}`)
}
```

![Alt text of image](https://res.cloudinary.com/practicaldev/image/fetch/s--OsLaFSo9--/c_fill,f_auto,fl_progressive,h_220,q_auto,w_220/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg)
Look for advice about a project
Published: 2020-01-02 01:00:43

Hi there,

I am building a web app resembling a combination of Twitch and Zoom: A host can turn on the camera and share his screen, start broadcasting. Other users search on the website for interesting content and then join the room. The reason why I say this app is also like Zoom is that the functionality/purpose of the app is to enable a few people (maybe up to 6 per room) to have remote conversations, and there will be some video-conferencing features added to the app.

Is WebRTC suitable for this application? Also, how are the techniques needed for broadcasting different from the ones needed for multiparty video communication and WebRTC? Thanks. Looking forward to your advice.
Video Of A Livecoding Experimental Music session
Tags: ruby, livecoding, showdev, video
Published: 2020-01-02 01:46:45



Here is a Video of a Livecoding Performance for Jamuary (A daily song writing challenge for January) Using a Livecoding environment named Sonic Pi, which is based in Ruby:

https://youtu.be/IuoTEUp_xxc

Playlist of the audio components can be found in the following soundcloud link:

https://soundcloud.com/llestreacha/sets/jamuary-illestpreacha-set
Give Streets Colors That Represent A Data Set
Tags: webdev
Published: 2020-01-02 01:40:34

Hello. I'm interested in customizing the streets that can be color coded based on a set of values that I assign. For example, a 1 mile street named 1st street intersects with another 2 mile street called 2nd street. 1st street will be colored BLUE for the first 1/2 mile, and then will change to GREEN for the other half, which is the part of the street that intersects 2nd street. What I'm trying to do is very similar to what google maps does by coloring road/road-sections in relation to the level of traffic on that specific part of the road. The cover shows an example of google maps color-coding their streets based on traffic congestion.
What to do when "Service page is currently unavailable." on AWS Console
Tags: aws, infra, devops, panic
Published: 2020-01-02 01:03:02

---
title: What to do when "Service page is currently unavailable." on AWS Console
published: true
description: When using the Amazon Web Services Console, you may run into a 500 error page stating "Service page is currently unavailable."  Here is a handy guide to approaching this problem.
cover_image: https://thepracticaldev.s3.amazonaws.com/i/2xn7zwddqb0qxr92ft9w.png
tags: AWS, infra, dev-ops, panic
---

**tl;dr**

Take a chill pill and wait for a few minutes(hours).  It's likely just a bug on Amazon's end.  I'm writing this because I couldn't find any other mention of this page when I googled.

**Explanation**

While going through [this tutorial to create a serverless stack architecture on AWS](https://serverless-stack.com/), I was required to create a Federated Identity through Cognito using the AWS Console GUI on us-east-1.

Having created the Federated Identity, I attempted to access it's Dashboard through the AWS Console but was greeted by a strange error.

![AWS Error Message](https://thepracticaldev.s3.amazonaws.com/i/2xn7zwddqb0qxr92ft9w.png)

When it comes to AWS services not working as intended, 99% of the time it's a User error problem, but this error message was a bit different than normal.  I had a Federated Identify on another account on another Region, and I was able to access that one just fine.  Something seemed wrong with us-east-1.

I tried changing regions, and then going back to us-east-1 and accessing the Federated Identity Dashboard, and sometimes I was able to access it.  But whenever I tried to edit settings, it would kick me back to the above 500 error page.

I tried googling for this specific error, but I couldn't find either 1) a fix or 2) any mention of this specific error page.

It turned out that it just took some time (about an hour for me), but then I was able to access the page as normal.  However, diagnosing problems on AWS can be hugely difficult for those like me who are not well versed in it, and that difficulty is compounded when the problem isn't even on your end.  So, I felt I should leave some sort of record for the next poor engineer who goes searching for this specific error.

(Of course, this is assuming you DIDN'T have any issues with the settings/code you have written.  As always, you should do a sanity check of your services and settings.)

Good luck, and happy coding!