Henrry Ramirez

@henryraygan

💻UI Developer ⚡ CSS Ninja 👤 Community Leader @slothtech_ ✉️ Freelance | Talks | Courses: contactoraygan@gmail.com

Cancún, Mexico

Como resolver conflictos entre Vuejs y JQuery

hace 4 años

Hola, he creado un componente en vuejs que en donde solo importo el app.js para que pueda ser renderizado en un div, como lo sería tradicionalmente en un SPA, pero en este caso solo es un componente.

El detalle es que hoy lo intenté usar en un sitio que tiene JQuery y debido a que el proyecto es legacy no puedo quitar JQuery, pero al parecer Vuejs y JQuery están enfrentando un conflicto, ya que evita que cualquier funcion del Vuejs se ejecute, se soluciona sencillamente al comentar el script que hace referencia a JQuery.

¿Alguien a enfrentado un problema de la misma situación?

¿Cómo transformar un JSON a un Modelo de C#?

Henrry Ramirez@henryraygan

hace 4 años

Hola comunidad, tengo el siguiente problema.

Deseo parar un json del siguiente estilo:

1{
2 &#34;PromoSlider&#34;: [
3   {...},
4   {...}
5 ],
6 &#34;Weather&#34;: {...},
7 &#34;PromoRecomended&#34;: [
8   {...},
9   {...},
10   {...},
11   {...}
12 ]
13}

a un modelo de c# de la siguiente forma:

1public class Destination
2   {
3       public List&lt;PromoSlider&gt; slider { get; set; }
4       public Weather weatherbox { get; set; }
5       public List&lt;Promos&gt; Promotions { get; set; }
6   }

Resulta que si hago lo siguiente tomo la key del Weather

1var response = webClient.DownloadString($&#34;{destino}.json&#34;);
2dynamic r = JsonConvert.DeserializeObject(response);
3
4var weatherBox = new Weather()
5{
6   OriginLink = r.Weather.OriginLink,
7   Label = r.Weather.Label
8};
9

En teoria esto ya lo puedo instanciar en un new Destination(,weatherBox,)

El problema es que necesito convertir los dos arreglos de objetos en una lista de los modelos PromoSlider , Promos para poder hacerlo, encontré la siguiente solución pero no funciona:

1var SliderList = JsonConvert.DeserializeObject&lt;List&lt;PromoSlider&gt;&gt;(r.PromoSlider);

Como obtener el offset de la fecha actual en javascript

Henrry Ramirez@henryraygan

hace 4 años

Encontré el siguiente metodo en stackoverflow:

Lo que intento es:

Hoy es 24 de Enero de 2020, la fecha con diferencia deseo que sea 27 de Enero de 2020 y así sucesivamente

En este ejemplo obtenemos de hoy para ir a 3 días después y obtener esta nueva fecha

1let date = new Date();
2let offset  = 24 * 60 * 60 * 1000 * 3;
3date.setTime(date.getTime() + offset );

Yo deseo hacer esto de forma generica ya que estaré usando para diferentes fechas, pero, noto que la función depende mucho de la instancia de la fecha, por ende debo de crear una variable con la misma fecha de hoy para obter un offset de diferente rango.

intente algo como esto, pero no funciono,

1getOffsetDays(date, offset) {
2     let size = 24 * 60 * 60 * 1000 * offset;
3     return date.setTime(date.getTime() + size);
4   }

Saludos y gracias

Como saber si un Segment Uri en C# es null o no, si existe o no

Henrry Ramirez@henryraygan

hace 5 años

Tengo el siguiente problema:

El sitio no tiene Blazor o Razor, está en plano debido a que es heredado.

1var url = HttpContext.Current.Request.Url.Segments;

Cuando uso ese pedazo de código puedo obtener los dos primeros segmentos, pero en cierto momento existirá el url[2] pero mientras no exista me gustaría comprobarlo, no puedo usarlo tal cual como:

1if(url[2] != null)

Alguna sugerencia de como hacerlo o comprobar si existe o no?

¿Cómo utilizar Diccionarios en ASP.NET con C#?

Henrry Ramirez@henryraygan

hace 5 años

Hola, me encuentro trabajando en un proyecto legacy, siendo muy sincero es la primera ocasión que trabajo con ASP.NET y C#.

Por configuraciones anteriores no puedo usar el MVC al 100% por ciento, realmente sólo son sitios estáticos, por ende solo usamos la vistas, así que he decidido controlar la información en Diccionarios, haciendo algo similar al uso de JSON como se usan en otros motor de templates como handlebars.

Mi duda es, como puedo hacer los equivalentes de JSON en Diccionarios de C#, por ejemplo, hice lo siguiente:

JSON:

1 &#34;about&#34;: {
2     &#34;title&#34;: &#34;Texto&#34;,
3      &#34;description&#34;: [ &#34;texto&#34;, &#34;texto.&#34;, &#34;texto&#34; ]
4  }

ascx (c#):

1 &lt;%@ Control Language=&#34;C#&#34; %&gt;
2&lt;%
3   var About = new Dictionary&lt;string, string[]&gt;() {
4       { &#34;title&#34;, new string[] {&#34;texto&#34; } },
5       { &#34;description&#34;, new string[] {
6           &#34;texto&#34;,
7           &#34;texto.&#34;,
8           &#34;texto.&#34;
9           }
10       }
11   };
12   ViewData[&#34;dicAbout&#34;] = About;
13%&gt;

Quiero saber como replicar este formato json en ascx (c#)

1&#34;our_oferts&#34;: {
2            &#34;title&#34;: &#34;Title&#34;,
3            &#34;items&#34;: [
4              {
5                &#34;cover&#34;: &#34;path/foto.png&#34;,
6                &#34;title&#34;: &#34;Title Text&#34;,
7                &#34;redirect&#34;: &#34;...&#34;
8              },
9              {
10                &#34;cover&#34;: &#34;path/foto.png&#34;,
11                &#34;title&#34;: &#34;Title Text&#34;,
12                &#34;redirect&#34;: &#34;...&#34;
13              },
14              {
15                &#34;cover&#34;: &#34;path/foto.png&#34;,
16                &#34;title&#34;: &#34;Title Text&#34;,
17                &#34;redirect&#34;: &#34;...&#34;
18              }
19            ]
20          }

¿Cómo conseguir URL amigables en S3 con muchos archivos .html?

Henrry Ramirez@henryraygan

hace 5 años

Alguien conoce un camino para que un s3 que funciona como un hosting de sitios estaticos pueda conseguir el uso de url amigables, cuando obviamente prescindomos de un servidor a la hora de deployar. Claro está que la opción más obvia es usar frameworks de una sola página como lo son: Angular o Vuejs, pero este no es el caso.

¿Alguien lo ha implementado? ¿o lo ha hecho con alguna otra herramienta?

¿Qué reproductor usa EDTeam?

Henrry Ramirez@henryraygan

hace 5 años

Actualmente me encuentro en el desarrollo de un usuario web donde planeamos subir vídeos, el de EDTeam se parece al de vimeo, la duda es... ¿es de vimeo? ¿es nativo de edteam? ¿es un plugin? se que está última es poco probable, pero alguien tiene el dato, o... ¿qué recomiendan como video player dentro de un sitio web? Que no sea youtube

¿Existe una forma correcta de quitar la práctica de Lorem Ipsum?

Henrry Ramirez@henryraygan

hace 5 años

Ando creando un formato para solicitar diseño web a cierto departamento, y quiero especificar la forma en la que nos deben de entregar los textos dentro de los diseños, por ejemplo, evitar que haya mucho Lorem Ipsum en el diseño que nos evite maquetar la web de forma correcta o prevenir los componentes de UI se desborden cuando el componente sea dinámico

¿Se puede implementar SMACSS con SCSS en Angular 4 y versiones posteriores?

Henrry Ramirez@henryraygan

hace 5 años

He utilizado Vuejs, EDBoilerplate, Boilerplates con gulp o webpack, Reactjs y he notado que en todas ellas se puede implementar de forma rápida y eficiente SMACSS separando toda la arquitectura de mi CSS en sus propio scafold como en la siguiente imagen.

Smacss

Mi duda surge en como poder implementar esta separación en Angular 4 - 7, quiero separar todo en esa carpeta

Supongamos que lo siguiente es mi scafold de mi app de angular quiero poder hacer lo que está resaltado

No sé si la respuesta sea obvia, en Vuejs no sabía como configurarlo hasta que noté que unicamente tenia que instalar el loader de sass en el proyecto y en el main.js solo necesité poner un require(./scss/styles.sccs) para que se pudiera compilar a la hora de hacer SCSS.

No busco usar Sass dentro mi mi propio componente como está acostumbrado, busco separar el CSS de la logica y la maqueta como lo hacemos en Angular comunmente por cuestiones del proyecto.

De antemano gracias.

PROBLEMA CON META TAGS HTML

Henrry Ramirez@henryraygan

hace 5 años

Hola comunidad, desarrolle un sitio para un evento, la verdad nunca había implementado metas para que al compartir el link salgan, de ahí surge una duda, yo publique la demo del sitio en aws, para que vayan viendo todos los del equipo como iba la web, al compartir ese link que proporciona AWS todo bien, mi metas se ven al compartir el link.

El problema yace cuando lo subimos al sitio oficial, no se ve reflejada ninguna tag, saben a que se podría deber?

Mi código es el siguiente y use vuejs para el sitio:

1 &lt;meta charset=&#34;utf-8&#34;&gt;
2   &lt;meta http-equiv=&#34;X-UA-Compatible&#34; content=&#34;IE=edge&#34;&gt;
3   &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width,initial-scale=1.0&#34;&gt;
4
5   &lt;meta name=&#34;theme-color&#34; content=&#34;#3c6eb4&#34;&gt;
6   
7   &lt;meta property=&#34;og:site_name&#34; content=&#34;Flisol Cancún&#34;&gt;
8   &lt;meta property=&#34;og:title&#34; content=&#34;Flisol Cancún&#34; /&gt;
9   &lt;meta property=&#34;og:description&#34; content=&#34;15º Festival Latinoamericano de Instalación de Software Libre &#34; /&gt;
10   &lt;meta property=&#34;og:image&#34; content=&#34;https://flisol-cancun.com/media/flisolcancun.png&#34;&gt;
11   &lt;meta property=&#34;og:type&#34; content=&#34;website&#34; /&gt;
12   &lt;meta property=&#34;og:updated_time&#34; content=&#34;1440432930&#34; /&gt;
13
14   &lt;meta name=&#34;twitter:card&#34; content=&#34;summary_large_image&#34;&gt;
15   &lt;meta name=&#34;twitter:card&#34; content=&#34;summary_large_image&#34;&gt;
16   &lt;meta name=&#34;twitter:site&#34; content=&#34;@flisolcancun&#34;&gt;
17   &lt;meta name=&#34;twitter:title&#34; content=&#34;Sitio Oficial de Flisol Cancun.&#34;&gt;
18   &lt;meta name=&#34;twitter:description&#34; content=&#34;15º Festival Latinoamericano de Instalación de Software Libre evento de difusión de Software Libre más grande en Latinoamérica&#34;&gt;
19   &lt;meta name=&#34;twitter:image&#34; content=&#34;https://flisol-cancun.com/media/flisolcancun.png&#34;&gt;
20
21   &lt;meta name=&#34;revisit-after&#34; content=&#34;1 days&#34;&gt;
22   &lt;meta http-equiv=&#34;Expires&#34; content=&#34;0&#34;&gt;
23   &lt;meta http-equiv=&#34;Pragma&#34; content=&#34;no-cache&#34;&gt;
24   &lt;meta http-equiv=&#34;Cache-Control&#34; content=&#34;no-cache&#34;&gt;
25
26   &lt;link rel=&#34;icon&#34; href=&#34;//flisol-cancun.com/media/FLISOL-LOGO-PNG.png&#34;&gt;
27   &lt;link rel=&#34;stylesheet&#34; href=&#34;https://use.fontawesome.com/releases/v5.6.3/css/all.css&#34; integrity=&#34;sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/&#34; crossorigin=&#34;anonymous&#34;&gt;
28   &lt;link href=&#34;https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700&#34; rel=&#34;stylesheet&#34;&gt;
29   &lt;link href=&#34;https://fonts.googleapis.com/css?family=PT+Sans&#34; rel=&#34;stylesheet&#34;&gt;
30   &lt;title&gt;Flisol Cancún - 2019&lt;/title&gt;
31 &lt;/head&gt;