GitHub lanzó recientemente una función que permite a los usuarios crear un archivo README a nivel de perfil para mostrarlo de manera destacada en tu perfil de GitHub sustituyendo a la pantalla tradicional con tus repositorios.
En este artículo te explicaré cómo acceder a esta nueva función. También compartiré algunos perfiles curiosos de GitHub que he visto en otros usuarios que te podrán dar ideas para generar tu propio perfil personalizado 😜.
¿Has probado alguna vez a crear un repositorio en GitHub con tu mismo nombre de usuario? Por ejemplo, mi usuario en GitHub es alextomas80, entonces, para mostrarte ésta…
A lo largo de los años me he encontrado en proyectos que tienen diferentes áreas dentro de ese mismo proyecto (web, app, panel de administración…) y se tiene que mantener el aspecto de ciertos componentes en todas las partes de la aplicación.
Un ejemplo sencillo
sería el típico botón con el color corporativo. Resulta que ese botón lo quieres utilizar en diferentes proyectos de ese mismo cliente, y el botón va a ser siempre IGUAL. ¿Qué hacemos?
Pues aquí tenemos tres opciones, a mi modo de ver:
El spread operator que incorpora ECMAScript 6 en JavaScript es un operador que simplifica la recogida de valores en una estructura de datos. Su representa con tres puntos: ...
La definición que nos da MDN es: “Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.”
Lo que quiere decir que este operador distribuye los elementos dentro de…
¿Cómo puedo eliminar un elemento de un array? Seguro que te has hecho esta pregunta muchas veces y la has buscado en Google. Son cosas básicas que no le damos importancia pero que siempre se nos olvida que tenemos más de una forma diferente. Aquí las tienes:
shift
El método shift() elimina el primer elemento del array y lo devuelve.
const array = [1, 2, 3, 4, 5];array.shift();
console.log(array);// Resultado -> [2, 3, 4, 5]
pop
El método pop() elimina el último elemento de un array y lo devuelve.
const array = [1, 2, 3, 4, 5];array.pop();
console.log(array);//…
La desestructuración es una característica muy conveniente al desarrollar con JavaScript, es una expresión que nos permite desempaquetar valores de arrays u objetos en grupos de variables, permitiéndonos simplificar y crear código más legible
.
La sintaxis básica sería:
let { variable1, variable2 } = { variable1: ..., variable2: ... }
Supongamos que tenemos el siguiente ejemplo de un objeto en JavaScript:
const usuario = {
id: 123,
nombre: 'Alex',
apellidos: 'Tomás',
url: 'https://alextomas.com'
};
Antiguamente, para obtener la una propiedad del objeto usuario
haríamos algo como:
const nombre = usuario.nombre;
console.log(nombre);// Resultado -> Alex
Eso no está mal, pero…
El HTML como tal no tiene una forma de expresar lógica, como podría ser los condicionales y bucles. Svelte lo hace.
Para renderizar condicionalmente algún marcado, lo envolvemos en un bloque if:
<script>
let user = { loggedIn: false }; function toggle() {
user.loggedIn = !user.loggedIn;
}
</script>{#if user.loggedIn}
<button on:click={toggle}>
Log out
</button>
{/if}{#if !user.loggedIn}
<button on:click={toggle}>
Log in
</button>
{/if}
Esto funciona, pero no es lo más limpio de ver. Para eso tenemos el else
que veremos a continuación.
Dado que las dos condiciones (si user.loggedIn
y si !user.loggedIn
), …
In this article we will see how to create an image gallery in Svelte (carousel gallery) in a very simple way, creating your own component and without the need for external plugins or libraries.
Let’s go! 💃🏻
To create a project in Svelte, let’s remember, with the following command:
npx degit sveltejs/template <Nombre_del_proyecto>
For the example I will call the project galeria-svelte
:
npx degit sveltejs/template galeria-svelte
Degit
clones just the published git workspace and not the git repo.
Then, we only have to install the dependencies with yarn install
or npm install
(that’s your choice, I’ll use NPM).
cd galeria-svelte…
En este artículo veremos como crear una galería de imágenes en Svelte (carousel gallery) de una forma muy sencilla, creando tu propio componente y sin necesidad de plugins o librerías externas.
¡Así que vamos a empezar! 💃🏻
Para crear un proyecto en Svelte, recordemos, con el siguiente comando:
npx degit sveltejs/template <Nombre_del_proyecto>
Para el ejemplo voy a llamar el proyecto galeria-svelte
:
npx degit sveltejs/template galeria-svelte
Degit
clona solo el espacio de trabajo publicado de git y no el repositorio.
Entonces, sólo nos queda instalar las dependencias con yarn install
o npm install
(eso ya a tu elección, yo usaré NPM).
…
Índice de contenidos
Netlify es una plataforma que nace para automatizar proyectos webs estáticos. Aúna las tareas de integración continua y despliegue de infraestructura web en un solo flujo de ejecución.