teleren/devto huggingface dataset:
React JSX
Tags: react, javascript, beginners, programming
Published: 2021-12-22 17:08:08


JSX is simply a syntax extension of JavaScript.It stands for JavaScript XML.JSX is an HTML-like syntax that we can use with React to make it easier and more intuitive to create React components. It is only purpose is to make it easier to create React components.

**Benefits of using JSX:**
It is type-safe, and most of the errors can be found at compilation time. It makes it easier to create templates. It is faster than regular JavaScript because it performs optimization while translating the code to JavaScript.
 
**JSX Expression:**
JSX supports expression in pure JavaScript syntax. A JSX expression starts with an HTML-like open tag and ends with the corresponding closing tag. JSX tags support the XML self-close syntax so we can optionally leave the closing tag off. JSX expressions evaluate to ReactElements.
 
**Function:**
JSX supports user-defined JavaScript functions. Function usage is similar to expression.

**Attributes:**
JSX supports HTML like attributes. All HTML tags and their attributes are supported. JSX uses camelcase naming convention for attributes rather than the standard naming convention of HTML such as a class in HTML becomes className in JSX because the class is the reserved keyword in JavaScript. We can also use our own custom attributes in JSX. For custom attributes, we need to use data- prefix.
Example:

```
import React, { Component } from 'react';  
class App extends Component{  
   render(){  
     return(  
         <div>  
             <h1>react JSX</h1>  
             <h2>JSX atributes</h2>  
             <p demo-Attribute = "demo">This is custom attribute.</p>  

         </div>  
      );  
   }  
}  
export default App; 
```

In this example, we have used a custom attribute demo-Attribute as an attribute for the <p> tag. In JSX, we can specify attribute values in two ways.

1. As String Literals:
 We can specify the values of attributes in double quotes.
 

2. As Expressions:
 We can specify the values of attributes as expressions using curly braces {}.

**JSX Comments:**
JSX allows us to use comments that begin with /* and ends with */ and wrap them in curly braces {} just like in the case of JSX expressions. 

**JSX Styling:**

React always recommends using inline styles. To set inline styles, you need to use camelCase syntax. React automatically allows appending px after the number value on specific elements.

Example:

```
import React, { Component } from 'react';  
class App extends Component{  
   render(){  
     var myStyle = {  
         fontSize: 80,  
         color: 'black  
      }  
      return (  
         <div>  
            <h1 style = {myStyle}>JSX styling</h1>  
         </div>  
      );  
   }  
}  
export default App;  
```
Advent.js🎅🏼| #12: La ruta perfecta para dejar los regalos
Tags: javascript, adventofcode, webdev, spanish
Published: 2021-12-22 17:07:05

## [La ruta perfecta para dejar los regalos](https://adventjs.dev/challenges/12)

En el taller de Santa 🎅 se están preparando los trineos de motor eléctrico para poder hacer la ruta perfecta para dejar los regalos.

**La ruta empieza en el punto 0 y de ahí va hacia la derecha en línea recta.**

El Keanu Relfes 🧝 nos ha preparado una lista de obstáculos a evitar. El problema es que nos ha dado **la lista de posiciones de los obstáculos desordenada...** 😅 aunque al menos nunca **la posición 0 puede tener un obstáculo.**

Encima, el trineo sólo se puede configurar para saltar un número fijo de posiciones... 😱

Necesitamos una función que nos diga la longitud mínima del salto del trineo para ir evitando todos los obstáculos en la ruta.

```js
const obstacles = [5, 3, 6, 7, 9]
getMinJump(obstacles) // -> 4

// S es salto, X es obstáculo
/* Así quedaría la representación:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
.  .  .  X  .  X  X  X  .  X  . 
S-----------S-----------S-------
*/

const obstacles = [2, 4, 6, 8, 10]
getMinJump(obstacles) // -> 7

/* Así quedaría la representación:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
.  .  X  .  X  .  X  .  X  .  X 
S--------------------S---------

// Longitudes de salto:
// 1 caería en el 2
// 2 caería en el 2
// 3 caería en el 6
// 4 caería en el 4
// 5 caería en el 10
// 6 caería en el 6
// 7 es el ideal!!! ✅

getMinJump([1, 2, 3, 5]) // -> 4
getMinJump([3, 7, 5]) // -> 2
getMinJump([9, 5, 1]) // -> 2
*/

```

La dificultad del reto está en pensar que sólo podemos configurar el salto del trineo una vez y que buscamos el salto mínimo que nos serviría para sortear todos los obstaculos.

Completa el reto!

---
Una posible solución:

{% jsitor https://jsitor.com/embed/PhLdFHUGY %}

---
Puedes seguir a @midudev y estar pendiente de los retos de Advent.js 

{% twitter 1466086678507008003 %}
Angular for newbies II
Tags: angular, javascript, beginners, webdev
Published: 2021-12-22 17:04:09

## Part II

before i start the second part of our series let's remind you to read Part I if you didn't 

OK let's begin ARE YOU READY 🖐
as we mention on our previous post we defined angular according the definition of angular team there is some cryptic keywords so let's continue 
the definition was 

> A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more

**so what is library ?**
let me simplify you what library means, library is like building your own home from scratch you have the ability to chose how many rooms and kitchens your home will have, 
so well integrated libraries means angular built in using different libraries and work each other effort less and at your convenience

**so what those libraries Do** 
as you see in the definition each library responsible for one task like _rooting_ i will come back what routing is! that means library is like rooms that builds your home as your home have different rooms for different purpose is like that ! 

ARE YOU STILL WITH ME ? 🖐 am down here 👀

**So what is Routing**
Ooooooops !! 🙈

i almost forget to tell you that Angular is Single Page Application **SPA** means the whole application / website is served on a single page all different look alike pages you see are not real pages they are component that being rendered on the same page 
and that is where the router comes in handy it allows us to travel inside our components back and forth

and also form management and client communication are libraries that responsible for specific task like the router 


wooow 😲 we did an amazing journey you and me !! 

so let's grab a cup of coffee ☕️ you earned it 

are you thinking what am thinking ?

how to create angular application ??

that is the next Post !
see you buddy 🤪 and stay Healthy
Adding Splash Screens in Ren'Py
Tags: tutorial, gamedev, renpy
Published: 2021-12-22 17:01:00

If you played any visual novels, you might have encountered a intro or cutscene before the game starts. A splash screen can be textual video, or image. Here's some reasons to add a splash screen:

* Cutscenes
* Introductions
* Warnings
* Loading screens

## Splashscreen Uses 
Visual novels can have an opening to show the characters along with some game footage or a prolouge in the beginning of a game. Splash screens can be inserted anywhere in the visual novel. For example, we want to inform the player that time has passed in the story. A textual splash screen can be used to illustrate the time skip in the story.

Another use is adding a warning or statement before the game starts. This can be a warning for a game that has sensitive subjects or has mature content. Having a warning serves a precuation and to inform the players about the content in the visual novel beforehand. 

A loading screen can be a presplash. A presplash is an image when the engine starts up to launch the game. The game is loading into another stage has a loading screen image. Having a loading screen to transition between scenes in the game. 

## Simple text splashscreen
Let's add a text splashscreen that shows up in the beginning before the main menu. We want to inform the player that this is a demo and is not the full game.

```
label splashscreen:
    scene black

    show text "This is a demo. Final may game be subject to change." with dissolve
    with Pause(3)

    hide text with dissolve
    with Pause(1)

    return
```

To create the simple splashscreen, there is a black screen for the scene. We show the text on the screen for three seconds. The text dissolves and transitions into a fade.  

## What's next
Splashscreens can have a variety of uses to choose from when developing a visual novel. When creating a splashscreen, determine what is best for the game. The choice is up to you.  

### Resources

[RenPy splashscreen documentation](https://www.renpy.org/doc/html/splashscreen_presplash.html?highlight=splash%20screen)
What is a Prototype in JavaScript?

Published: 2021-12-22 16:58:45

**PropTypes**: In JavaScript, a prototype is a technique by which JavaScript objects inherit properties or features from one another. JavaScript is also known as a **prototype-based language**. An object has a prototype object which has another prototype object and thus it continued until there is no prototype. This nature is known as the prototype chain.
For example:

```
function Person(first, last, age, gender, designation,skills) {

  // property and method definitions
  this.name = {
    'first': first,
    'last' : last
  };
  this.age = age;
  this.gender = gender;
  This.designation = designation;
  //...see link in summary above for full definition
}
```

We’ve created an object instance like this:

```
let person1 = new Person('Asraful’, 'Islam', 28, 'male', ‘Developer’,['React, Javascript']);
```


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


In the image, you can see that if we write _person1_. We will see there are more properties than we declared in the Person object. Here first, last, age, gender, designation, skills are for the inheritance of the Person’s prototype object, and the other properties are for the inheritance of the Object’s prototype object.

**Understanding prototype chain**:
If we want to check the value of _person1.age_, it will simply return the result of the age 28. Because age is the prototype object of person1. Person1 is inheriting the properties of the object Person.

But if we want to check the result of _person1.toString_ which is directly not inheriting from the Person prototype object. Then what will happen?
Well, in that case first it will check the prototype of person1 object. If it is found then simply run it. In this case, it will not be found in the person1 prototype object. Then it will check the prototype object’s prototype object to get the property _“toString”_. Then it will find and return the result. This nature is known as the prototype chain.

Example: 

```
person1.toString()
// 28
```
Mini-tutorial Android Studio: Agregar imagen desde una url en un ImageView
Tags: android, espanol, spanish, minitutorial
Published: 2021-12-22 16:56:52


### Hola de nuevo, en esta ocasión les enseñare a agregar una imagen desde una url a un imageview.

## ¡Vamos al código!

Para hacer este tutorial nos ayudaremos de una dependencia llamada picasso [Ver librería Picasso](https://github.com/square/picasso) 

------

## Permisos [AndroidManifest.xml]
Para poder utilizar esta librería primero necesitamos asignar permiso de internet en el manifiesto. Para eso iremos a **AndroidManifest.xml** y agregaremos la siguiente etiqueta justo arriba de la etiqueta **application**

```
<uses-permission android:name="android.permission.INTERNET" />
```

Quedando nuestro código de la siguiente manera.

![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pswqpxspzeeqraxcjj3z.png)

------
## build.gradle

En nuestro archivo **build.gradle** en la sección de dependencias agregaremos una **implementation** el cual es nuestra dependencia picasso y su versión en mi caso es la 2.71828

```
dependencies{

    /*picasoo*/
    implementation 'com.squareup.picasso:picasso:2.71828'
    
    ....
    ....

```
Después de agregar la dependencia **sincronizamos el proyecto**

-------

## activity_main.xml

En nuestro activity_main.xml 

agregamos a el diseño un ImageView y le definiremos un tamaño si así lo deseamos.

![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zakyn6zyeozdjjun5j0n.png)


-----

## MainActivity

En nuestro MainActivity crearemos un objeto de tipo ImageView y le asignaremos el id 

```
  ImageView imageView;
```

## onCreate
```
 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = findViewById(R.id.imageView);
      .....
```

Ahora solo utilizamos nuestra dependencia picasso de la siguiente manera.

``` 
Picasso.get().load("AQUI VA LA URL").into(imageView);

```
## Fin

Con esto hemos terminado el minitutorial.
HTML Global Attributes
Tags: css, webdev, beginners, tutorial
Published: 2021-12-22 16:55:37

![HTML Global Attributes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5fehx145ua537w94aw0b.jpg)In this tutorial, you will learn Global Attributes which are common for all HTML elements. The global attributes assist by both standard and non-standard elements.
The global attributes can be use with all elements, even it may not have any effect on many elements.

HTML defines many attributes that are common to all elements. These attributes may be specified on all elements, with some exceptions where it is not suitable. Like <head> section of the document E.g , `<script>`, `<base>` etc.

##HTML Global Attributes are:

| Attributes    | Value         | Description|
| ------------- |:-------------:| -----:|
| Contenteditable| true/false | It confirm whether the content within an element is editable. |
| class     | classname|   It is used to give the class name for the element. It is mostly use with the CSS stylesheet.|
| accesskey | character|    It is used to create keyboard shortcuts for the element.|
| data-*| somevalue|   It is used to save element-specific private data that can be retrieve by Javascript.|
| contextmenu| menu_id|  It describe the id for the <menu> element that is used as a context menu  for an element. |
| draggable| true/false/auto| It defines either the content within an element is portable or not using Drag and Drop API.|
| dropzone| copy/move/link|  It defines the action is taken on the dragged element when it is dropped, ¬¬ such as whether it is copied, moved or linked. |
| id| id | It defines a unique id for the element. It can be use with CSS and JavaScript.|
| style|style| It is used to apply inline CSS to the element.|
| spellcheck| true false|  It defines either the content should be checked for spelling errors or not.|
| title|text| It is used to give the title, or some extra information about the element. |
| translate| 	yes/no      |   It defines whether the content of the element should be translated when the web  page is localized or not.|

I shared this post from [HTML Global Attributes](https://softcodeon.com/html/html-global-attributes.htm) you can read in detail from there.

If you have any question please discuss below help to improve. Thank you.
React Hooks 
Tags: react, javascript, useeffect, hooks
Published: 2021-12-22 16:50:43


**Hooks:** Hooks are essentially React's functional components. It isn't possible to use it in a classroom setting. They allow us to use React without having to use classes. Now we'll look at some basic and advanced hooks.
Basic Hooks: 

**useState():** It returns a stateful value as well as an update function. 
For example- 
[](
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ajv9j06lgxirld2ebi3.JPG))

The initial rendering of the returned state (state) returned as the same value passed as the first argument in the above code (initialState).

The setState function is used to update the state to its proper location. It accepts a new state value and re-renders the component in the background.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mrwbb1rns0ofh4tyi1n.JPG)



**useEffect():** In a nutshell, the useEffect hook allows us to add side effects to our components. Fetching data, directly updating the DOM, and setting a timer are just a few examples. There are two arguments to the useEffect hook. The second argument is not required. Consider the following scenario:


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



**useContext():** Context is the way to manage state globally in React. It accepts an object that React returns.  create Context and return the context's current context value. The value prop of the nearest context determines the current context value.
<MyContext.Provider> below the calling component in the tree. 

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


It can be used in conjunction with the useState Hook to more easily share state between deeply nested components than useState alone.
**Additional Hooks: **


useReducer ()
useCallback()
useMemo()
useRef()
useImperativeHandle()
useLayoutEffec()
useDebugValue()



In my next blog I will discuss Additional Hooks briefly.
You're using too much JavaScript
Tags: javascript, webdev
Published: 2021-12-22 16:47:08

JavaScript Libraries (or frameworks) like React, Angular or Vue.js have been the main protagonists of web development in recent years. While they are all great pieces of software and solve real problems, we've been relying on them too much, and **we've made the web worse as a result.**

The problem is to use too much JavaScript. Of the three core languages on the web (HTML, CSS, and JavaScript), JS might be the most versatile, but it's also **the most expensive for the user, and the most fragile.**

**A big advantage of HTML and CSS is that they are very tolerant to errors.** In many cases, when the browser finds errors in HTML or CSS, it can just ignore them and keep displaying the web page. For example, let's see this HTML snippet:

```html
My name is <stronk>Nico Zerpa</stronk>
```
In this example, I misspelt the tag name (it should be `strong`, not `stronk`). However, when I open the page in a browser, the content will appear just fine. Yes, my name won't appear in bold, but the site won't break.

**JavaScript doesn't work like that, it's less forgiving when an error occurs.** And if most of our websites rely heavily on it, an error might mean that the page doesn't work at all.

Another drawback is that **JavaScript may be slower, especially when the user is using an old or low-range device.** That's especially true when people try to replicate with JavaScript some functionality that HTML can already do on its own (something that sometimes happens on UI frameworks.)

When using large libraries, you also have the problem of load times, making the website even slower.

**However, it doesn't mean that you shouldn't use JavaScript at all.** JavaScript does play an important role in web development.

Every time you add a new JS library or functionality, think first if it will really improve the user experience. Also, look if there's a way to implement what you want to do with HTML and CSS. Quite often, there are JS-free alternatives.

---

If you liked this article, you'll love my JavaScript Newsletter.
Every other Monday, I'll send you easy and actionable steps to level up your JavaScript skills. Check it out: https://nicozerpa.com/newsletter
React                            
React-Life-Cycle
Tags: react
Published: 2021-12-22 16:46:41

``React  web app are actually  a collection of component. Every react component  has own lifecycle, that are different stage  of component extention.

A react component has four stage of lifecycle. 
For example:

**Initialization:** 
It’s  a starting point of  stage.Here the component start his journey.  This is the stage where the developer initial state and props .

Its following method is bellow:

**getDefaultProps**()
  its used to specify  the default value  of this.props.

**getInitialState() **
its used to specify  the default value  of this.state.

**Mounting**:
Mounting phase is instance of component is created  and inserted into the dom. In this phase our  component render at the first time.  Mounting represent of the rendering component.
 
The method is available phase is:

**componentWillMount(); 
This function get invoked before the render function is executed for the first time.

**componentDidMount();**
This function get invoked ones after  the render function is executed for the first time .

**Updating**:
The next phase is Updating. A component is update , when there is a change props or state in the component. The phase is updating   some user event instruction.

There are some available method in updating phase:

**setState**():
This function is used to update the state of a component.

**shouldComponentUpdate():**
This function is invoked before rendering  mounted component when new props or state being recieaved.

**componentWillUpdate():**
This function is invoked before the component rendered.

**componentDidUpdate()**
Similarly this  function is invoked after the component rendered and update props or state.

**UnMounting**
This is the final stage of phase in react lifecycle. Where the component remove from the page.

This Unmounting phase following the method is:

**componentWillUnMount**():
The function get invoked before the remove component from the page. And its end of lifecyle.


**React JSX
**
JSX means  JavaScript Syntax Extension. Its  referred JavaScript as XML. JSX is a react extension to the JavaScript language. It produce react element. JSX allows to use  write  HTML directly  in JavaScript  react.

Example:

const  function=()=>{
return(
    # Header<h1> Jsx</h1>
)
}
React Hooks (useState)
Tags: react, hooks
Published: 2021-12-22 16:44:50

Hello everyone, what’s up? Hope all of are you well by the grace of almighty Allah. Alhamdulillah I am also fine by the grace of omnipotent Allah. Today I will discuss React Hooks. We know react has seven hooks without custom hooks. Since the hook is so important, I don't want to discuss it all in one day, today I will just discuss the useState hook. First of all I will discuss What is hook? Then I will discuss useState hooks.

**What is hooks?**
Hooks is nothing but a simple thing which can handle of react’s state and all others feature without react class. Although Hooks generally replace class components, there are no plans to remove classes from React.

**Limitation of hooks:**

- React Hooks has three limitations. There are:
- You can call hooks only from react function component.
- You can call hooks only from top level component.Hooks cannot be 
  conditional. You can’t call hooks inside loop, condition, and 
  nested function.

**useState**
Hook allows us to track state in a function component. Basically state refers our application data that need to be tracking. useState accepts an initial state, that can be different value based on data and returns two values: Current state and function. Basically this two returns value we destructure from useState. Function update the state.

**For example:**
Firstly we have to import useState from react

import { useState } from "react";

Then destructure the return value from useState in function component

import { useState } from "react";

function FavoriteName () {
  const [name, setName] = useState(“ “);
}

The first value users is our current state and the second value setUsers is the function that is used to update our state. These names are variables that can be named anything we would like.
Finally, we set the initial state to an empty string: useState(“ ”). This initial state will be change based on data.

Our state is ready, now we can use it in a component

import { useState } from "react";

function FavoriteName() {
  const [name, setName] = useState("Ishrafil");
  return <h1>My name is {name}!</h1>
}