teleren/devto huggingface dataset:
My React-TypeScript Cheat Sheet
Tags: webdev, react, typescript, cheatsheet
Published: 2020-10-05 12:53:49

Ever since I started using TypeScript, I can't stop using it. Sometimes finding the correct type and where you should import it from can be a real headache. Especially when building a ReactJS application. This blog post is a great chance to publicly document my most used React TypeScript types. I focus on functional components and react hooks.
The structure of the article is that each paragraph is a standalone tip.

To create a React TypeScript project, we can use Create React App:
```bash
npx create-react-app my-app --template typescript
```

There have been lots of talks about the right way to import React. This is the most updated way to do it:
```jsx
import React from 'react';
```

The return type of a functional component is `ReactElement`
```jsx
import React, { ReactElement } from 'react';
const Component = (): ReactElement => {
  return <></>;
};
```

If you want to extend the props of a native HTML element, you can use the generic class `HTMLAttributes`. Let's say I want to create a new button:
```jsx
import React, { HTMLAttributes } from 'react';

interface MyButtonProps extends HTMLAttributes<HTMLButtonElement> {
  ...
}

const MyButton = (props: MyButtonProps): ReactElement => {
  return <button {...props} />
}
```

Note that we use destructuring to forward the props to the button element.

The children prop is of type `ReactNode`.

React's events system uses its own types and not the native HTML events. Make sure to import the event from the react library. `import { MouseEvent } from 'react'`.

Pass the correct type to the `useRef` generic. If you want to create a ref to an input element:
```jsx
import { useRef } from 'react';

const ref = useRef<HTMLInputElement | null>(null);
```
The `ref.current` type will automatically be `HTMLInputElement`.

The same goes for `useState`.
```jsx
import { useState } from 'react';

const [myState, setMyState] = useState<boolean | null>(null);
```
If you provide an initial value in both cases, the type will be inferred implicitly.

When creating custom hooks make sure to explicitly set the returns type. Otherwise, TypeScript may infer incorrectly the types.

This is far from being a complete cheat sheet but rather documents the things I use the most. Check out this awesome cheat sheet for more information: https://github.com/typescript-cheatsheets/react.

<hr/>

_[Daily](https://api.daily.dev/get?r=devto) delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future._

[![Daily Poster](https://dev-to-uploads.s3.amazonaws.com/i/b996k4sm4efhietrzups.png)](https://api.daily.dev/get?r=devto)
Vowel Count with JavaScript
Tags: javascript, 100daysofcode, codewars, codenewbie
Published: 2020-10-05 12:51:37

{% youtube DMT6M7gHA0M %}

To solve this problem, we'll take 2 different approaches.
Enjoy the video 😀🙏

Also written version https://losseff.xyz/katas/020-vowel-count/javascript/
Cost to develop website like Udemy
Tags: websitelikeudemy, cloneofudemy, php, websitedevelopment
Published: 2020-10-05 12:46:06

Udemy is a marketplace for e-learning and teaching online. With the help of udemy students can learn and master new skills by learning from a huge library of over 55,000 courses taught by different expert instructors.

So having these much amount of potential market many wants to develop this kind of website. Let me tell you it’s not an easy task to get all features in first phase of website development. One needs to do continuous development and need to add new feature to enrich the user experience.

Here is the least of basic functionality one need, based on each page when he wants to launch a website like Udemy:

Home Page:

This Page will have Logo of the company. (Logo will be provided from client)

The development of page will have below details:

1. 3 full screen banners
2. Top Courses List
3. Big button for browsing different courses
4. Sign up or Registration button
5. Log In Option in Header Part with tutor registration and 
   sign up for students: => Student or Trainee Registration: 
   Name, e-mail, Password => Tutor Registration: Name, e- 
   mail, Password About Us Page:

In the development process of About Us Page will have details of the company.

This Page will have subpages which are mentioned below:

1. Mission and Vision
2. Team
3. Career
4. Press

Training Page:
Development of training page in which details for training service for any business will be given.

Affiliates Page:
Development of Affiliates page will be done in which details for affiliate program will be given.

Blog Page:
Development of blog page which will have list of different blogs.

Support Page:
Development of support page in which details for support will be given.

Tutor Dashboard:
Tutor Dashboard will have below details which needs to be developed:
1. Course Creation panel in which basic information of course and 2. summary of course will be added
2. Images
3. Promo video
4. Test Video
5. Add Lectures 7.Add Quiz
6. Ad d Project or Exercise
7. Price and Coupons
8. Manage Instructors
9. Student message
10. Analytics of Student Satisfaction
11. Manage student => Project submitted who applied for certification => Assessments of student who applied for certification => Provide Certificate

Student Dashboard:

Student Dashboard will have below details which needs to be developed:

1. List of registered courses
2. Download attachments or documents
3. Open Discussion
4. Project/Exercise submission
5. Take a quiz
6. Check Assessments
7. Apply for Certificate if tutor provides
8. Account setting

Admin Side Features:

1. Menu Hierarchy Management
2. Banner Management
3. Content Article Management
4. User Management
5. Tutor Management
6. Category Management
7. Courses Management
8. Static Page Management
9. Blog Management
10. Contact Us
11. Payment Management

Vibidsoft has expertise to develop this kind of website in the timeline of 2-3 months. The cost will totally depend on the features you are selecting. So don’t wait if you want to design and develop a clone of Udemy mail us on inquiry@vibidsoft.com.
React Community Survey 2020!
Published: 2020-10-05 12:42:43

---
title: React Community Survey 2020!
published: true
description: Help us make the new React docs and grow the community! The first official React Community Survey is up!
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/s6sv21gkgaar8hkw1jtx.jpg
---

We’re updating the official React documentation, and we want to learn more about you and how people in the community learn React. Please take our survey so we can build the best possible learning experience! Please take a moment to take our survey here: https://www.surveymonkey.co.uk/r/MK7DRZF

 ![Take the React community survey!](https://dev-to-uploads.s3.amazonaws.com/i/dp9rayxlw304o6yzqov3.gif)
Azure SDK with Go
Tags: go, qualitycode, 100daysofcode, codequality
Published: 2020-10-05 12:41:25

Working on Chapter 4 for Quality Code with Go. Yes, you can literally write cloud development code for ANYTHING, including ohhhh so fun stuff like Billing in Azure ;)

Check it out today if you're interested in a book fully based on writing quality code in Go! https://gum.co/ASyXy

![](https://i.imgur.com/ojYbHeB.png)
Feedback on my JavaScript project
Tags: javascript, beginners, discuss
Published: 2020-10-05 12:22:35

Hi there!

I'm making my first steps in learning javascript.

Would you like to take a look at my practice project and provide some feedback? 🙈

- I wonder what do you think about the functions and variable names. 
- As well as the overall structure of the app. 

It displays letters on the page and lets you practice typing. 

Here is the link to the app https://type.ptifur.digital

And here is the source code
https://github.com/ptifur/javascript-practice
AzureFunBytes Short - @Azure Datacenters, Regions, AZ's and SLA's
Tags: beginners, azure, tutorial
Published: 2020-10-05 12:18:27

This time we'll look at what components make up the Azure cloud including how datacenters are organized.

{% youtube kg53p8ZTtSk %}

AzureFunBytes! - Byte-sized content with a live Twitch show! 

Learn about Azure fundamentals with me!

Live stream is available on Twitch at 2 pm EDT Thursday. You can also find the recordings there as well.

https://twitch.tv/azurefunbytes
https://twitter.com/azurefunbytes

Join me, ask questions and learn about Azure!

Microsoft Learn: Azure Fundamentals - https://cda.ms/1jV 
Microsoft Azure: $200 Free Credit https://cda.ms/1tj
Microsoft Azure SLAs - https://cda.ms/1w5
Azure geographies - https://cda.ms/1w6
Regions and Availability Zones in Azure - https://cda.ms/1w7
Quickly move from "master" to "main" branch at Github
Tags: github, git, dailydotdev, beginners
Published: 2020-10-05 12:18:27

On this article, I'll show how to update your default branch from "master" to "main".

## Why do this?

I really recommend you look for more about and take your own decisions about, in this article I'll focus only on changing the default branch and don't go deeper into the motivation about it.

The new repositories created on Github will be set to "main" as default, it started October 01st, [read more about it] (https://github.blog/changelog/2020-10-01-the-default- branch-for-newly-created-repositories-is-now-main /).

## Set git init to "main"

To set as default to initialize repositories with `main` you can do the following:
```bash
$ git config --global init.defaultBranch main
```

Or add to your `.gitconfig` like [this](https://github.com/helderburato/dotfiles/blob/main/git/.gitconfig)

## Rename Branch

Let's rename your current "master" to "main" branch with the following code:
```bash
$ git branch -m master main
```

### tl;dr
Rename a branch (must not have it checked out to do this):
`git branch -m old_branch_name new_branch_name`

After rename, push to the remote origin:
```bash
$ git push origin main
```

You'll see something like that:
![Screen Shot 2020-10-05 at 8.59.24 AM](https://dev-to-uploads.s3.amazonaws.com/i/06vvizy4hoaradr4zras.png) 

## Github: Settings

1. Go to your repository at Github and access the `Settings` tab `https://github.com/<username>/<repository>/settings`
2. Choose `Branches` on the sidebar
3. Update from `master` to `main` like the following image:
![Screen Shot 2020-10-05 at 9.03.47 AM](https://dev-to-uploads.s3.amazonaws.com/i/eldj77dvfyz7yjocbur0.png)
4. It will show an alert modal, you just need to accept then:
![Screen Shot 2020-10-05 at 9.04.23 AM](https://dev-to-uploads.s3.amazonaws.com/i/x1rmzepe66c4shph1u68.png)
5. Now, if you go to the root link at your repository you'll see the current default branch:
![Screen Shot 2020-10-05 at 9.05.13 AM](https://dev-to-uploads.s3.amazonaws.com/i/smr1t93zk625zzz1khjg.png)
6. Notice has 2 branches in this case, one is the `master`, you can delete with the following code:
```bash
$ git push --delete origin master
```
7. Tadah! Now you have just the `main` and deleted the `master` branch.
![Screen Shot 2020-10-05 at 9.06.59 AM](https://dev-to-uploads.s3.amazonaws.com/i/by9oonbr74aaspf9fsfo.png)

## Wrapping Up

I updated some of my personal repositories and I think it can be helpful for some people.

If it helped you in some way, feel free to comment below or share the article.

Enjoy Programming! :D
Using Blazor? Consider MVVM
Tags: csharp, blazor, mvvm
Published: 2020-10-05 12:11:42

With the first glance at [Blazor](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor) - a framework for building interactive client-side web UI with .NET, I have that idea - it's perfect for MVVM.

MVVM states for Model-View-ViewModel pattern.
![General MVVM Idea](https://dev-to-uploads.s3.amazonaws.com/i/u34bpm9qjp9k791578mo.png)

I started with MVVM on WPF apps many years ago and spent a lot of time with MVVMLight and Xamarin, so I immediately saw an advantage of it for Blazor as well.

1. Like in WPF, Blazor has the most important feature - data binding. In short, you have some data, typically in a collection of some sort, and you want to display it to the user. You can 'bind' your view to the data.
2. Like in WPF, Blazor has two parts, the `.razor` page which describes your GUI in HTML, and the code-behind `.razor.cs` that is tied to it.

This makes Blazor MVVM default for me. So I picked some base components from old MVVM projects which I want to share.

This is ComponentBase which I use for MVVM everywhere.

{% gist https://gist.github.com/xakpc/6d15b7b10ac9d01fcf9dbe30e89fcde8 file=ContextComponentBase.cs %}

The `DataContext` is quite basic, we only should ensure to initialize it only once for `ServerPrerendering` mode because it will call `OnInitializeAsync` twice due to, well, pre-rendering.

{% gist https://gist.github.com/xakpc/6d15b7b10ac9d01fcf9dbe30e89fcde8 file=ViewModelBase.cs %}

The only problem here is JavaScript. You cannot use js methods in `OnInitializeAsync`, and data initialization in `OnAfterRender` looks wrong to me (at least it's not what docs propose).

And there are things like js-loading indicator which need to be started if the page loaded but the data not.

Much confusing... For now, I simply move all JS initialization to `OnAfterRender` permanently.

And how you would solve the JS problem in the MVVM pattern?
Daily Developer Jokes - Monday, Oct 5, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-10-05 12:00:24

---
title: "Daily Developer Jokes - Monday, Oct 5, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Monday%2C%20Oct%205%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259a6b60d2.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
What's the best tool for automatically ignoring long email threads about tech buzzwords?

"Block-chain"
 -->
How to Print Pages in Reverse Order in Excel Office 365?
Tags: kutoolsexceltutorial, printpagesinreverseo, kutools
Published: 2020-10-06 08:54:22

---
title: How to Print Pages in Reverse Order in Excel Office 365?
published: true
date: 2020-10-05 11:57:23 UTC
tags: KutoolsExcelTutorial,PrintPagesinReverseO,Kutools
canonical_url: https://geekexcel.com/how-to-print-pages-in-reverse-order-in-excel-office-365/
---

In this article, you will understand the steps to **Print Pages in Reverse Order in Excel Office 365** using **Kutools.** Let’s jump into this article!! Get an official version of **MS Excel** from the following link: [https://www.microsoft.com/en-in/microsoft-365/excel](https://www.microsoft.com/en-in/microsoft-365/excel)

**Note:** [kutools for Excel](https://geekexcel.com/get-kutools-for-ms-excel-2019-2016-2013-2010-2007-office-365/) has more than 180 features which are used to complete the difficult task with several clicks. If you want to use Kutools, you need to install it from Excel’s official website.
## Steps to Print Pages in Backward Order:

To print pages in backward order, do as follows.

- On the **Kutools Plus Tab, select** the **Printing** option, **choose** the **Print Pages in Reverse Order** option from the drop-down option.

!["Select](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/10/Select-the-Print-Pages-in-Reverse-Order-option.png)

- It will open the **Print Specified Pages** dialog box.
- **Range section** – You need to specify the pages that you want to print. By default, the **All pages** option is selected.
- **Copies section** – You need to specify how many copies you will print.
- You need to make sure that the **Print in reverse order box is checked**.
- Then, **click** the **Print** button to start printing the pages.

## Wind-Up:

In this short article, you can clearly understand the steps to **Print Pages in Reverse Order in Excel Office 365** using **Kutools.** Leave your **feedback** in the comment section. Thanks for visiting **[Geek Excel.](https://geekexcel.com/)** Keep Learning!

## Read Also:

- [Count the Times a Word Appears in a Cell or a Range in Excel Office 365!!](https://geekexcel.com/count-the-times-a-word-appears-in-a-cell-or-a-range-in-excel-office-365/)
- [How to Extract Substring Between Two Texts in Excel?](https://geekexcel.com/how-to-extract-substring-between-two-texts-in-excel/)
I just want to launch the video call every 30 seconds.
Tags: android, java, agora
Published: 2020-10-05 11:53:20

Hello everyone, I hope you are well. 
I'm starting in android with java and I have a problem with my video call application(I use agora).
I just want to run this method three times to restart my video call.
I'm already able to use the video call but now I want to stop it and restart it every 30 seconds.
Could someone please help me?
Thank you for answering me.

// to launch 
private void initEngineAndJoinChannel() {
        initializeEngine();
        setupVideoConfig();
        setupLocalVideo();
        joinChannel();
        stopByMoment();
    }

// to stop
public void stopByMoment(){
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                leaveChannel();
            }
        }, 1000 * 30);
    }
How Blockchain Could Help Instagram
Tags: blockchain, codenewbie, todayilearned, startup
Published: 2020-10-05 11:44:54

Founded in 2010 by two software engineers, Instagram is a photo and video sharing with a lot of promise. The social network, with a billion monthly users, continues to lead the market. Similar Web gives it a ranking of 11 for popular mobile apps.

<h1>The Perfect Environment for Entry into the NFT Space</h1>

Instagram appears to have no shortage of innovation and dynamism as recent events show. Recently, TikTok got a bad rep for the age range of many of its readers. As the privacy and ethics of TikTok were put under question, more people opted to use Instagram Reel.


<h1>Is there a Future for Decentralized Social Media</h1>

Some suggest that it is not a requirement to have hundreds of thousands of followers in order to get very high views on TikTok. Despite the popular belief that going viral on TikTok is much easier than going viral on Instagram, more people are choosing to use Instagram to gain followers.

With the guidance of Facebook, Instagram has become a greater citadel of opportunities for people around the world to form valuable connections. Since starting a decade ago, Instagram has grown from strength to strength. The integration of blockchain to its operations may serve to further promote the continued success of the social network.

The Instagram Market and Blockchain
Instagram is an ecosystem that could benefit greatly from the use of blockchain. An ecosystem which contributes to the betterment of its users through a tokenized community could benefit significantly from the following:

📱 Better copyright management

📱 Improved privacy policies for users

📱 Greater transparency for users

Across the world, digital nomads roam, some physically and some through their phones. With a tokenized economy on the blockchain, Instagram could redefine its user experience for the better, further accelerating the rapid growth of its user base.

<a src="https://neptuneloop.com/2020/08/22/how-blockchain-could-help-instagram/">Source: Neptune Loop</a>

Photo by Solen Feyissa on Unsplash
Day 21 - CSS Illustration Challenge
Published: 2020-10-05 11:40:22

This challenge tested my skill in recreating an image style guide by using only CSS & HTML. The level of details required to build the phone chat was surprising!


## What I Learned
I was able to build on my skill of creating background images with wrappers.

## How This Will Help Me
It is a great way to get more creative with minimal shapes!
Push Notifications in App Development: 70+ Ideas to Get Started
Tags: pushnotifications, appdevelopment
Published: 2020-10-05 11:34:23

🔔 Choose the right push notifications for your app development project with this complete guide 💥 We've got 70+ ideas and our use cases to help you get started
https://apiko.com/blog/push-notifications-for-your-project-development-70-ideas/
Upgrade Visual Studio Code on Linux
Tags: vscode, ubuntu, debian
Published: 2020-10-05 11:22:39

VS Code is a great IDE with new features released every other week. Its advisable to keep up with the updates.

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

If you are using Windows / Mac VS Code is smart enough to update itself on click of a button.

For Linux (debian/ubuntu) users Upgrading VS Code is a two step process.

**Step 1 : Download .deb file to you local folder (~/Downloads)**

code.visualstudio.com

Step 2 : Open Terminal

```
$ cd ~/Downloads

$ sudo  dpkg -i  code_1.filename_amd64.deb
```

Example latest version as of today is

```
$ dpkg -i code_1.49.3-1601661857_amd64.deb
```

**If you are using RHEL / CENTOS**

```
$ sudo dnf install <file>.rpm
```

**For upgrade**

```
sudo rpm -U  <file>.rpm
```
How to sort tuples in Python ?
Tags: python, tuples
Published: 2020-10-05 11:12:04

Tuples are immutable, but there is a simple way to sort them.

Convert the Tuple to List by using sorted function
then cast the List to Tuple.

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

Source : with lambda examples

{% medium https://medium.com/@gchandra/how-to-sort-tuples-in-python-9ace22a06893 %}