teleren/devto huggingface dataset:
Arduino Calculator
Tags: machinelearning, defhacks, csharp
Published: 2021-06-27 07:56:19

Hi! I am a Participant at the Def Hacks Worldwide 3.0 and I have made a Calculator using Arduino. It is a Machine Learning based project where you follow the circuit diagram and you code and in this project C++ and C programming languages have used.

More Info:-
GitHub Repo- https://github.com/Yeshovir-04/Arduino-Calculator

The GitHub Repository will have every thing that you need for the project like Code, Circuit Diagram, and Video Tutorial.
HTML Tip: Automatically open all links in new tab in HTML
Tags: html, css, javascript
Published: 2021-06-27 07:54:12

Did you get tired of manually adding target="_blank" in all the **<a>** tags in your HTML webpage?
or
Have you ever forgotten to add target="_blank" in all the **<a>** tags in your **HTML** webpage?

Well, there is a native HTML tag to handle such cases automatically. You don't need to manually add **target="_blank"** in all the **<a>** tag.

Just add **target="_blank"** in the base tag, it will open in a new tab for all the link present in the webpage.

{% twitter 1409053884794818564 %}


I post very frequently on twitter related to frontend tips.
Support my content by following on 
[Twitter - https://twitter.com/frontend_jsx](https://twitter.com/frontend_jsx)
[Instagram - https://www.instagram.com/frontend.jsx/](https://www.instagram.com/frontend.jsx/)
Arduino Calculator
Published: 2021-06-27 07:51:41

Hi! I am a Participant at the Def Hacks Worldwide 3.0 and I have made a Calculator using Arduino. It is a Machine Learning based project where you follow the circuit diagram and you code and in this project C++ and C programming languages have used. 

More Info:-
GitHub Repo- https://github.com/Yeshovir-04/Arduino-Calculator

#The GitHub Repository will have every thing that you need for the project like Code, Circuit Diagram, and Video Tutorial.
How does Hoisting Actually Work in JS?
Tags: javascript, beginners
Published: 2021-06-27 07:45:56

####What Is hoisting?
Hoisting is the ability to access functions and variables before they are initialized. Most people seem to think that JS moves the code to the top of the file. But that is not the case. Let us figure out how JS makes hoisting possible (it all goes back to the execution context).

####How does variable and function hoisting work in JS?
As we have seen in first part of the series, variables are assigned a value of *undefined* while functions are copied wholly in the memory allocation phase. 

Let us see an example with code below. In the first console.log(sayhi), the function is not invoked so the whole function, not the returned value, is printed in the browser. In the second console.log(x), the browser prints *undefined* while the third console.log(x) prints 1. The reasoning behind this should be familiar to you if you read the first part of this series. 

```js
console.log(sayhi); // prints 'hi'

console.log(x); // undefined
var x = 1;
console.log(x); // 1

function sayhi() {
  console.log('hi');
}
```

This whole process works this way because JS, in the memory component phase, copies functions and assigns *undefined* values to variables in the global object which is also known as *window* in the browser. 


####How does hoisting work for arrow functions?
Let's see an example.

```js
sayHi(); // TypeError: sayHi is not a function
var sayHi = () => {
  console.log('hi');
}
```
```js
sayHi(); // hi
function sayHi() {
  console.log('hi');
}
```
As we can see in the first example above, sayHi is a function but is declared as a variable instead of a function. We know that JS saves variables with a value of *undefined* which is why sayHi() cannot be invoked before sayHi() is declared. But if sayHi is declared as a proper function then sayHi() can be accessed before it is declared because, once again, JS copies the whole function before the code is executed.
JavaScript Interview Question #50: How does Intl.Collator work in JS
Tags: javascript, webdev, beginners, codenewbie
Published: 2021-06-27 07:33:05

![javascript interview question #50](https://learn.coderslang.com/js-test-50.png)

What is `Intl.Collator` and how does it work in JS? What’s the difference between two sorts? What will be logged to the console?

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

The `Intl.Collator` object allows you to compare strings with regard to locale and internationalization.

Normal sort compares strings character by character using ASCII codes. First, there will always appear strings that start with capital letters, and only then, the ones that stat with small letters.

```javascript
console.log(['A', 'Z', 'a', 'z'].sort()); // ['A', 'Z', 'a', 'z']
```

`Intl.Collator` solves this problem and several others. For example, in German, the letter `ä` comes after ` a`, and in Swedish, it’s at the very end of the alphabet, after `z`.

We can select the desired locale and get a sorted array of strings according to all the rules of that locale.

```js
console.log(['b', 'a', 'z', 'ä'].sort(new Intl.Collator('de').compare));
console.log(['b', 'a', 'z', 'ä'].sort(new Intl.Collator('sv').compare));
```

```bash
['a', 'ä', 'b', 'z']
['a', 'b', 'z', 'ä']
```

---

**ANSWER**: Two sorted arrays will appear on the screen. The first will be collated according to the rules of the `en` locale for `Intl.Collator`. The second sorting of strings will be case-sensitive. At the beginning, there will be words starting with a capital letter, and words with small letters at the end.

```javascript
['America', 'apple', 'bloom', 'Boston', 'zebra']
['America', 'Boston', 'apple', 'bloom', 'zebra']
```

[Learn Full-Stack JavaScript](https://js.coderslang.com)
The out-of-the-box Sign-in / Log-in package of Vue and firebase auth, with User management pages is available 
Tags: vue, firebase, javascript, frontend
Published: 2021-06-27 07:25:01

---
title: The out-of-the-box Sign-in / Log-in package of Vue and firebase auth, with User management pages is available 
published: true
description: 
tags: vue, firebase, javascript, frontend
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6io2qcq9jzkgc8j8174.png
---
Hi there,

I've created all in one vue package of login and user management with firebase ui as [vue-faui-user-fe2](https://www.npmjs.com/package/vue-faui-user-fe2).

Any comments (including critism because it is so important to improvement) are welcome, thank you!
This code Crashes chrome tab #1
Tags: javascript, chrome, exploit
Published: 2021-06-27 07:09:48

Yes this is NOT a `while()` loop crash.
Sorry, I was busy making apps - couldn't post :(

>####This is part 1, the second one is being investigated, & ACTUALLY Crashes the browser window! 

> Error: Out of memory.


#Result of A list which has 10 million items in it! 

You try this code in jsfiddle/tab.

code: 

```javascript
var list = [];

setInterval(() => {
    list.push("crash")

    list.forEach(item => {
        list.push(item);
    });
});
```
Best Portfolio For Developers For Getting Hired In Company
Tags: career, python, django, portfolio
Published: 2021-06-27 06:59:25

Hello Devs, in this post I'm gonna tell you about how to make the best portfolio for developers, that increases your chances for getting hired in a company, Make a best portfolio so that your employer and company is impressed by just seeing your portfolio if your portfolio is looking good and awesome so people think if this person portfolio is this much better and good, so how much better work he can do for us and your portfolio also increases your chances for a high salary and always remember people judge you by your work and your projects, so make the best portfolio for yourself and impress everyone.

I'm gonna tell you some key points in your portfolio that attract everyone.

My Portfolio:- https://shivamrohilla.herokuapp.com/
Linkedin:- https://www.linkedin.com/in/shivamrohillaa/

1) A good website template or theme.

![Screenshot 2021-06-27 at 09-34-47 Shivam Rohilla Home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9k1rc4c7oapjgtin1pq.png)
 

Always choose the best theme, if you are a designer so you can easily make the best theme but if you don't know about designing or HTML, CSS, JS so you can download free templates and design the portfolio and enter your personal information and your skills.

2) Skills

![Screenshot 2021-06-27 at 09-36-24 Shivam Rohilla Home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qk4kzz18oet9rm7z78j.png) 

Your skills are the most important things in your portfolio. Show off your skills on your portfolio.

3) Bio/Information

![Screenshot 2021-06-27 at 09-36-08 Shivam Rohilla Home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6srogbfmc2c8d6v37fx.png)
 

Mention your complete information in the portfolio and your studies or graduation information, so that people know about you.

4) Experience
Mention your personal experience and total experience in the portfolio so that if someone wants to hire you so he knows about you very well. 

And the most important thing is your projects.

5) Projects
![Screenshot 2021-06-27 at 09-37-36 My Portfolio Projects](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cnbk04q7l0ustjenw62c.png)
 

Please mention your projects in your portfolio so people can see your projects and that's the main feature that increases your chances of getting hired in the company and also increase your salary.

6) Resume
This is the most important feature in your portfolio, add a PDF file of your resume and create a download link or button in your portfolio so that companies can download your resume and contact you and it increases your chances of getting hired in the company.

Always remember companies just want work from you that's it, so express or show off your work or your skills as much as possible.  

Thank You

Shivam Rohilla | Python Developer
Gods plan
Published: 2021-06-27 06:48:55

Stressed out my pajamas right now! When first hearing about react and completing the study work for it i thought self "this is easy peasy lemon squeezy"....but after working on it i noticed it is very tedious in a lot of areas. My goal going into it was to write out an idea of what i wanted to do it on and then what code would be used. I first decided to do a weather app but that quickly went down the drain because trying to incorporate CRUD into it was taking too long for me to finish it on time. So i ended up changing my plan and going with a book search/data saver. It was probably the best idea i had judging by how easy it was to connect everything together, One of the struggles i had was that my console was running really slow and it made my whole computer crash....a big bummer and also very stressful but all in all i regret nothing. I have learned how to connect a backend and why you need one and also how to use react! yay....
Day 9 of #100DaysOfCode!

Tags: javascript, codenewbie, 100daysofcode, beginners
Published: 2021-06-27 05:09:10

<h2>Today's progress</h2>
Learned a little bit more about the `reduce()` method.

<h2>What I learned</h2>
The `reduce()`executes a provided function for each element in an array Reducing the array to a single value. The return value of the function is stored in accumulator (result/total).

For better explanation, let's go ahead dive into some code.

We have this array of numbers and inside the array we have all of these elements and we want to get the sum of all the elements. A typical `for loop` iterating over each element and adding them can solve this.

In addition, we can use the `reduce()` method to sum up all the elements in the array and returning a single value.

```javascript
let numbers = [1, 2, 3, 4, 5]

let total = numbers.reduce(function(sum, number){
    return sum + number;
})

console.log(total)
//output: 15
```

In the code above we have the `reduce()` with a `callback function` that takes in *two parameters*. The first parameter being the sum (accumulator), which is the accumulated value. The second parameter, `number` is the `currentValue` being processed.

Here's a good example of what is happening under the hood.

```javascript
let numbers = [1, 2, 3, 4, 5]

let total = numbers.reduce(function(sum, number){
    console.log("the accumulator is: " + sum, "the element's value is " + number)
    return sum + number;
})

//output: the accumulator is: 1 the current value is 2
//        the accumulator is: 3 the current value is 3
//        the accumulator is: 6 the current value is 4
//        the accumulator is: 10 the current value is 5
```

Using the same code example as before but this time adding a `console.log` before our `return` statement. So we can visually see what is happening in each iteration.

Notice on the first iteration the `accumulator` is the value `1` and the second parameter `current value` is `2`. Then on each iteration the `accumulator` becomes the sum of the previous `accumulator` and `current value`.

<h2>Filling in the gaps</h2>

The complete syntax for `reduce()` is as follows:

```javascript
array.reduce(function(accumulator, currentValue, index, array){...})
```
<h2>Simply put</h2>
The `reduce()` method helps to return a single value from an array, as a result of sequentially processing the results of the previous elements.
Basic Student Information System In Django with source code
Tags: django, python, career
Published: 2021-06-27 04:57:39

Hello Devs, this is basic student information system in python and django, and this is for beginners.

Live link:- https://studentsinform.herokuapp.com/
Github Repo:- https://github.com/ShivamRohilllaa/students

Features:

Add Student Data Model Popup
Pagination

![screencapture-studentsinform-herokuapp-2021-06-18-20_26_28](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nv5fz77tkyw4mh2ogg59.png)

![screencapture-studentsinform-herokuapp-2021-06-18-20_27_01](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rk6m4d5g440o2rpn34u7.png)
  
Thank you
Shivam Rohilla | Python Developer
Solidity in depth I
Published: 2021-06-27 04:46:41

Solidity is the main smart contract language. This is used to develop smart contract that deploy in Ethereun network and others forked Ethereun blockchains.

But, what is a smart contract?

The smart contract is a code that run into de Ethereun Virtual Machine (EVM), deployed into the Ethereun Blockchaing and run in it. With the smart contract the developer can run  transaction logic that perfome transferences, storage data, user validation and a lot of others thinks.

In this article I explain about simple contract development in Solidity Language.
In brief Solidity sintax is based in C++ and javascript but have to several unique sintaxis.
Not confuse the similar sintaxis to other language with how to run the solidity binaries code, is very different.

Well, enought talk and we write the code.

```
//SPDX-Licence-Identifier: GPL-3.0
pragma solidity >=0.7.0 <0.9.0;

/**
 * @title Storage
 * @dev Store & retrieve value in a variable
 */
contract Storage {

    uint256 number;

    /**
     * @dev Store value in variable
     * @param num value to store
     */
    function store(uint256 num) public {
        number = num;
    }

    /**
     * @dev Return value 
     * @return value of 'number'
     */
    function retrieve() public view returns (uint256){
        return number;
    }
}
```
The firsts lines are the Licence and the solidity compiler version. The last line is very important to avoid some issue  with different language features between compiler versions.

The keyword **Contract** indicate the contract inself. 
Keep in mind that Solidity is a Object Oriented Language and the contract have to similar features that classes.

The next line **uint256 number**;  indicate the variable declaration , Solidity es a strong typed language , in this case the variable **number** is a 256 bits int.

Declare functions in solidity we use the following sintax

```
function functioName(type2 arg1, type3 arg2...) <visibility scope> <other attributes> returns(type1, type2, type3...){
   //function body
}

```
 
In this contract there are two fuctions, the first save some integer in number variable and the second read this variable and return it.

Despite being a very simple code it apply several Solidity importants features.

The storage function save some integer in **number** variable, this integer save into the blockchain and needed run a blockchain transaction, this transaction spend gas (the cost of the transaction). Beside the function retrieve don't consume gas because only read the variable from blochchain (the atribute _view_ allow this feature).

Do you view the attribute **returns**? How the name  indicate is the return type, but unlike other language solidity _**allow retuns more that one variable in the same function!!**_ :)

How we run this code?

The easiest way is using the Remix Web IDE (http://remix.ethereum.org/), in fact this example I get from this ide.

How we run this code in Remix Ide?

In the next article :), but while I propose that you try use the Remix IDE and research it.

See you!!
Primer to Games using React JS!
Tags: react, javascript, node, praveenscience
Published: 2021-06-27 04:45:59

---
title: Primer to Games using React JS!
published: true
description: Let's create an Escape Room adventure using just React JS and some ideas!
tags: ReactJS, JavaScript, NodeJS, PraveenScience
cover_image: https://i.imgur.com/6gYnjhd.jpg
---

Let's create an Escape Room adventure!

Games are awesome. How about coding games? Puzzle games? Virtual Escape Room Puzzle game? I love them. Here I'll be doing in Live, how we can make an escape room puzzle game with the features like:

- Quizzes
- Hidden Objects
- Colour Changers

All using React and you need to solve them to solve the game.

Here's the trailer within one and a half minutes:

[![Trailer](https://i.imgur.com/6gYnjhd.jpg)](https://youtu.be/vV-cRVu0BGY)

And here comes the main picture:

[![Main Picture](https://i.imgur.com/6gYnjhd.jpg)](https://youtu.be/NNieNlYMS0o)
#100DaysOfCodeChallenge - Crop Management Information System - Day 4
Tags: 100daysofcode, flutter, dart
Published: 2021-06-27 03:42:14

## Recap
On [Day 3](https://dev.to/curtlycritchlow/100daysofcodechallenge-crop-management-information-system-day-3-5b45) I created the Farmer registration form and highlighted the need for me to understand layout and constraints in more detail.

## Overview

In this post we will pause building the Crop Management Information System and discuss layout and constraints using the Row and Column widget.

## Row and Column

Row and Column are two of the most commonly used layout styles, they both take a list of child widgets.

Two important terms to keep in mind when dealing with layout are Constraints and size.

### Constraints vs Size

Constraints are concerned with minimum height, maximum height, minimum width and maximum width. Size is the actual height and width a widget takes up. To illustrate, the parent widget tells its children how big or small it can be, the child widget then decides what size it will take given the constraints provided by its parents.

Row and Column widgets are special. If they have constraints passed into it by its parents, they are as big as possible within those constraints. If no constraints are provided by its parents they will be as big as the combined size of its children.

### Infinite size error

Infinite size error is a common error occurrence when working with row and column. It occurs when the children of an unconstrained row or column is also unconstrained. This create a sort of circular reference, ie The column or row is trying to be as big as its children when the children are trying to be as big as the column or row.

In context of our Crop Management Information System app, this error occured when Placing a `TextFormField()` widget inside a `Row()` widget. 

![Farmer Form](https://drive.google.com/uc?id=1uPmdHiSXX34SxbJyy-d7V29XPL6nLwor)

Specifically, the `InputDecorator` of the `TextFormField()` has an unbound width while a row can be infinitely wide.

A common solution to the Infinite size error when using row and column is to wrap each unconstrained child in an [expanded widget](https://api.flutter.dev/flutter/widgets/Expanded-class.html). You can read more about it in this [flutter article](https://flutter.dev/docs/development/ui/layout).

## Wrap Up

When troubleshooting our code it is important to understand why the error occurred in the first place. The more we understand what is occurring "under the hood" of the flutter SDK the better equipped we are at troubleshooting our errors.

## Connect with me

Thank you for reading my post. Feel free to subscribe below to join me on the #100DaysOfCodeChallenge or connect with me on [LinkedIn](https://www.linkedin.com/in/curtlycritchlow/) and [Twitter](https://twitter.com/CritchlowCurtly).
Use get_object_or_404 in Django to write lesser code
Tags: django, python
Published: 2021-06-27 02:49:32

Django has a few nifty shortcuts that can be used to make your life easier. The get\_object\_or\_404 method is one of them.

I always believe that as a software developer, one should write as little code as possible and this method helps you do the same.

## What is get_object_or_404 in Django?

To put it simply, it is a shortcut that can save you the trouble of writing redundant code every time you need to query a particular object from the database.

An API that needs to retrieve an object from the database usually works in this way: If the object exists, return it and if not, return a 404 status code.

For the sake of an example, let us consider a model called Record that is defined as follows:

    from django.db import models
    
    class Record(models.Model):
      # id will be created automatically
      name = models.CharField(max_length=255)
      created_at = models.DateTimeField(auto_now_add=True)
      is_deleted = models.BooleanField(default=False)

If you had to write an API to fetch a particular Record object using the id field. It would look something like this:

    from rest_framework import generics
    from .models import Record
    from django.http import Http404
    
    
    class RecordRetrieveView(generics.RetrieveAPIView):
        serializer_class = RecordSerializer
    
        def get_object(self):
            try:
              return Record.objects.get(id=self.request.query_params['id'])
            except Record.DoesNotExist:
              raise Http404()

These 4 lines of code can be converted into a single line of code using get\_object\_or\_404:

    from rest_framework import generics
    from django.shortcuts import get_object_or_404
    
    class RecordRetrieveView(generics.RetrieveAPIView):
        serializer_class = RecordSerializer
    
        def get_object(self):
            return get_object_or_404(Record, id=self.request.query_params['id'])

## TL;DR

To retrieve objects from a database, use get\_object\_or\_404 as opposed to getting the object using the ORM way and throwing an exception if it does not exist. This method pretty much does the same thing under the hood.