teleren/devto huggingface dataset:
Shaking Up The Christmas Greetings With A-Frame...
Tags: html, javascript, aframe, virtualreality
Published: 2021-12-25 13:52:51

Let me try to sell an idea here. The price? Absolutely free. Well, besides perhaps some learning, which can be free, and comes with the guarantee of lots of fun... I promise!

So, this idea...

You know how every year, people are writing Christmas cards, you may be receiving some as well...

Wouldn't it be cool to gift someone some novelty as well as the Christmas greeting?

What I'm suggesting here can be described in 3 words:

**"Christmas VR Scene"**

So, why am I suggesting this idea?

Well, last year, I made a VR scene as part of a Christmas arts and crafts competition, and it's not like there was a rule against making anything digital, so 🤷‍♀️

It was a lot of fun, especially when I won and bought myself a clipboard from Etsy (the last one got a bit worn from the ctrl+C and ctrl+Ving) 😎

Not only was making the VR scene fun, but I got to practice my A-Frame skills!

If you've not heard of A-Frame before, it's essentially an open source framework that you can use to make VR scenes in the browser, meaning you can still enjoy these VR scenes even if you don't have a VR headset! 

All you have to do is import it just like you would any other library or framework (such as via CDN or npm), and then you can use the elements that A-Frame has inside a HTML file to make your own VR scene!

Using my skills makes me happy, and I'm even happier when what I make makes other people happy!

On that note, I'd love to show you the [Christmas VR scene I've made for this year](https://cbridges851.github.io/christmas-2021/?name=DEV%20Community!)!

I recently completed the [A-Frame course on Codecademy](https://www.codecademy.com/learn/learn-a-frame), and one of the projects on this course was a solar system...

So I decided to Christmasify it a bit 😉!

Anyhoo, I hope you enjoy! If you would like to have more of a gander at the code, feel free to check out its [repository](https://github.com/cBridges851/christmas-2021)! You are most welcome to use this or [last year's VR scene](https://cbridges851.github.io/Christmas-2020-Parameters/?name=GitHub) yourself if you wish! 

If you do, do let me know, make a developer's day 😄!

I also hope to make a new VR scene every year, so keep watching this space! I'll try to get better and better each year!

Finally, if you've made it alllll the way down to the bottom of this post, then I thank you ❤️! 

I wish you all a very Merry Christmas and a prosperous New Year 😁!
JSX
Tags: javascript, webdev, programming, react
Published: 2021-12-25 13:45:48

It is syntax extension to javascript. JSX remind template lnaguage. but it completely take pawoer of javascript.

JSX produces React "elements". We will explore rendaering to DOM in the next section.

Embedding Expressions in JSX

In the example below, we declare a variable called name and then use it inside JSX by wrapping it in curly braces:




const name = 'Sayed Enam';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);
How React props work
Tags: javascript, reactnative, react, webdev
Published: 2021-12-25 13:43:38

React props allow you to send data numbers, stings, functions, objects, arrays etc. if have many components then you can pass data fromone components to another components.Pass props between componnets, you would add them when the componnt is called wehn callingon a regular javascript fucntion.


import React from 'react';
import ReactDOM from 'react-dom';

function PercentageStat({ label, score = 0, total = Math.max(1, score) }) {
  return (
    <div>
      <h6>{ label }</h6>
      <span>{ Math.round(score / total * 100) }%</span>
    </div>
  )
}

function App() {
  return (
    <div>
      <h1>Male Population</h1>
      <div>
        <PercentageStat label="Class 1" total={360} score={203} />
        <PercentageStat label="Class 2" total={206} />
        <PercentageStat label="Class 3" score={107} />
        <PercentageStat label="Class 4" />
      </div>
    </div>
  )
}
Useful JavaScript Code Snippets for Common Problems 😎
Tags: javascript, webdev, codenewbie, beginners
Published: 2021-12-25 13:31:16

Hey Coders!
JavaScript is one of the widely used languages in Web Development.  A broad and vital ecosystem has evolved around JS, offering tons and tons of frameworks and libraries that help you develop applications faster. At the same time, it made our coding experience a little complicated. Sometimes it’s good to take a step back and try to understand how to do things without a library. In this article, we will be going through some JS snippets which will provide a little help with those repetitive, simple tasks that come up each day. 


## 1. Sort an array 

```
//strings
const names = ["Seema", "Rekha", "Jaya"];
names.sort();
//['Jaya', 'Rekha', 'Seema' ]

//Numbers
const numbers = [101, 8, 87];
numbers.sort((a, b) => {
  return a - b;
});
//[ 8, 87, 101 ]
``` 

## 2.  Select a random element


```
const items = ["Ball", "Bat", "Cup"]
const randomIndex = Math.floor(Math.random()*items.length)
items[randomIndex]
``` 

## 3. Reverse a string


```
function reverseString(string) {
       return string.split(" ").reverse().join(" ")
}

revereseString("Random String")
```

## 4. Check if element has a class


```
const element = document.querySelector("#element")
element.classList.contains("active")
``` 

## 5. String interpolation


```
const name = "Jaya"
console.log(`Hi, ${name}. You have ${2 ** 3} new notifications.`}
//Hi, Jaya. You have 8 new notifications.
```

## 6. Loop through an array

```
const cars = ["Ford", "BMW", "Audi" ]
for (let car of cars) {
      console.log(car)
}

/*
Ford
BMW
Audi
*/
```

##  7.  Get current time

```
const date = new Date()
const currentTime = 
   `${date.getHours()}:${date.getMintues()}:${date.getSeconds()}`

console.log(currentTimes)
//example output: "22:16:41"
```

## 8. Replace part of a string

```
const string = "You are awesome."
const replacedString = string.replace("You", "We")

console.log(replacedString) //Output: "We are awesome"
```

## 9.  Destructing variable assignment


```
let profile = ['bob', 34, 'carpenter'];
let [name, age, job] = profile;
console.log(name);
// bob
``` 

## 10. Using the spread operator

```
let data = [1,2,3,4,5];
console.log(...data);
//  1 2 3 4 5
let data2 = [6,7,8,9,10];
let combined = [...data, ...data2];
console.log(...combined);
// 1 2 3 4 5 6 7 8 9 10
console.log(Math.max(...combined));
// 10
```

## 11.  Return [Number] Maximum Elements From an Array

```
const maxElement = ( array, number = 1 ) => [...array].sort(( x,y ) => y - x).slice(0, number);

//Example 
maxElement ([ 1,2,3,4,5]);  // [5]
maxElement([ 6, 7, 8, 9 , 10, 10] , 2);   // [10,10]
```
Arguments and Parameters,Generator Functions
Tags: javascript, beginners, programming, webdev
Published: 2021-12-25 13:23:15



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0xser7jejlxwh6j05vj.jpg)

Arguments and Parameters
In the following code block, you will create a function that returns the cube of a given number, defined as x:


The x variable in this example is a parameter—a named variable passed into a function. A parameter must always be contained in a variable and must never have a direct value.
Now take a look at this next code block, which calls the cube function you just created:


// Invoke cube function cube(10)
This will give the following output:
1000
In this case, 10 is an argument—a value passed to a function when it is invoked. Often the value will be contained in a variable as well, such as in this next example:

// A
ssign a number to a variable const number = 10 // Invoke cube function cube(number)
This will yield the same result:
1000
If you do not pass an argument to a function that expects one, the function will implicitly use undefined as the value:
// Invoke the cube function without passing an argument cube()
This will return:
NaN

Generator Functions

A generator function is a function that returns a Generator object, and is defined by the function keyword followed by an asterisk (*), as shown in the following:

// Generator function declaration function* generatorFunction() {}

Occasionally, you will see the asterisk next to the function name, as opposed to the function keyword, such as function *generatorFunction(). This works the same, but function* is a more widely accepted syntax.

Generator functions can also be defined in an expression, like regular functions:
// Generator function expression const generatorFunction = function* () {}
Navbar - Underline Menu Items on Hover
Tags: css, codepen, webdev
Published: 2021-12-25 13:11:21

The navbar, especially horizontal navbar, guides the user help find content fast, by providing 'umbrella' links. One of the interactions on menu item hover, is the simple underline effect.

We can use the `border-bottom` css property to create such an effect.

{% codepen https://codepen.io/deepakdevanand/pen/wvrPJzq %}
JavaScript Question: What will be the output?
Tags: discuss, javascript, webdev, programming
Published: 2021-12-25 13:06:01

## What will be the output?

```js
console.log(!!null);
console.log(!!'');
console.log(!!1);
```
[![YouTube Channel Subscribers](https://img.shields.io/youtube/channel/subscribers/UCNTKqF1vhFYX_v0ERnUa1RQ?label=Subscribe to my YouTube Channel&style=social)](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ)
Academic License: A New Way of Studying for Free using Best-in-Class Solutions!
Tags: datascience, career, tooling, devops
Published: 2021-12-25 12:53:12

Free Software and Solutions for Students and Teachers!

Recently, in the MBA in Solution Architecture that I’m taking at FIAP, I was offered to use some paid solutions, totally free of charge because I’m a student at that institution; all I need is proof of enrollment, and an email provided to the institution. I started researching it and found that many companies to have people trained in the market on their solutions or software are providing free use and training programs for their solutions for students and teachers.

This publication is a list of some completely free paid software and solutions for students and teachers; let’s go to the list:

https://jlgjosue.medium.com/academic-license-a-new-way-of-studying-for-free-using-best-in-class-solutions-7d468684f3d6
Best 5 Design Resources Website
Published: 2021-12-25 12:18:46

Today there are so many [great web design resources](https://htmltemplate.org/best-5-design-resources-website/), but we are presenting Best 5 Design Resources Website out there for developers and designers. We’ve created our own because finding them all individually is just too time-consuming. We started with a simple google search, but we found that most of the links returned were dead or no longer useful.

All we wanted was a place to find great design assets and tips in one place, and so we decided to create this directory from scratch. Be sure to share the site with anyone you know who’s interested in web design!

In this article, we have gathered the top 5 design resources platforms that have become the most popular among web designers, are significantly ahead of other services of their kind, and fully justify their popularity.
Advanced iOS development - Build Phases Part 1
Tags: ios, xcode, swift
Published: 2021-12-25 12:16:01

Have you ever come across this build error in Xcode..
![Xcode build phase failure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5j5k09zer9bu4tlu9hyb.png)
I'm sure you have.
During my first years of iOS development, this has been one of the most ambiauious errors for me, I can only see that I've messed up somewhere in the codebase and I have to go and see what I've done wrong, however, after I got to know build phases better in Xcode this couldn't make more sense..

## Build Phases
In Xcode build phases section is the scope where Xcode offers you the possibility to run custom scripts _- known as run scripts -_ as part of the build process, these script can be tailored for any behavior you can think of. The cool thing though is that you can control the build process through this powerful script of you..
Let's better have an example..

For Starter, How can we add those run scripts? 
![Xcode build phase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1fjxulghozxue8lhrfa.png)
 
1. Head to you project file.
2. Choose your app target.
3. Navigate the build phases tab.
4. Click the + button and choose `New Run Script Phase` 

This will add a run script template for you..
![Xcode Run Script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffv0pyu9jzb5nj56h2hw.png)
1. You can give a cool name to your script.
2. This is the path you shell on your machine.
3. The Shell script that will be run during the building process.

_Note: All these run scripts will run serially, and you can change the order by grabbing the run script and moving it up or down._ 
For our very first run script, we will be doing something very simple..
Just printing some message to the user..

![Xcode build phase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eou2x9ueij5gdtvkqh0z.png)
This message however won't be printed to the log. Instead, you can access it through the build report.

![Xcode Build Report](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fzrm5zuhifzyjgk78pjq.png)
1. Navigate to the report navigator.
2. Choose your build of interest.
3. Choose all messages tab.
4. You will find the message printed.

Now let's tweak this build a little, let's break the build for no reason..

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ba3ucmg4icy9853s7aci.png)
The key here is to exit the script with any value rather than zero, this will indeed fail the script and all the succeeding run scripts won't even run.

This will result in our friendly message we now understand its meaning.
![Xcode Build Phase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxr5f2lc4zm5d2u15a7m.png)

So this is it for our first part, in the next part we will build upon our knowledge and develop a very useful run script to use in you apps, so stay tuned 😉
Fallback with Examples
Tags: solidity, blockchain, ethereum, beginners
Published: 2021-12-25 10:46:12

## fallback is Backup function of contract
### Features
- anonymous
&nbsp;

- `external` : we send ether or call function from outside of the contract
&nbsp;

- `payable` : it receives ether

### Why use fallback
- It makes smart contract to receive ether
&nbsp;

- It makes smart contract to receive ether **and** do some action
&nbsp;

- If unregistered function is called by `call` method, we can set backup action

---
## After 0.6 version
`fallback` function has divided into `receive` and `fallback`.

### `receive`
Triggered for pure ether transfer

### `fallback`

1. Triggered when function is called & ether transferred


2. When non-registered function is called

```solidity
fallback() external payable {
	// Something
}
receive() external payable {
	// Something
}

```
---
## Examples
### Example 1
```solidity
// SPDX-License-Identifier: GPL-3.0

pragma solidity >=0.7.0 <0.9.0;

contract Bank {
    event JustFallback(address _from, string message);
    event ReceiveFallback(address _from, uint256 _value);
    event JustFallbackWithFunds(address _from, uint256 _value, string message);

    fallback() external payable {
        emit JustFallbackWithFunds(msg.sender, msg.value, "JustFallabackwithFUnds is called");
    }
    receive() external payable {
        emit ReceiveFallback(msg.sender, msg.value);
    }
}

contract You {

    function depositEther(address payable _to) public payable {
        _to.transfer(1 ether);
    }

    function justGiveMessage(address _to) public {
        (bool success, ) = _to.call("HI");
        require(success, "Failed");
    }

    function justGiveMessageWithFunds(address payable _to) public payable {
        (bool success, ) = _to.call{value:msg.value}("HI");
        require(success, "Failed");
    }
}
```
- For pure ether transferring function like `depositEther`, `receive` handles it.
&nbsp;

- For function called related fallbacks like `justGiveMessage` and `justGiveMessage`, `fallback` handles it.
&nbsp;

- ANOTHER KEY POINT

> msg.sender => entity that triggers smart contract

For `Bank` contract, `msg.sender` is You, because What really triggered `Bank`'s `receive` and `fallback` functions are `You`'s functions.

### Example 2
```solidity
// SPDX-License-Identifier: GPL-3.0
pragma solidity ^0.8.0;

contract Chest {

    receive() external payable {
    }

    function getBalance() public view returns (uint256) {
        return address(this).balance;
    }
}

contract A {
    function sendEther(Chest chest) public payable {
        address payable chestPayable = payable(address(chest));
        chestPayable.transfer(1 ether);
    }
}
```

When inside of `receive` function is empty, it automatically stores the transferred ether inside contract's balance.
Java abstract classes and interfaces
Tags: java
Published: 2021-12-25 10:18:06

######It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced.
######Abraham Lincoln.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wupisab1nxldsz1gxhwu.jpg)
***Abstract class:*** Class that has some methods without complete definition and has the modifier ``abstract``.
- You can not create an object using an abstract class constructor.
- You can use an abstract class as a base class to define a derived class.
- The abstract class has at least one abstract method.
- ***Abstract method:*** has heading just like an ordinary method, but without body, and it requires the modifier ``abstract`` and a semicolon.
- An abstract method can not be private.
- An abstract class can be a type.
Ex:
```java
public abstract class Example{
  private String data1;
  private double data2;

public abstract double getPay();
}
```
***Interface:*** specifies a set of methods that any class implements that interface must have.
- An interface is a type.
- It contains method headings without definition, and no instance variables:
```java
public interface Interface1{
public void method1();
public int method2();
}
```
- To implement an interface, the class must do two things:
<ol>
<li> Include ```implements``` *InterfaceName*.</li> 
<li> The class must implements **all** the method headings listed in the interface.</li>
</ol>
```java
public class Implementer implements Interface1 {

    @Override
    public void method1() {
    //definition   
    }

    @Override
    public int method2() {
    //definition   
    }

}
```
- The method headings declared to be *public*
- An abstract class can implement an interface as well, this class gives definitions for **some** of the method headings in the interface.
- Java interfaces can holds **constants** as well, ex:
```java
public interface Constant {

    public static final int JANUARY = 1, FEBRUARY = 2, MARCH = 3;
}
```
- Any class that implements the ```Constant``` interface will automatically have these constants, ex:
```java
public class Constants implements Constant {

    public static void main(String[] args) {
        System.out.println(JANUARY);
    }

}
```

- You can mix the uses of interfaces by including both constants and method headings in a single interface.
- Multiple inheritance is not supported in Java, so that a class can extends only one base class. however, using interfaces, a class can implements several interfaces:
```java
public class Implementer implements Interface1, Interface2, .. InterfaceN{

} 
```
- The reason that a Java class can extends only one base class is if Java allowed two base classes, the two classes may have the same method heading with different definition and that will cause inconsistency. 
- Rare phenomena, two interface can be inconsistent by defining two constants with the same name and different values:
```java
public interface Interface1{
public static final int ANSWEAR = 0;
}
```
```java
public interface Interface1{
public static final int ANSWEAR = 3;
}
```
Meta Tag in HTML | SEO Important
Tags: webdev, html, tutorial, performance
Published: 2021-12-25 09:46:48


![Meta Tag in HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6mj7lpvlzg6q87pc20t.jpg)Meta Tag in HTML | SEO Important. A meta tag in HTML is used to represent data about your webpage. With the help of a meta tag, we can specify the description of the document, its author information when it was last updated, it uses to give detailed properties of the HTML document. The meta tag is enclosed within the HTML tag, which was added in part. It is most helpful to the web designers to show the actual display part of the web page. The whole viewport control will be done by them using meta tags.

##Meta Tag in HTML

```HTML
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
`<html lang="en">`:) is the best support for displaying any kind of language.
`<meta name="viewport" content.........>`:) used to manage the size of the viewport with all its page dimension value and page scrolling to fit our webpage perfectly in any kind of device.

##Meta Tag List

| Tags        | Description           |
| ------------- |:-------------:|
| `<meta charset="UTF-8">`      | Defines Character Encoding |
| `<meta name="description" content="150 words">`      | Defines Description      |
| `<meta name="copyright" content="company name">` | Preserve  Copyrights      |
| `<meta name="abstract" content="">` | Abstract a Web Page      |
| `<meta name="author" content="name@hotmail.com">` | Defines author      |
| `<meta name="url" content="http://url.com">` | Define URL  |
| `<meta name="rating" content="General">` | Manage Ratings  |
| `<meta name="keywords" content="your, tags"/>` | Web Keywords   |

##Example:)

```HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Meta tag details information here">
<meta name="robots" content="Robotics"/>
<meta name="hotmail:card" content="summary"/>
</head>
</html>
```
So, a Meta tag in Html is used to represent metadata about HTML documents. The code included in it is a machine-readable format that works well with a webpage but doesn’t show any content on the page to the visitors.

I shared this post from [Meta Tag in HTML | SEO Important](https://softcodeon.com/html/meta-tag-in-html.htm) you can read in detail from there.

If you have any question please discuss below help to improve. Thank you.