teleren/devto huggingface dataset:
Day 3 - Simple React Todo List
Published: 2020-11-04 05:47:01

What can you do when you have grand plans for a big fancy project and time gets in your way? What do you do if you said you were going to release a project everyday and you find yourself coding past midnight, several problems in the app unsolved, falling asleep at your desk? Following the prudent advice of someone who successfully completed the 100 days of code- I went to bed. That means I'll do an extra project the next day I have free time- probably Saturday.

##App Overview
Here is a simple todo list app I built using just a couple of class-based components. Todos are stored in the main application component's state and added and deleted by methods in the class.

Something I've begun to realize is that there are basically zero tutorials or exercises in React I've run across that really require `create-react-app` and the lesson I followed today confirmed that when we were instructed to "delete all of the files in both the src and public folders". Tomorrow I go back, happily, to `nano-react-app`.

##Credits
FYI I built this following this wonderful Youtube tutorial: [link here](https://www.youtube.com/watch?v=h5crrOsLbpk)

It's election night in America. I'll be back tomorrow with a more substantial project. Friends abroad wish us luck :)

github repo - [link here](https://github.com/jwhubert91/100daysofreact/tree/master/day-3-actual-todo-app)
deployed app - [link here](https://100-react-projects-day-3-simple-todo-app.netlify.app/)
SCAM 2020!💩📮
Tags: github
Published: 2020-11-04 05:31:34

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

I am shocked after getting these type of messages, how can someone have this level of foolishness?💩 Such a rubbish guy who is asking to do all this in his parent's name. Such a retarded person

P.S - I don't know to hack 💻.
Float Math Calculator on XinFin XDC Network. 
Tags: blockchain, xinfin, xdc
Published: 2020-11-04 05:29:48

Deployed a Float Math calculator #smartcontract on XinFin XDC Network under injected web3 environment. 
Here is the deployed transaction link: https://explorer.xinfin.network/tx/0x956c631e923ce9f01cf0f0fb08d869d1b7eda1845b638a11c18318ed4b36c0a0
Move Over Traditional Advertising With PROMO International

Published: 2020-11-04 05:27:37

Businesses are engaged in this constant loop of seeking out new customers and retaining existing patrons. By using advertising, they are able to achieve this balance and expand their operations. 
When advertising, a businessperson has to select the correct format in order to do justice to the many dollars they are spending in this endeavor. They can choose between the traditional medium or opt for digital advertising. However, the latter is preferred over the former as the world is quickly shifting to the Internet and smartphones.

This trend emerges from the many benefits digital marketing has to offer. For example, collating data and gauging the impact of a digital campaign is a breeze when compared to traditional advertising.

Well, traditional advertising mediums possess their own set of advantages. For instance, ads in newspapers, flyers, and radio are a great way to incite interest at a local level. Similarly, television-based advertising allows marketers to reach national audiences at prime time.

However, traditional advertising loses out to its digital sibling as it is very difficult to ascertain the success of the campaigns. Similarly, traditional advertising is very rigid and mostly one-sided communication. This makes it less interactive and engaging. Finally, this advertising medium is an expensive affair and not eco-friendly.

On the other hand, digital advertising is a preferred go-to medium for businesses of all sizes, big or small. This medium allows marketers to track metrics easily and understand customer behavior accurately. Additionally, advertisers can reach customers quickly and capture their interest in a number of formats, including images, videos, gifs, etc.

Understanding this change in customer preferences and advertiser requirements, PROMO International is launching a dedicated application for this ecosystem. PROMO’s innovation will help unlock a new level in digital advertising, thereby allowing marketers to reach their customers directly.

PROMO International’s application will support a variety of rich content formats. This means that advertisers will relay advertisements in high-definition to customers almost instantaneously.

Another highlight of the PROMO platform is the interoperability function. By integrating other technologies, such as Machine Learning and the Internet-of-Things, PROMO will help advertisers improve operations and enhance engagement.

PROMO International is committed to transforming the advertising sector by introducing these new innovations. In order to speed up the development of this platform, PROMO will be raising funds through an Initial Coin Offering. Here, the PROMO International Coin (PIC), an **ERC-20 token**, will be available for sale. This token also arrives with utility functions, allowing holders to enjoy a variety of benefits. You can participate in the PROMO ICO today and support the launch of the next big thing in advertising. Visit [http://promo-int](https://landing.promo-int.com/).com for more information.
Node.js Crash Course - Part 7 - View Engines
Published: 2020-11-04 05:10:33

By using view engine, we can inject dynamic content in the html.
In this tutorial we are going to use **ejs** view engine.
#1. Installing ejs
`npm install ejs` will install the ejs package.

#2. Registering ejs
ejs have to be registered after we create the express app.
```
const app = express();
app.set('view engine', 'ejs');
```
By default the templates will be searched in `/views` folder. We can change the setting explicitly.
```
const app = express();
app.set('view engine', 'ejs');
app.set('views', 'myviews');
```
Then templates will be searched in '/myviews' folder.


#3. Rendering HTML Pages
Instead of `res.sendFile()` we are going to use `app.render()`
```
app.get('/', (req, res) => {
    res.render('index');
    // AND NOT res.sendFile('./views/index.html', ...);
})
```
`res.render('index')`: inside render we are going to place the filename without the extension.

#4. Passing Data into views
```
app.get('/about', (req, res) => {
    res.render('about', { title: 'About' });
})
```
Now, `title` will be accessible from templates in the following way:
```
<%= title %>
```
####if-else in ejs
```
<% if (blogs.length > 0) { %> 
        <h3><%= blogs.length %> posts to display %>
<% } else { %>
        <h3>No Blog Posts to display...</h3>
 <% } %>
```

####for loop in ejs
```
<% blogs.forEach(blog => { %> 
<%= blog.title %>
<% }) %>
```
To print data `<%= data %>` is used and to write logic `<% logic %>` is used.

####A shortcut
In app.js
```
app.get('/', (req, res) => {
    res.render('index', { numbers: numbers });
})
```
Instead of this, 
```
app.get('/', (req, res) => {
    res.render('index', { numbers });
})
```
Instead of `{numbers: numbers}`, we can use `{ numbers }`.

#5. Partial
Assume the following ejs file
```
<html>
<head>
    A long header
</head>
<body>
    <nav> 
        A complicated navbar
    </nav>
    <div>
       ...
       content of page 1
       ...
    </div>
    <footer>
        common footer
    </footer>
</body>
</html>
```
Now, suppose we have 50 such pages.

We can cut the nav, head, and footer as they are common in every page and place them nav.ejs, head.ejs and footer.ejs file respectively
```
<!--nav.ejs-->
<nav> 
    A complicated navbar
</nav>


<!--head.ejs-->
<head>
    A long header
</head>


<!--footer.ejs-->
<footer>
    common footer
</footer>
```
Then the structure of the 50 pages will be reduced to:
```
<html>
<%- include('./partials/head.ejs') %>
<body>
    <%- include('./partials/nav.ejs') %>
    <div>
        ...
        content goes here
        ...
    </div>
    <%- include('./partials/footer.ejs') %>
</body>
</html>
```
Building a text editor, like it's 1999, Remirror
Tags: opensource, react
Published: 2020-11-04 04:45:37

Remirror was started as a personal challenge while the maintainer, Ifi, was working full-time as a software engineer to answer the question: 

Would it be possible to build an editor that combined great performance with ease of use? 

It was also important to give users of all frameworks, the ability to build an editor by picking and choosing their desired building blocks.

What that means to me is that I want the code to guide you, to tell you what to do. So when you add an extension to your editor, it should immediately update reflect all the new commands that are available.

So if you add the bold extension, it should immediately allow you to run bold on the selected words. You don't have to look at the documentation. The documentation is in-line.

{% github https://github.com/remirror/remirror %}

Learn more about Ifi's story as a maintainer and how you can contribute to Remirror

{% youtube Zi7sRMcJT-o %}

Join us on the next Open Source Friday. Register with our [meetup group](https://www.meetup.com/GitHub-Virtual-Meetup/) to how you can get involved in open source.
Day 4 of 100 Days of Code
Tags: 100daysofcode, html, css, braziliandevs
Published: 2020-11-04 04:39:19

# Hello coders! How y'all doing?


On this [project][repo] i took a step back and review the basics of HTML and CSS. The result is not nice, because it's a beginner projects, but it was fun :D

### Connect with me:

[<img alt="ricardo.digital" width="22px" src="https://img.icons8.com/ios/452/internet.png" />][website]
[<img alt="ricardocas | LinkedIn" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/linkedin.svg" />][linkedin]
[<img alt="clickdoricardo | Instagram" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/instagram.svg" />][instagram]


[repo]: https://github.com/ricardo-cas/barbershop-alura
[website]: http://www.ricardo.digital/
[twitter]: https://twitter.com/rcosta_digital
[instagram]: https://www.instagram.com/clickdoricardo/
[linkedin]: https://www.linkedin.com/in/ricardocas/
Django Vs Flask 🤝
Tags: python, django, flask, codekaro
Published: 2020-11-04 04:37:40

“Django Vs Flask”

Which framework to use ? Which is better and easy to manage ?

All discussions regarding Django Vs Flask can be highlighted with a simple analogy.

“You want to move from point A to point B, consider Flask as a Bike and Django as a Car. Both can get you to your destination but with different approaches.”

Think about it, discuss with your team and get on using the framework which covers the solution more aptly !
Toggle fullscreen mode with Fullscreen API
Tags: webapi, webdev, javascript
Published: 2020-11-04 15:19:43

---
title: Toggle fullscreen mode with Fullscreen API
published: true
date: 2020-11-04 04:23:52 UTC
tags: webapi, webdev, javascript
canonical_url: https://phongduong.dev/blog/toggle-fullscreen-mode-with-fullscreen-api/
---
Fullscreen API allows you to represent your application on the full screen. You can use it for your video player or game. 

In this tutorial, we want to present the page in the full-screen mode by clicking turn on button

```html
<h1>Fullscreen API</h1>
<button id="on">Turn on fullscreen</button>
<button id="off">Turn off fullscreen</button>
```

## Check the mode is supported

First, you need to check whether the full-screen mode is supported first

```javascript
const fullscreenSupported = document.fullscreenEnabled;
```

It returns `false` if your browser doesn't support the full-screen mode or `fullscreen` feature is not allowed.

If the full-screen mode is not supported, you should show a notification for the user

```javascript
if (!fullscreenSupported) {
	const para = document.createElement("p");
	para.textContent = "Full screen mode is not supported";
	document.body.appendChild(para);
	onButton.style.display = "none";
	offButton.style.display = "none";
}
```

## Get the current fullscreen element

You can present any element in full-screen mode. To get the current element that is being represented in full-screen, you call `fullscreenElement` property of `document`

```javascript
document.fullscreenElement
```

It returns `null`, if the document is not in full-screen mode

## Turn on full-screen mode

You listen to the click event in the turn on button. In the event handler, you call `requestFullscreen()` of the element that you want present. It will return a `Promise` which is resolved after the full-screen mode is turned on. You need to check if the full-screen mode is supported and the mode is off.

```javascript
const onButton = document.getElementById("on");

onButton.addEventListener("click", () => {
	if (fullscreenSupported && !document.fullscreenElement) {
		document.documentElement.requestFullscreen();
	}
});
```

## Turn off full-screen mode

To turn off the full-screen mode, you listen to the click event of the turn off button. In the event handler, you call the `exitFullscreen()` method of `document`. It returns a `Promise` that is resolved after the mode is off. You need to check whether the mode is supported and the mode is on. 

```javascript
const offButton = document.getElementById("off");

offButton.addEventListener("click", () => {
	if (fullscreenSupported && document.fullscreenElement) {
		document.exitFullscreen()
	}
});

```

This is the Codepen demo for the tutorial

{% codepen https://codepen.io/phongduong/pen/JjKNPKx %}
Start Machine Learning With ...
Tags: machinelearning, python, datascience, codekaro
Published: 2020-11-04 04:22:01

"Machine Learning"
"Don't know what is Machine Learning"
"Don't know what happens in Machine Learning"
"Don't know if it is your cup of tea"

If you are still in doubt of what is Machine Learning or what actually happens in Machine Learning ?

[Teachable Machine](https://teachablemachine.withgoogle.com/) - A Google initiative to help people understand the gist of Machine Learning

[ML-Playground]
(https://ml-playground.com/) - An Open Source website to help you play around with various ML models

These 2 websites are at my top recommendation, whenever someone asks me what is Machine Learning.

Mention your resources, papers, books, videos or site you loved to start your ML journey.
What is Asp .Net?
Tags: dotnet, career, tutorial, computerscience
Published: 2020-11-04 03:54:54

ASP.NET | Open-source web framework for .NET Core can be referred to as an open source, cross-platform and high-performance web framework which is used to build web applications (that can be developed and run on Windows, Mac or Linux operating system) and services, IoT apps, and mobile backends.

When we talk about enterprise applications, all we can think of is ASP.NET | Open-source web framework for .NET Core. It was a long long time ago when customised applications with innovative and desired features was just a dream for an enterprise, as it lead to burning a hole in their pockets.

So, in order to reduce the higher costs as well as creating a customised web application with required features at the same time, Microsoft released its most prominent framework that is known as ASP.NET | Open-source web framework for .NET which later developed into ASP.NET | Open-source web framework for .NET Core.

So let’s discuss the various benefits of ASP.NET | Open-source web framework for .NET Core in detail.

1) High Performance

The best part is – Optimisation. In order to increase the performance, it automatically optimizes your code when you compile it. With the re-compilation, it optimizes the code directly and you need not change your code. ASP.NET | Open-source web framework for .NET Core’s actual performance is many times more than any of the famous framework implementations.

2) Easy Maintenance

It not only takes the lesser amount of code to create a web application but it is quite easier to effectively manage and maintain it. With ASP.NET | Open-source web framework for .NET coding, less is more! The developers can optimize the coding structure and make it with fewest statements possible, as the language demands less coding. And, lesser the coding, easier it is to maintain. Whenever there is lesser code, it becomes much easier to maintain automatically.

3) Supports Cross Platform

We can say that ASP.NET | Open-source web framework for .NET is a cross-platform which means that it supports all platforms. Be it Linux or Windows or Mac we can easily build applications which run smoothly on these platforms using ASP.NET | Open-source web framework for .NET Core. In simpler terms, the entire backend will be using the same C# code.

Meet The Experts For Better Guidence : https://nareshit.com/asp-net-mvc-online-training/
Step by step for javascript: how do I start?.
Tags: explainlikeimfive, newbie, beginers, tutorial
Published: 2020-11-04 03:54:53

Hi everyone, 

I did a really short and basic course on HTML, CSS and JS and the last one was not really clear to me. 
Now I am looking for a checklist or a to do list of how should I start studying JS on my own before I can look (or pay for) another course. 
Could you indicate me an ordered list of the path into learning javascript that worked for you? 

Thanks a lot!
Sayonara Python 3.5 🙏🏼
Tags: python, github, versioncontrol, codekaro
Published: 2020-11-04 03:45:48

Sayonara Python 3.5 !

As Larry Hastings confirms that there are no more PRs tagged to Python 3.5, the last stable release stands at version 3.5.10 !

Python 3.5, introduced many useful concepts like async I/O programming, “typing” a module and “@” operator, these things made the life of a python programmer easy.

We have seen a whole lot of amazing features being introduced to Python since Python 3.5.10 !

But, one could never argue that Python 3.5 was the dawn of showing the world the power it has !

As we move on to Python 3.9, I could never forget that my journey to programming started with Python 3.5 and with it’s intriguing features !
My First JavaScript Shitpost 💩📮
Tags: javascript, beginners, react
Published: 2020-11-04 01:21:58



I am currently going through Colt Steele's Udemy [Modern React Bootcamp](https://www.udemy.com/course/modern-react-bootcamp/) and there's an exercise that requires writing a method to remove an item at an index from an array.

Here comes my first JavaScript WTF: turns out there's no straightforward method to do it! Huh?! No nice remove() or removeAt()?! No cool utils library?!

I know I am late to this JS party and there are probably tons of questions and rants about it on the internet... 

StackOverflow [doesn't dissappoint](https://stackoverflow.com/questions/5767325/how-can-i-remove-a-specific-item-from-an-array) (I love how many upvotes this question has).

In a comment someone articulated pretty well what's on my mind:

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

At least, it seems, I am not the only one that can imagine a better world...

*** 

Anyway, I feel I am so rusty at basic algorithms that it's really a good opportunity for me to warm my brain up after months of not coding. Flex! 💪
ASP.NET MVC Online Training
Tags: dotnet, tutorial, career, computerscience
Published: 2020-11-04 03:34:22

We are providing ASP.NET MVC online training in our institute NareshIT. We are having the best and well trained experienced faculty to train you the ASP.NET MVC. By joining in this course you will get complete knowledge about ASP.NET MVC. we are giving 100% guidance in placement for our students.

ASP.NET MVC is an open-source software from Microsoft. Its web development framework combines the features of MVC (Model-View-Controller) architecture, the most up-to-date ideas and techniques from Agile development and the best parts of the existing ASP.NET platform.

course objective :

After completion of the MVC Course at Naresh I technologies, you will be expertise and eligible for:

Advance uses of MVC design.
Able to build Web application using MVC.
Work on MVC controllers and Action filters.
Implement security in ASP Dot NET MVC Application.
Create and use Model view as well as partial view.
Implement Web API in MVC.
Deploy and maintain the code.
Explore complex concept like areas, Bundles, Minimization, etc.
Handle the real-time Project independently.

Is MVC still relevant 2020?
Yes MVC is still very, VERY relevant today, as it was the solution of choice when building new project for quite a while. .net framework is not 100% out of date. The last release was within the last 6 months.

What is MVC life cycle?
At a high level, a life cycle is simply a series of steps or events used to handle some type of request or to change an application state. You may already be familiar with various framework life cycles, the concept is not unique to MVC. For example, the ASP.NET webforms platform features a complex page life cycle.

Is ASP NET MVC easy to learn?
ASP.Net MVC is not all difficult. It is very easy compared to Framework of any other languages. However you should have good skills and understanding of C#.

Should I learn ASP NET 2020?
Until the middle of 2019, ASP.NET has been being used as a server-side framework for web app development. But now, you can build SPA web apps with Blazor instead of using some client-side JS based framework like Angular or library like React. .NET definitely worth learning in 2020 because it is going to be the future.

Why we have to choose NareshIT?

• Real Time Trainers
• 100% Placement Assistance
• Small Training Batch
• Flexible Timings
• Practical Guidance
• Excellent Lab Facility
• Resume Preparation
• Hands on Experience
• Certification Support

Website : https://nareshit.com/asp-net-mvc-online-training/