Forem: Poleselfg

Why AI Can't Replace the Magic of Software Engineering: A Tale of Two Tech Titans

Poleselfg — Fri, 03 Feb 2023 09:42:14 +0000

AI and software engineering are two peas in a pod. While AI is like the cool, tech-savvy cousin who always knows the latest gadgets and trends, software engineers are like the steady, reliable uncle who always gets the job done. And just like you can't replace your uncle with your cool cousin, AI can't replace software engineers.

Software engineers are the masterminds behind the software we use every day. They are the ones who take the concept of a software solution and turn it into a reality. They have the skills and expertise to design, develop, and maintain complex software systems, taking into account factors like user experience, security, scalability, and more. It's like they have a magical ability to understand the needs of both businesses and users, and they use their powers to create software that solves real-world problems.

AI, on the other hand, is the tech-savvy cousin who can automate routine tasks, making software engineers' lives a little easier. Think of AI as the ultimate sidekick who can help with code refactoring, testing, and debugging. It's like having a personal robot that does all the boring stuff, freeing up software engineers to focus on the fun stuff.

But even the coolest sidekicks need guidance from their superhero mentors. AI algorithms are only as good as the data they are trained on, and software engineers are the ones who curate and clean this data. They make sure that AI systems are working as intended and that they are providing accurate results. Without software engineers, AI would be like a superhero without a suit – it might look cool, but it wouldn't be as effective.

In conclusion, AI and software engineering are two sides of the same coin. AI can't replace software engineers, just like a sidekick can't replace a superhero. Software engineers and AI complement each other, working together to create software solutions that are both intelligent and user-friendly. So, let's give a round of applause to the steady, reliable uncles (software engineers) and the cool, tech-savvy cousins (AI) of the tech world!

Frontend, La primera barrera de seguridad de tu proyecto.

Poleselfg — Wed, 09 Jun 2021 18:13:47 +0000

A veces a los desarrolladores frontend se nos va de la cabeza un poco el tema de la seguridad. Pensando en la calidad de un sitio web, generalmente nos concentramos en rendimiento, SEO y accesibilidad. Sin embargo, la capacidad del sitio web de estar preparado ante ataques maliciosos no es la ideal, Importante! ya que backend y frontend son responsables de la seguridad de los datos que comparten.

¡Usuarios malintencionados pueden comprometer el frontend de tu aplicación, no lo dudes ni por un momento! Pero por suerte podemos tomar medidas para estar más seguro. ¡Y acá va una lista de 6 consejos!

PROTÉGETE EN CONTRA DE XSS En primer lugar es importante tener en cuenta que con esta vulnerabilidad, los atacantes explotan la confianza que un usuario tiene en un sitio en particular, y esto nos da una dimensión del impacto que puede tener. Este tipo de vulnerabilidad puede ser explotada de dos maneras: de forma reflejada y de forma almacenada. A continuación, haré una breve explicación de cada una. Reflejada: Este tipo consiste en meter código a través de un link, para que el link se ejecute en el browser de la victima, dentro de la página. Almacenada: Consiste en meter código a través de algún campo dinámico dentro de la página que lo permita y lo muestre en algún lado, para que ese código se ejecute cuando otros usuarios accedan a la página.

Cuando se introduce un código malicioso desde la entrada del usuario, esto se puede bloquear al proporcionar "X-XSS-Protection": encabezado "1; mode = block". Por ejemplo, desea dirigirse a los usuarios por sus nombres y vincularlos mediante correos electrónicos de marketing. James Hall, director de Parallax, sugiere agregar ? name = James en la cadena de consulta, y luego agregar al DOM.

TIPOS CONFIABLES

Los frameworks de frontend modernos como Angular o React no son totalmente inmunes a los ataques XSS. Liran Tal, miembro del Grupo de trabajo de seguridad de Node.js, recomienda types confiables para resolver los problemas con XSS, como el uso de APIs sensibles (innerHTML).
PREVENIR ATAQUES DE CLICKJACKING

Clickjacking es un ataque en el que un usuario es un truco para hacer clic en una página web o un elemento que no forma parte del sitio. Esto hará que los usuarios proporcionen sin saberlo credenciales o información confidencial, descarguen programa maligno, compren un producto en línea o transfieran dinero. Por lo tanto, puede protegerse contra este ataque con el encabezado X-Frame-Options.
UI FRAMEWORKS

Con frameworks como React, Vue y Angular han desarrollado una seguridad sólida, que tienen la posibilidad de eliminar los riesgos de los ataques XSS. Automáticamente, una salida HTML codificada reduce la necesidad de usar API DOM susceptibles a XSS. Por lo tanto, comienza a dar nombres inequívocos a métodos potencialmente peligrosos, como dangerouslySetInnerHTML.
TENGAN CUIDADO CON GOOGLE TAG MANAGER

Al usar Google Tag Manager, puede agregar los últimos scripts de seguimiento, chatbot de soporte y Hotjar para análisis de usuarios. Sin embargo, si su cuenta de Google es pirateada, se puede agregar cualquier arbitrario a JavaScript en su sitio web. Por ejemplo, sus usuarios se dirigen a una página de pago falsa para completar su pedido y envían el dinero a otro lugar.
POTENTE POLÍTICA DE SEGURIDAD DE CONTENIDO (CSP)

¿Alguna vez te has preguntado si deberías confiar en todo lo que envía el servidor? Siempre debe colocar un fuerte encabezado Content-Security-Policy HTTP. Esto solo permitirá que sea confiable elaborar parte del contenido en el navegador. CSP puede detectar ataques tales como scripting entre sitios (XSS) y clickjacking.
Con un CSP sólido puedes eliminar la ejecución de un código potencialmente malicioso y restringir el dominio mientras se cargan recursos externos. Además, las aplicaciones solo confían en los scripts de apis.xyz.com, self y algunas otras.

Hoy en día, la seguridad se ha convertido en una prioridad para muchas empresas. Estos ataques maliciosos pueden ocurrir a sitios grandes o pequeños. Se deben cuidar los datos de los clientes, ya que pueden producirse errores, y es bastante común de hecho, al implementar un sitio web o una aplicación. Los clientes tienen mayores expectativas sobre la seguridad de su información. Con estos 6 consejos de seguridad para frontend, puede proteger y reducir vulnerabilidades porque ningun cuidado jamas es suficiente, y como desarrolladores debemos estar mas al corriente de los problemas actuales y estar al tanto de como evitarlos.

More About me

Las últimas NOVEDADES de CSS en 2021 parte 1

Poleselfg — Tue, 16 Mar 2021 18:18:39 +0000

CSS está creciendo en alcance y poder con cada año que pasa. Es un gran momento para ser desarrollador web, pero mantenerse actualizado con las funciones más recientes puede ser un desafío.

Para que no sea un dolor de cabeza, aca estan las ultimas novedades, al menos del ultimo año y lo que llevamos de 2021.

Conical gradients

La función de conic-gradient se puede utilizar para crear una gama interesante de patrones de imagen, como formas cónicas, gráficos circulares, ruedas de colores y superficies brillantes.

Los degradados cónicos rotan las paradas de color alrededor de un punto central (en lugar de irradiar desde un punto central como un degradado radial). Las paradas de color de degradado cónicas se colocan alrededor de la circunferencia de un círculo.

Para crear un gráfico circular, usamos paradas de color que se superponen (tienen transiciones abruptas).

pie-chart{
    background: conic-gradient(red 120deg, green 120deg 240deg, blue 240deg);
}

La función repeating-conic-gradient() ofrece la posibilidad de crear impresionantes patrones repetidos con una breve lista de parámetros.

.sunburst{
    background: repeating-conic-gradient(red 0 15deg,darkred 0 30deg);
}

Browser Support

The Aspect Ratio Feature

Otra característica nueva es la relación de aspecto, que es la relación proporcional entre ancho y alto. Mantener una relación de aspecto consistente es importante para crear diseños receptivos y para evitar cambios de diseño acumulativos (una métrica de rendimiento vital de la web).

Algunos ejemplos de dónde se suele utilizar la relación de aspecto:

Creación de contenedores de marcador de posición para el contenido que se cargará
Creación de componentes consistentes y de tamaño uniforme, como tarjetas
Creación de iframes receptivos

Esta propiedad le permite fijar la relación de aspecto en cualquier elemento. Las imágenes y los videos tienen una relación de aspecto intrínseca, pero otros elementos no.

La sintaxis es muy sencilla. El valor es: la relación de ancho, una barra inclinada y la relación de altura.

.widescreen {
  aspect-ratio: 16 / 9;
}

Es importante tener en cuenta que los elementos no respetarán la relación de aspecto si se definen tanto la altura como el ancho para un elemento.

PROBAR EN CODEPEN

Puede empezar a utilizar la propiedad de inmediato y utilizar unA feature query para proporcionar una alternativa, como se muestra a continuación.

.standard {
  aspect-ratio: 4 / 3;
}

@supports not (aspect-ratio: 4 / 3) {
  .standard {
    width: 16rem;
    height: 9rem;
  }
}

Browser Support

Content-visibility property

La propiedad de visibilidad del contenido es una nueva propiedad de CSS que puede mejorar el rendimiento de la representación de la página. Permite al navegador omitir el trabajo de renderizado de un elemento hasta que sea necesario (cuando un elemento está a la vista). Si una gran parte de su contenido está fuera de la pantalla, aprovechar esta propiedad puede reducir drásticamente el tiempo de carga inicial de una página.

Aprovechar los beneficios de la visibilidad del contenido requiere que considere qué contenido debe cargarse inicialmente y qué contenido podría aplazarse. La propiedad tiene una opción automática que permite al navegador decidir si puede omitir la representación de un elemento.

Hay algunas consideraciones importantes al usar esta propiedad, como:

La altura de la página: el navegador hará que un elemento con visibilidad de contenido: auto o visibilidad de contenido: oculto sea invisible al hacer que su altura sea cero hasta que se renderice. Esto cambia la altura de la página y el desplazamiento.Puede usar la propiedad content-intrinsic-size para dar una altura explícita al elemento para compensar esto, es probable que esto sea una suposición de su parte, pero no es necesario que lo esté. ¡exacto! Orkan analiza este tema en este artículo.
El impacto en la accesibilidad: si utiliza la visibilidad del contenido en una sección que tiene encabezados y puntos de referencia, los lectores de pantalla no podrán acceder a ellos cuando se cargue la página. Desafortunadamente, esto degrada la accesibilidad de su contenido. Marcy Sutton analiza este caso de uso para una solicitud de extracción reciente que revisó para Dev.to.

Browser Support

CSS SubGrid

CSS Subgrid hace que varios patrones de diseño difíciles sean mucho más sencillos de realizar. Es la guinda y la guinda del pastel CSS Grid.

Si ya conoces la cuadrícula CSS, no requerirá mucho esfuerzo aprender la subcuadrícula CSS. La nueva sintaxis es breve y sencilla.

Conceptualmente, una cuadrícula definida como subcuadrícula es prácticamente lo mismo que una cuadrícula anidada normal, pero comparte las pistas de la cuadrícula principal. La recompensa es que proporciona una forma de alinear una cuadrícula anidada con su cuadrícula principal.

Un ejemplo común sería un diseño de tarjeta que tiene diferentes secciones. Estas secciones pueden variar en tamaño según el contenido. Con una cuadrícula anidada regular, no puede mantener la alineación vertical de las mismas secciones entre diferentes tarjetas.

.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
Si cambiamos la tarjeta para que sea una subcuadrícula, podemos conseguir que las secciones estén perfectamente alineadas verticalmente

.card {
    display: grid;
}

Si cambiamos la tarjeta para que sea una subcuadrícula, podemos conseguir que las secciones estén perfectamente alineadas verticalmente

.card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: auto / span 3;
}

por las dudas usamos un fallback

@supports not (grid-template-rows: subgrid) {
  .card {
    /* ..alternative layout */
  }
}

PROBAR EN CODEPEN

Browser Support

y basicamente eso es todo por la parte 1, en breve estare subiendo la parte 2 con mas features nuevas e interezantes que podemos encontrar en CSS para este 2021

SALUDOS!!

💡 Tip Rapido: Fetch JSON data Desde un perfil publico simple sin Graph API

Poleselfg — Thu, 14 Jan 2021 22:28:36 +0000

Nunca quisieron obtener informacion de un perfil de instagram de una manera facil y sencilla? Bueno...

En una de esas navegaciones nocturnas de poco dormir, me encontre con esta solucion, que por lo que pude ver esta poco difundida.

https://www.instagram.com/{public_profile_name}/?__a=1

Resulta, que agregando el query ?__a=! al final de la direccion al perfil, podemos acceder a un JSON con toda la informacion publica del perfil.

por ejemplo:

https://www.instagram.com/refactordevs/?__a=1

nos devuelve el siguiente JSON:

Como pueden ver el JSON es muy y tenemos toda la informacion de la cuenta, inclusive, con unas pocas lineas de codigo, (en este caso en javascript), podemos obtener el feed:

async function getInstagramPictures (profileName) {
  const baseUrl = "https://www.instagram.com";
  const profileUrl = `${baseUrl}/${profileName}`;
  const jsonDataUrl = `${profileUrl}/?__a=1`;

  const response = await fetch(jsonDataUrl);
  const jsonData = await response.json();
  const pictures = jsonData.graphql.user.edge_owner_to_timeline_media.edges;

  if (response.ok) {
    return pictures;
  } else {
    throw new Error(pictures);
  }
}

getInstagramPictures("refactordevs")
  .then(pictures => console.log("Pictures:", pictures))
  .catch(error => console.error("Error:", error));

Al realizar un bucle,se puede mostrar cada imagen o su miniatura.

Tambien podriamos traer las imagenes de perfil, o cualquier tipo de informacion.

solo basta con cambiar la siguiente linea:

const pictures = jsonData.graphql.user.edge_owner_to_timeline_media.edges;

Saludos! y espero que les sea util!

Sources: