Alvaro Montoro's questions

I am developing a loading page that will be displayed while the page content itself is rendered. It is a simple text that blinks, while circles move from left to right.

The problem is that during times when JavaScript is rendering intensively, the animation hangs and freezes. A colleague told me that it could be a problem when changing the position and size of elements with CSS (because blinking does seem to work without problems).

How can I avoid this behavior? What could I do to keep the animation flowing rather than jumpy?

This is the code with a forced load to show the crash:

// código para crear bloqueo al generar alta intensidad de JS
setInterval(function() {
  for (let j = 0; j < 10000; j++) {
    let o = new Array(20000);
  }
}, 1500);

@keyframes csLoadingBlink {
  0%, 80% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}

@keyframes csLoadingMoveButton {
  0% {
    top: 0;
    width: 2rem;
    height: 2rem;
    left: 0;
  }
  100% {
    top: 1rem;
    width: 0rem;
    height: 0rem;
    left: 100%;
  }
}


.cs-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cs-brand {
  white-space: nowrap;
  animation: csLoadingBlink 3s linear infinite;
}

.cs-brand span {
  white-space: nowrap;
  display: inline-block;
  color: #000369;
  vertical-align: middle;
}

.cs-name {
  border-right: 1px solid;
  padding-right: 1rem;
  margin-right: 1rem;
  font-size: 2.5rem;
  line-height: 3rem;
}

.cs-name sup {
  font-size: 0.75rem;
}

.cs-slogan {
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
}

.cs-animation {
  width: 100%;
  height: 2rem;
  margin-top: 1rem;
  position: relative;
}

.cs-animation span,
.cs-animation::before {
  display: block;
  content: "";
  position: absolute;
  line-height: 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #000369;
}


.cs-animation span {
  animation: csLoadingMoveButton 3s linear infinite;
  animation-fill-mode: backwards;
}

.cs-animation span:nth-of-type(1) {
  animation-delay: 0s;
}

.cs-animation span:nth-of-type(2) {
  animation-delay: 1s;
}

.cs-animation span:nth-of-type(3) {
  animation-delay: 2s;
}

<div class="cs-loading">
  <div class="cs-brand">
    <span class="cs-name">Compa&ntilde;&iacute;a</span>
    <span>Mejor Slogan del Mundo</span>
  </div>
  <div class="cs-animation">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

With a list/array of colors in hexadecimal format like this:

[ "#fff000", "#238923", "#aaaaa0", "#ff2300", "#2ff014", "#010203" ]

The idea is to order/organize it so that the red ones are first, the green ones second, and the blue ones last. But that is not enough because there are tones and tones of colors, the idea would be that they were organized in a "chromatic" way:

1. Bluish reds (red is the main color, then blue)
2. Reds (red is the main color, blue and green have the same value)
3. Greenish reds (red is the main color, then green)
4. reddish greens
5. Green
6. teal greens
7. greenish blues
8. blues
9. reddish blues

As you can see, it would be like a "color circle" where the ends meet: I put blue before green for red, and green before red for blue. So for example: #331122 (bluish red) would come before #330000 (red-red) which would come before #331100 (greenish red). The sort scheme would be something like this:

   R        G        B
-------- -------- --------
RB RR RG GR GG GB BG BB BR

So the above list would look like this:

[ "#ff2300", "#fff000", "#aaaaa0", "#2ff014", "#238923", "#010203" ]

I can't use an existing sort method in the programming language because it's not really a normal sort and it's not going to go alphabetically. That is why the values ​​for the three colors must be taken into account independently. He would have to do something of his own.

So I'm looking for an answer that:

• Propose a theoretical solution for a large number of colors.
• Also work with a limited number of colors (25-50 which could be used to sort a paginated table).
• Be efficient (algorithmic order) - should you consider hashing/buckets?

I've been experimenting with HTML and CSS to create a simple board game without using JavaScript. I use labels and radio buttons to create the different states and simulate the logic for each piece to move around the board.

It works "fine", although the usability is not great. For example, after rolling the dice, the token moves and I show a button to switch to the next user (again controlled with a label and a checkbox)... but that's not ideal, it would be better if the player switch was will perform "automatically."

The problem is that <label>it can only change one element and I don't know how to make two "actions" (or side effects) be generated with each click.

Is there a way to launch two "state changes" by clicking on a single <label>or <a>?

This is a minimal example of the problem: There are two players (specified by turns), a board with 3 spaces (which will be 6 radio buttons: 1 per space and player), and two buttons to change turns (although only one will be visible). If you click on change turn, it will change the turn, and the radio buttons and labels for the other player will be shown. (A more complete example can be found here ).

Is the problem that you have to force the user to click on the button to change turns, or the active player will always be the same. Is there a way to make it so that when you click on a square, not only the square changes but also the turn?

#j1:checked ~ [for=j1],
#j1:checked ~ [for^=casilla-j2],
#j1:checked ~ [name^=casilla-j2],
#j2:checked ~ [for=j2],
#j2:checked ~ [for^=casilla-j1],
#j2:checked ~ [name^=casilla-j1]
{ 
  display: none; 
}

/* aquí habría más reglas para ocultar elementos */

<h1>Turno:</h1>
<input type="radio" id="j1" name="jugador" checked /> J1
<input type="radio" id="j2" name="jugador" /> J2

<h1>Tablero: </h1>
Jugador 1:
<input type="radio" id="casilla-j1-1" name="casilla-j1" checked />
<label for="casilla-j1-1">J1 a 1</label>
<input type="radio" id="casilla-j1-2" name="casilla-j1" />
<label for="casilla-j1-2">J1 a 2</label>
<input type="radio" id="casilla-j1-3" name="casilla-j1" />
<label for="casilla-j1-3">J1 a 3</label>
<br/>
Jugador 2:
<input type="radio" id="casilla-j2-1" name="casilla-j2" checked />
<label for="casilla-j2-1">J2 a 1</label>
<input type="radio" id="casilla-j2-2" name="casilla-j2" />
<label for="casilla-j2-2">J2 a 2</label>
<input type="radio" id="casilla-j2-3" name="casilla-j2" />
<label for="casilla-j2-3">J2 a 3</label>

<h1>Cambio de turno:</h1>
<label for="j2">Cambiar turno a jugador 2</label>
<label for="j1">Cambiar turno a jugador 1</label>

Some attempts:

I tried to put a <a>inside a <label>to be able to cast two readable changes: :targetwith <a>and :checkedwith <label>(with :target it would control the turn, and with :checked it would control the square the piece goes to). It looks like that structure is valid HTML (at least according to the W3C HTML validator), but it doesn't work . For example, in the following snippet, clicking on the first link activates the text, clicking on the second link checks the box, but clicking on the third link does not do both (which is what I I would want):

#test:target {
  color: red;
}

#cb:checked

a, label {
  display: block;
  text-decoration: underline;
  color: blue;
}

<input type="checkbox" id="cb" />
<div id="test">TEST</div>

<a href="#test">Resaltar texto</a>
<label for="cb">Marcar casilla</label>
<label for="cb">
  <a href="#test">Resaltar texto Y marcar casilla</a>
</label>

I've also tried playing with combinations of different pseudo-classes: :checkede :invalidin particular. Although it was not very helpful because in the case of a checkbox they have the same value at the same time, and in the tests I did requiredit does not apply to a single radio button:

div {
  color: purple;
}

#radio1:checked ~ div {
  color: blue;
}

#radio1:invalid ~ div {
  color: red;
}

#radio2:checked ~ div {
  color: fuchsia;
}

#radio1:invalid + #radio2:checked ~ div {
  color: green;
}

<input type="radio" name="radio1" id="radio1" required />
<input type="radio" name="radio1" id="radio2" />

<div>Texto que debería ser verde cuando radio2 esté pulsado</div>

I'm working on a project and they gave me a C# file with code similar to what I had to do. Investigating it I found this:

valorOpcion1 = "valor_que_viene_de_un_lado";
valorOpcion2 = "valor_que_viene_de_otro_lado";

var miLista = new List<string>
    {
        $"opcion1:{valorOpcion1}",
        $"opcion1:{valorOpcion2}"
    };

What it does is define and initialize a list of strings with two default values. My doubt comes with the $one with those chains, I don't know what it is.

What does putting the dollar sign ( $) in front of a string do? Is there a difference between, say, "hola"and $"hola"?

With JavaScript/jQuery I can create events for when the mouse enters or leaves an element using mouseenterand mouseleave. For example:

var img = document.querySelector("img");

img.addEventListener("mouseenter", function() {
  console.log("Estoy sobre la imagen");
});

img.addEventListener("mouseleave", function() {
  console.log("Ya no estoy sobre la imagen");
});

<img src="http://placehold.it/200" />

This will cause actions to be executed (display messages on the console) when the mouse enters or leaves the image. Now my question is: is there an event that instead of being fired when the mouse enters the image, is fired when the mouse is in the proximity of the image?

For example, if I have an image (although it could potentially be anything like a divor a thead) next to some text, and the mouse comes within 30px of the image's border, an action is executed in JavaScript. This graphic shows more or less what I want - something should happen if the mouse enters the area around the image (highlighted in red for example only, it's an "imaginary" area):

If it doesn't exist, how could that event be simulated with JavaScript or jQuery?

I am working on an HTML component with JavaScript. This component is going to appear multiple times on the page (on the order of hundreds or maybe thousands), and I want each of them to have a unique identifier.

So far I am creating the unique IDs (UIDs) by generating a random number for each of the components and assigning it as an ID. Something like this:

var UID = "componente-" + Math.floor(Math.random() * 999999);
miComponente.id = UID;

But this method has major problems because it could be the case that some of the IDs could be repeated. At the very least I should add a check to make sure IDs are not repeated, but apart from that what other method is there to generate unique identifiers? Is there a native function in JavaScript that does it? (something like uniqidPHP).

Can someone explain to me how the operator works %: What is it? What is the logic behind that operator? What does it do and what does it return?

For example, the following code in Java (although it would work in other languages ​​with similar notation):

char calculaLetra(int dni) 
{ 
    String juegoCaracteres="TRWAGMYFPDXBNJZSQVHLCKE"; 
    int modulo= dni % 23; 
    char letra = juegoCaracteres.charAt(modulo); 
    return letra; 
}

[Question raised in SOes chat .]

We recently switched from SVN to GIT in the project, git commitsaving changes that have been made locally. So what is git push? What is the difference between the git pushand commands git commit?

Working in JavaScript, I have two arrays that I need to combine to generate a concatenation of all their elements, for example:

var array1 = ["A", "B", "C"];
var array2 = ["1", "2", "3"];

resultado = ["A1", "A2", "A3", "B1", "B2", "B3", "C1", "C2", "C3"];

To do that I can think of 3 different methods: using the classic loop for, using the method forEach, or using the method map, in the following ways:

for

var array1 = ["A", "B", "C"];
var array2 = ["1", "2", "3"];

var resultado = [];
for(var x = 0; x < array1.length; x++) {
  for (var y = 0; y < array2.length; y++) {
    resultado.push(array1[x] + array2[y]);
  };
};

console.log(resultado);

forEach

var array1 = ["A", "B", "C"];
var array2 = ["1", "2", "3"];

var resultado = [];
array1.forEach(function(valor1) {
  array2.forEach(function(valor2) {
    resultado.push(valor1 + valor2);
  });
});

console.log(resultado);

map

var array1 = ["A", "B", "C"];
var array2 = ["1", "2", "3"];

var resultado = [];
array1.map(function(valor1) {
  array2.map(function(valor2) {
    resultado.push(valor1 + valor2);
  });
});

console.log(resultado);

All three methods traverse both arrays and with all three I get the same result (as you can see in the examples above). Now my questions:

• What are the advantages/disadvantages of each method?
• Is there one that should be used over the others? Or depending on the situation?
• Is there a method that does something similar and is better (eg: more efficient or faster)

With jQuery and other JavaScript libraries you can easily make AJAX calls using something like this:

$.ajax({
   url: "miURl",
   method: "GET",
   data: "var1=valor1&var2=valor2",
   success: function(d) {
      // código aquí
   }
});

The problem is that in some projects I have found that I added JavaScript libraries exclusively to use the AJAX function and for quite basic calls (mainly GETs in which I did not care about the error, only the result, if any)... and not it makes a lot of sense to add an 85-300KB file just for that.

What would a basic JavaScript function look like that takes a URL as a parameter, a function that will do success(I don't care about the error) and optionally the method (GET or POST), a list of variables, and work "similar" to how does it do it jQuery.ajax?

The response must be independent of the server it is running on and if that is not possible then it must work for Apache.

aria-Attributes beginning with and related to accessibility can be found on many web pages and in quite a few StackOverflow questions . For example:

<div class="text">
    <label id="tp1-label" for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" size="20"
           aria-labelledby="tp1-label"
           aria-describedby="tp1"
           aria-required="true" />
    <div id="tp1" class="tooltip"
         role="tooltip"
         aria-hidden="true">El nombre es obligatorio</div>
</div>

What are attributes and what are they for aria-*? How many are there and which are the most important? And why should they be used?

I usually include a favicon on my web pages with an icon .ico, doing something like this:

<link rel="icon" href="./favicon.ico" />

But I've seen quite a few websites do it with images with extension .png, and with different values ​​for the attribute rel(like "shortcut icon" or "apple-touch-icon").

What image format is more appropriate for favicon in modern browsers? What are the advantages of using one over the other? And the same for the attribute rel: is there a difference between "icon" or "shortcut icon"? (assuming "apple-touch-icon" is specific to Apple devices)

I want to apply different CSS styles depending on whether the orientation of the device is vertical (portrait mode ) or horizontal (landscape mode ) . Can it be achieved with just CSS?

Is there an alternative? I suppose you could always detect the width and height of the window with JavaScript and from there decide which styles to apply, but I wonder if there is an easier way that uses only CSS (if not, a JS solution would be nice).

Dynamic statements are SQL statements that are created as strings and in which values ​​obtained from some source (usually from the user) are inserted/concatenated, which can make them vulnerable to SQL injection if they are not sanitized. inputs, such as:

$id_usuario = $_POST["id"];

mysql_query("SELECT * FROM usuarios WHERE id = $id_usuario");

This is an example of a serious vulnerability in the security of an application (web or not) because if the user entered a value like 1; DROP TABLE usuarios;--this, we would find that the statement executed would be:

SELECT * FROM usuarios WHERE id = 1; DROP TABLE usuarios;--

And the Users table with all the data contained in it would be deleted.

How can I prevent SQL injection from happening in PHP?

In CSS we can define styles for id's with the hash ( #) and for classes with the dot ( .), but there are some rules that are preceded by the at sign ( @) such as:

@font-face {
    /* definición de fuente propia */
}

@media print {
    /* estilos a la hora de imprimir */
}

@keyframes miAnimacion {
    /* definición de pasos para una animación */
}

What does the @before period mean? How many are there and what are they used for? What's so special about them?

I'm using HTML and CSS to learn/practice 2D and 3D transformations and for this I'm drawing a 3D 9v stack (because it's simple and square). So far everything has been easy because I have only needed transformations to rotate and move the different (rectangular) faces of the stack.

But I find that the electrodes in the cell are circular and I don't know how to make one div(or another) element circular (3D tube). I imagine it would be to "simulate" a circle using lots of vertices, but that seems tricky.

This is what I've got so far (on JSFiddle ):

@-moz-keyframes spin {
  from {transform:rotateY(0deg) rotateX(0) rotateZ(0);}
  to {transform:rotateY(360deg) rotateX(360deg) rotateZ(360deg);}
}
@-webkit-keyframes spin {
  from {transform:rotateY(0deg) rotateX(0) rotateZ(0);}
  to {transform:rotateY(360deg) rotateX(360deg) rotateZ(360deg);}
}
@keyframes spin {
  from {transform:rotateY(0deg) rotateX(0) rotateZ(360);}
  to {transform:rotateY(360deg) rotateX(360deg) rotateZ(0deg);}
}

.container {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  position:relative;
  width:120px;
  height:200px;
  margin:100px;
}
#battery {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  -webkit-animation: spin 14s infinite linear;
  -moz-animation: spin 14s infinite linear;
  animation: spin 14s infinite linear;
}
.face {
  position:absolute;
  top:0;
  left:0;
  transform-origin:0 0;
  opacity:10.6;
  overflow:hidden;
}
.face:before, .face:after, .face span:after, .face span:before {
  position:absolute;
  top:0;
  left:0;
  transform-origin: left top 0;
  display:block;
  font-family:arial,sans-serif;
  white-space: pre;
}
.large {
  width:120px;
  height:200px;
  background:#111111;
  box-sizing:border-box;
  box-shadow:inset 0px 66px 0px #CC7722;
}
.side {
  width:66px;
  height:200px;
  background:black;
  box-sizing:border-box;
  box-shadow:inset 0px 66px 0px #AA5500;
}
.short {
  width:120px;
  height:66px;
  background:#222222;
}
.top {
  box-shadow:inset 0 0 0 8px #BB6611;
}
.bottom {
  box-shadow:inset 0 0 0 8px #111111;
}
.front:before, .back:before, .right:before {
  content:"DURACELL";
  color:silver;
  transform: rotate(90deg) translate(72px, -68px);
  font-weight:bold;
  font-size:1.3em;
}
.front:after, .back:after {
  content:"ALKALINE BATTERY";
  color:silver;
  transform: rotate(90deg) translate(73px, -44px);
  font-weight:bold;
  font-size:0.5em;
}
.back:after { content:"PILE ALCALINE"; }
.right:before { transform: rotate(90deg) translate(72px, -50px) }
.right:after {
  content:"Duracell, div of P&G, Bethel, CT 06801 \a P&G Inc., Toronto, ON M5W1C5 \a Made in U.S.A. / Fabrique aux E.-U. \a 95756099";
  width:130px;
  color:silver;
  transform: rotate(90deg) translate(73px, -27px);
  font-weight:bold;
  font-size:0.29em;
  letter-spacing:-0.1px;
  line-height:1.2em;
}
.right span:before {
  content:"\2b06\a+";
  font-weight:bold;
  line-height:0.8em;
  top:20px;
  left:20px;
  font-size:1.3em;
}
.right span:after {
  content:"MAR \a 2015";
  color:#AA5500;
  transform: rotate(90deg) translate(150px, -23px);
  width:60px;
  font-weight:bold;
  font-size:0.6em;
  text-align:center;
}
.left:before {
  content:"MN1604 \a 6LR61 \a 9 VOLTS";
  line-height:1em;
  transform: rotate(90deg) translate(15px, -59px);
  font-size:0.5em;
  font-weight:bold;
  letter-spacing:-0.1px;
}
.left span:before {
  content:"Caution: do not connect improperly. Charge or dispose of in fire. Battery may explode or leak. Do not carry batteries loose in your pocket or elsewhere as burn injury could result.";
  width:120px;
  color:silver;
  transform: rotate(90deg) translate(73px, -60px);
  font-weight:200;
  font-size:0.25em;
  letter-spacing:-0.2px;
  line-height:1.2em;
  text-transform:uppercase;
  white-space: normal;
}

#battery .front { transform: rotateY( 0deg ) translateZ( 66px ); }
#battery .back { transform: rotateY( 180deg ) translateX( -120px ); }
#battery .right { transform: rotateY( 90deg ) translateZ( 120px ) translateX(-66px); }
#battery .left { transform: rotateY( -90deg ) translateZ( 0 ); }
#battery .top { transform: rotateX( -270deg ) translateZ( 0 ); }
#battery .bottom { transform: rotateX( 90deg ) translateZ( -200px ); }

<div class="container">
  <div id="battery">
    <div class="face large front"></div>
    <div class="face large back"></div>
    <div class="face side right"><span></span></div>
    <div class="face side left"><span></span></div>
    <div class="face short top"></div>
    <div class="face short bottom"></div>
  </div>
</div>

and this is how it looks:

I imagine it could be done with SVG or a canvas, but I want to limit myself to HTML+CSS3 (with 2D and 3D transformations). So my questions really are:

• Can you have a divcurve? ( not a circle, but a tube )
• Can they be divcurved? (eg to create two semicircles and join them in a circle)

And if the element cannot be curved, what could be an alternative? Or is my only option to simulate it as I was saying before?

At work we run into an interesting problem: we have a page with a dropdown list that, when the selected option changes, updates the values ​​of a series of items from the values ​​of a JSON variable.

The HTML is something like this (simplified):

<select id="paises">
  <option value="chile">Chile</option>
  <option value="colombia">Colombia</option>
  <option value="ecuador">Ecuador</option>
</select>

<div id="valores">
  Pais: <span id="pais"></span><br/>
  Teléfono: <span id="telefono"></span><br/>
  Email: <span id="email"></span>
</div>

And the JSON is something like this (simplified):

info = {
    "chile": {
        "nombre": "Chile",
        "telefono": "123456789",
        "email": "[email protected]"
    },
    "colombia": {
        "nombre": "Colombia",
        "telefono": "192837465",
        "email": "[email protected]"
    },
    "ecuador": {
        "nombre": "Ecuador",
        "telefono": "987654321",
        "email": "[email protected]"
    }
}

The JavaScript code is not relevant to the question, but the idea is simple: depending on the selected country, the span. For example, if Chile is selected, the one spanwith id "country" will contain "Chile", the one spanwith id "phone" will show "123456789", etc, etc.

Now that page has been moved to a new CMS and for different reasons we are limited in the components we can use and none of them allow us to embed JavaScript (not even inline ), they only let us embed HTML and CSS.

So the question would be: how can the behavior described above be simulated, but exclusively using HTML+CSS without any JavaScript or JSON?

Regarding HTML and CSS we have no limitations: we can reorder/arrange the elements as we want, we can add new elements/remove existing elements, we can add as much code as we want... as long as it doesn't contain any script, just HTML and CSS.

For example, we finally found a solution (I'll share it in the answers below for inspiration) by replacing the selectwith a list ul, transforming the JSON to CSS (with :beforeand content) and with a series of inputhidden s... but the problem is that it takes up too much space and we want to know if there would be a different method.

I've found quite a few questions on StackOverflow about programs or web forms that save information to a database (especially PHP and MySQL) that contain serious security issues mainly related to SQL injection .

I usually leave a comment and/or a link to an external reference, but a comment doesn't leave much room and it would be nice if there was an internal SOes reference on the subject so I decided to write this question/answer: What is SQL injection and how to avoid it?

Nested AJAX calls are referenced in another Spanish StackOverflow question and the answer suggests using promisesinstead of nesting AJAX calls. And from there I have had some doubts.

Note: I'm going to use jQuery notation by removing quite a few parameters and renaming the functions to make it easier to read. It doesn't mean that this question is about jQuery or AJAX in jQuery.

Basically what the question asks is this:

Structure A

$.ajax({
    url: URL1,
    success: function() {
        a1();
        $.ajax({
            url: URL2,
            success: function() {
                a2();
            },
            error: function() {
                b2();
            }
        });
    },
    error: function() {
        b1();
    }
});

And what is suggested in the answer is something like this:

Structure B

var promise = $.ajax({
    url: URL1,
    success: function() {
        a1();
    },
    error: function() {
        b1();
    }
});

promise.then(function() { 
    $.ajax({
        url: URL2,
        success: function() {
            a2();
        },
        error: function() {
            b2();
        }
    });
});

And now my questions:

• Are structure A and B equivalent? What is the difference between them?
• Is there an advantage to using one over the other?
• Is one of the methods recommended over the other?

How can I copy the content of an div(or any element) to the clipboard using only JavaScript/jQuery without using Flash?

For example, if I have this code:

<p id="mi_parrafo">
  Texto que quiero copiar
</p>
<button>Copiar al portapapeles</button>

What should I do so that, after pressing the button, when I press Ctr+ Vthe content is pasted inside the label marked as #mi_parrafo?