[Javascript] Hilo General

alexsanro

No se si colocarlo aquí mi duda la verdad pero relacionado con Javascript está eso si. Ayer le estuve dando vueltas para hacer una pequeña extensión de Twtich en la que cuando en Steam consigas un logro este te salte por pantalla o algo así. Esto simplemente es por decir a ver si soy capaz y aprender un poco más solo.

Bueno, mi duda es, vi que puedo consumir el API de steam para conseguir los datos de juegos/user/etc eso no es problema, pero tendría que estar llamando a la URL correspondiente cada segundo o así para ver si se ha conseguido el logro, a habido algún cambio o similar. Y claro entiendo que hacer esto mediante un setInterval es una locura de carga. Alguien tiene una idea de por donde ir tirando??

kidandcat

Lo normal es que las APIs con eventos funcionen tal que tu les tienes que dar un webhook (no es mas que una URL a la que van a llamar) a donde te van a hacer una llamada cada vez que de lo que quieres estar al tanto cambie.

2
babri

alguno ha trabajado typescript con arquitecturas hexagonales?

brew

Dejo por aqui este articulo interesante :)

https://blog.jscrambler.com/beyond-obfuscation-javascript-protection-and-in-depth-security/

1 respuesta
EnderFX

#64 Vale, voy a lanzar mi pregunta al aire aquí.

¿Para qué ofuscáis y minificáis el código?

Porque yo desde luego por seguridad seguridad no lo hago. Ponerle las cosas más díficiles al mirón, si eso, pero yo suelo picar siempre teniendo en mente que a) el front no es seguro y b) el código va a estar ahí, aunque no sea bytecode ni asm, y por muy ofuscado que esté, siempre.

Por lo general yo lo hago más pensando en optimizar:

  • Archivos más pequeños, o bien menos archivos (1 o n bundles).
  • En producción no necesitas sourceMapping, ni variables sin usar, ni siquiera nombres de variables de más de 2-3 letras. Que se quite todo lo que sea superfluo.

Vamos, estoy de acuerdo con el inicio del artículo, aunque luego te venda JScrambler (no tengo opiniones acerca del producto). Pero no sé, me preocuparía más XSS y SQL/script injection en el front, y por supuesto asumiría que el back sí que tiene que ser seguro, y que cualquiera te puede copiar una petición en el F12 y empezar a dar por culo.

1 1 respuesta
26 días después
isvidal

Este fin de semana voy a crear un hilo de React.

Intentare tocar los maximos palos posibles ni que sea de forma ligera y desde el desconocimiento algunos de ellos para asi ir iterando entre todos luego.

8
VonRundstedt

edit: No merecía la pena el cursillo

3 meses después
VonRundstedt

Acabo de escribir este código que seguramente a más de uno le haga sangrar los ojos, pero eh, funciona!

Simplemente quería cambiar el contenido de un container ocultando y mostrando un div específico y cambiando un margen dependiendo de que botón hubiera seleccionado. Teniendo además uno de esos div mostrado por defecto al cargar la página. Estoy seguro que había una manera mucho mejor con class toggle, pero no me salía y ahora tengo curiosidad, si alguien se aburre y quiere practicar... :)

spoiler
1 2 respuestas
kidandcat

#68 Cuando veas que un bloque de codigo se repite (aunque cambie sutilmente) puedes moverlo a una función.

function hideAll(){
    nodejsContainer.style.display = "none";
    javascriptContainer.style.display = "none";
    sassContainer.style.display = "none";
    portfoliosContainer.style.display = "none"; 
    reactContainer.style.display = "none";
}

Ahora tus handlers serian:

document.querySelector('.buttonNodejs').onclick = () => {
    hideAll()  // primero ocultamos todos
    nodejsContainer.style.display = "flex";  // y ahora muestra el que quieras
};
5
Zoko

#68

Estas cosas nunca vienen mal para practicar, usar la API nativa siempre es bien.
A seguir.

1
16 días después
Darkxenos

Buenas a todos!

Me hace ilusión presentarme por aquí ya que me estoy iniciando en la programación desde hace unos meses... os cuento un poco mi vida :P.

Tengo 30 tacos, soy economista y llevo toda mi carrera profesional dedicada al sector turístico (hotelería), debido a cómo estaba el sector y mucho más ahora con el covid, tomé la decisión hace unos meses de hacer un Bootcamp en remoto de Fullstack web development. Así que nada, agradezco los recursos que habéis ido poniendo por aquí ya que algunos cursos de javascript creo que me van a ser de mucha ayuda.

Saludos!

11
JuAn4k4

#65 Igual es tarde, pero ofuscar creo que se hace poco, más bien bundlear y minificar, lo que viene a ser reducir al máximo el tamaño del bundle, no solo cambiamdo los nombres de variables, sino siguiendo muchos trucos que consiguen hacerlo todo más pequeño. Con es6 modules también se hace code splitting que elimima todo el código de 3rd parties que no se usan, reduciendo drásticamente el tamaño final.

Con esto se consiguen varias cosas, las principales son:
Menor tamaño del bundle, que junto a gzip consiguen que el js de la app se descargue antes.
También se consigue que el browser lo evalue antes.
Menos requests para pedir los js por separado.

Ofuscar tiene sentido cuando vendes licencias de ese código:
Haces más difícil que la gente se copie el código.
Por ejemplo, si es una lib que vendes, si te la pueden copiar, te la copiarán y podrán forkear tu código vaya.

8 días después
Axtrix

Alguno ha trabajado con nestjs?

He estado montando unas cosillas con el framework este finde y la verdad es que esta bastante guapo, es un poco mindfuck al principio por todo el tema de injección de dependencias, pero una vez le pillas el truco estas usando un Express winstrolado.

1 respuesta
kidandcat

#73 Básicamente es el backend para anguleros, si te ha molado la forma de trabajar, prueba Angular

1 respuesta
Axtrix

#74 Es un poco jaleo la verdad, eso no me gusta tanto, pero toda la funcionalidad que trae hace que valga la pena.

Lo otro que veo raro es que bastante codigo se repite entre schemas, DTO's e intefaces, no se si soy yo es cosa del backend para anguleros

1 mes después
Wei-Yu

¿Qué libs de logging usáis para el front/browser? Estoy buscando por ahí y no veo nada asentado y ahora mismo no quiero picarmelo yo a mano.

1 respuesta
sasher

#76 Los errores y cosas relevantes los mando al servidor y los loggeo a stdout con winston. En el propio frontend simplemente tengo un wrapper de console.log que solo loggea si me encuentro en el entorno de desarrollo, nunca en producción.

1 respuesta
DelToro

DUDAS NOOB

Buenas,estoy haciendo javascript y tengo estos 2 ejercicios..basicamente no se como comparar valores de un array normal y otro con objtos..si alguien me puede ayudar..gracias!

EJERCICIO1:

En una empresa trabajan 5 empleados cuyos sueldos oscilan entre $100 y $500, realizar un programa que lea los sueldos que cobra cada empleado e informe cuántos empleados cobran entre $100 y $300 y cuántos cobran más de $300. Además el programa deberá informar el importe que gasta la empresa en sueldos al personal.

Mi respuesta:

var sueldos = [1000,500,300,600,100];



for(i = 0;i < sueldos.length;i++){
  if(sueldos[i]> 300){

document.write("hay " + i +" empleados que cobran mas de 300");

}
else
{

document.write("nada");

}
}

Y me sale esto : hay 0 empleados que cobran mas de 300hay 1 empleados que cobran mas de 300nadahay 3 empleados que cobran mas de 300nada

EJERCICIO2 , este es de array con objetos.
2.En un banco se procesan datos de las cuentas corrientes de sus clientes. De cada cuenta corriente se conoce: número de cuenta, nombre del cliente y saldo actual. El ingreso de datos debe finalizar al ingresar un valor negativo en el número de cuenta.
Se pide confeccionar un programa que lea los datos de las cuentas corrientes e informe:
a) De cada cuenta: número de cuenta, nombre del cliente y estado de la cuenta según su saldo, sabiendo que:
Estado de la cuenta:
'Acreedor' si el saldo es >0.
'Deudor' si el saldo es <0.
'Nulo' si el saldo es =0.
b) La suma total de los saldos acreedores.

MI REPUESTA Y SALE: eres acreedor999 ,no se hacer la suma total ni comparar entre objetos..

var arr = { nombre:"antuan",num_cu: "a12312-ss",saldo:"999",
            nombre2:"antuan",num_cu2: "a12312-ss",saldo2:"666"};


if(arr.saldo > 0){
  document.write("eres acreedor" + arr.saldo);
}

else if(arr.saldo < 0 ){
  document.write("eres deudor" + arr.saldo);
}
else{
  document.write("eres nulo" + arr.saldo);
}
3 respuestas
isvidal

#78 El formato es horrible, es mejor pegar una captura de pantalla del codigo que pegarlo asi.

Dicho esto, el error en lo de los sueldos es que cuando haces el for() y comparas, estas comparando sueldos (Que apunta al array entero) con un numero, para comparar por cada valor de sueldos debes aceder a la posicion del array con la i del for sueldos[i] > 300. Pero logicamente, el mensaje luego no tiene sentido, pues no imprimes el total que hay, sino por cada uno de ellos.

Tienes que entender que en el for() lo que haces es ir pasito a pasito por cada "valor" del array.

1 respuesta
B

.

2 respuestas
EnderFX

#78 sueldos > 300 tendría que ser sueldos [ i ] (entiendo q te lo ha jodido el código del foro)
Dentro del for, metes un if para saber si están entre 100-300 o no para incrementar un contador u otro. Sumas el total. Easy

El segundo ahora no tengo tiempo para leerlo, pero el primero es muy fácil

1 respuesta
Wei-Yu

#77 es lo que buscaba a grandes rasgos, algo que me haga de wrapper al console.log según el entorno. Mentalmente tenía dibujado algo como winston que me permita cambiar en base al env el tipo de "transport" que usa y meterle distintos niveles de verbosidad.

2 respuestas
isvidal

#82 https://github.com/pimterry/loglevel

1
EnderFX

#82 algo más potente pero un truño de usar: https://www.npmjs.com/package/log4js

1
DelToro

#79 #80 #81 gracias compis,ya lo he arreglado:

var sueldos = [1000,500,300,600,100];

var total = 0;
for(var i in sueldos){
total += sueldos;
}

var cont = 0;
var contmenos = 0;
for(i = 0;i < sueldos.length;i++){
if(sueldos> 300){
cont = cont +1;

}

else
{

contmenos = contmenos +1;

}
}

document.write("el total es: " + total);
document.write("hay " + cont +" empleados que cobran mas de 300");
document.write("cobran menos de 300" + contmenos);

y sale: el total es: 2500hay 3 empleados que cobran mas de 300empleados cobran menos de 3002 empleado , me faltan los brs xd

Luego intento el segundo que parece que ya lo he entendido mejor
pd: al hacer copy paste aparecen errores aqui de ortografía,en el código no los tengo xd

2 respuestas
aren-pulid0

#85 utiliza esto

De esta manera podremos entender el código mucho mejor pues se queda formateado

Como en

#80KazuluDev:

con lo que te han dicho, haz:

for (i = 0; i < sueldos.length; i++) {
  console.log(sueldos);
  console.log(sueldos[i]);
}

Vas a ver el problema al instante.

1 1 respuesta
EnderFX

#85 no tiene sentido que hagas dos bucles for. Haz la suma del total en el segundo también, sumando total += sueldos[i] antes del if(sueldos > 10)

1 1 respuesta
DelToro

#87 arreglado gracias! #86 oki gracias
Tengo este otro ejercicio y no hay manera.
En un banco se procesan datos de las cuentas corrientes de sus clientes. De cada cuenta corriente se conoce: número de cuenta, nombre del cliente y saldo actual. El ingreso de datos debe finalizar al ingresar un valor negativo en el número de cuenta.
Se pide confeccionar un programa que lea los datos de las cuentas corrientes e informe:
a) De cada cuenta: número de cuenta, nombre del cliente y estado de la cuenta según su saldo, sabiendo que:
Estado de la cuenta:
'Acreedor' si el saldo es >0.
'Deudor' si el saldo es <0.
'Nulo' si el saldo es =0.
b) La suma total de los saldos acreedores.

var arr = { nombre:"antuan",num_cu: "a153412-ss",saldo:999,
            nombre:"mortel",num_cu: "a1212112-ss",saldo:-666,
            nombre:"victor",num_cu: "a76712-ss",saldo:0
          };

if(arr.saldo > 0){
  document.write("eres acreedor" + arr.nombre);
}

if(arr.saldo < 0 ){
  document.write("eres deudor" + arr.nombre);
}

if(arr.saldo == 0){
  document.write("eres nulo" + arr.nombre);
}

No entiendo porque me sale solo:
eres nulovictor

Cuando hay 3 ifs diferentes.

2 respuestas
isvidal

#88 No te ofendas, pero estas intentando volar y no sabes ni andar. Preguntas cosas que se nota que no entiendes nada de lo que estas haciendo. Y si arreglas algo, no lo arreglas, simplemente te sale el mensaje que esperas sin tan siquiera entender el porque.

En este ultimo llamas var arr a la variable que lo que guarda es la referencia a un object, entonces, aqui no trabajas con arrays, sino con objetos, y un objeto en JS no puede tener multiples props con el mismo nombre, una vez el codigo es ejecutado solo queda la ultima declaracion. Por lo que de tu arr solo acaba quedando nombre:"victor",num_cu: "a76712-ss",saldo:0 y el resto de encima se sobreescribe. Por eso el unico caso en el que entra (if) es el ultimo.

Pero como te digo, se nota que, sin ofender, no tienes ni idea de lo que estas haciendo. Para empezar yo te recomendaria que empezaras entendiendo y utilizando console.log() que es una funcionalidad que te permite imprimir por pantalla variables y valores. Si hubieras utilizado console.log(arr) enseguida habrias notado que el objeto arr solo contenia a victor y no a antuan ni a mortel por lo que te he explicado encima.

Una vez entiendas que con console.log puedes ver mas facilmente que cojones esta pasando te recomendaria que te estudiaras todos los tipos de JS, que no son muchos, y con una lectura ligera de 1 hora te ayudar a no ir tan ciego.

El último estándar ECMAScript define nueve tipos:

Seis tipos de datos primitivos, controlados por el operador typeof
- Undefined: typeof instance === "undefined"
- Boolean: typeof instance === "boolean"
- Number: typeof instance === "number"
- String: typeof instance === "string"
- BigInt: typeof instance === "bigint"
- Symbol: typeof instance === "symbol"

Null: typeof instance === "object". Tipo primitivo especial que tiene un uso adicional para su valor: si el objeto no se hereda, se muestra null;

Object: typeof instance === "object". Tipo estructural especial que no es de datos pero para cualquier instancia de objeto construido que también se utiliza como estructuras de datos: new Object, new Array, new Map, new Set, new WeakMap, new WeakSet, new Date y casi todo lo hecho con la palabra clave new;

Function: una estructura sin datos, aunque también responde al operador typeof: typeof instance === "function". Esta simplemente es una forma abreviada para funciones, aunque cada constructor de funciones se deriva del constructor Object.

LOS TIPOS

https://developer.mozilla.org/es/docs/Web/JavaScript/Data_structures

4 1 respuesta
DelToro

#89 No me ofendo tranqui xd

Ese es el problema,el profesor explica en un pdf en 2mins condicionales y bucles y envia 300 ejercicios y a buscarnos la vida.

1 respuesta

Usuarios habituales