NoWhyLogs
1.0.0
también conocido como nowhylogs
? /Juditkaramazov
? Cartera
☕ Blog
¿Recuerdas cuando me enamoré de ... Astro ? Bueno, ¡aquí vamos de nuevo! Las características de seguridad y desarrollador de Typecript , la interactividad dinámica de React y los componentes reutilizables ... y Astro , por supuesto.
Si por casualidad desea comenzar con su flexibilidad característica y resultados ordenados, permíteme recordarle que lograr tal objetivo no podría ser más fácil una vez que Astro se una al partido. Ahora, y en caso de que este sea otro de esos momentos de necesidad de Speed ™ para usted, considere los siguientes pasos.
Abra su terminal y ejecute el siguiente comando:
npm create astro@latestIncluso hay plantillas de inicio disponibles:
# create a new project with an official example
npm create astro@latest -- --template < example-name >
# create a new project based on a GitHub repository’s main branch
npm create astro@latest -- --template < github-username > / < github-repo >Finalmente:
npm run devFácil, ¿verdad? Siéntase libre de verificar la documentación de Astro o saltar a su servidor de discordias. ¡Disfruta el viaje, compañero astronauta! ?
Consejo
Lo que sea que decida hacer, recuerde respetar el código de conducta mientras interactúa con el proyecto y la plataforma en sí. ¡Muchas gracias por su tiempo y paciencia!
Hace un par de días, comencé mis primeros juegos de No Why - Devlog de la siguiente manera:
A medida que las últimas horas acaloradas de este día de agosto se alejan de Barcelona, estamos enfriando nuestras pantallas con algunas palabras extrañas y digitales que explican la naturaleza y la arquitectura de este sitio. Ferozmente humano, inherentemente espontáneo.
Con toda honestidad, me llevó bastante tiempo articular mis pensamientos en palabras, y me llevó aún más tiempo reunir el coraje y la fuerza mental necesarias para finalmente crear un sitio que podría servir como una representación válida de mis desventuras como algo más que un "desarrollador de sitios web", una etiqueta que dejé de usar cuando me di cuenta de que mi trabajo estaba llegando a las costas del concepto de "software", sin fronteras relevantes.
¿Recuerdas el emblemático camino de Red Hot Chili Pepper que trippin? ( "¿Estás bromeando, Judit? Es una obra maestra; ¡por supuesto que recordamos!" , Huh, bueno. Es bueno verte de nuevo, chicos). "Solo un espejo para el sol" es una de esas líneas que golpean duro para No razón específica, y después de toneladas de altibajos, momentos en los que me volví a preguntar en silencio: "¿Quién se supone que debo ser?", Y algunos otros episodios desafortunados pero humanos, me dije que necesitaba un espacio que eventualmente podría convertirme en algo Similar a ese espejo para el sol . Un espejo para el alma, en todo caso.
Como probablemente algunos de ustedes sepan, ya tengo un blog privado donde puedo compartir algunos de mis pensamientos, análisis y tonterías; Sin embargo, todavía no trabajé en una hoguera donde podía sentarme, tomarme el tiempo para digerir la esencia del video game development y representar el viaje en sí mismo en forma de "diario" o "blog de desarrollo". Es por eso que ahora existe ahora los NowhyLogs (un personal devlog containing relevant information on my progress as an indie developer ). Cuando la niebla se vuelve demasiado densa, todos necesitamos encontrar nuestro propio faro.
¡Hablando de faros! ¿No es el puntaje anterior encantador ?
Si bien es simple y accesible, puse un esfuerzo en No Why Games - Devlog a Mirror (¡otro!) De mis intenciones y reglas internas como desarrollador, siempre poniendo performance , accessibility y best practices primero.
"¿Cómo hiciste eso, Judit?, No se le preguntó absolutamente a nadie. Déjame compartir un par de secretos y características para que puedas ver cuál ha sido la clave ?, Entonces.
Sin lugar a dudas, lo que tenga que ver con el concepto de Accessibility se traduce en un inmenso océano de posibilidades, dudas y cosas nuevas para aprender cada día. Sin embargo, quería asegurarme de que este devlog fuera as accessible as possible (y no solo gracias a los puntos de referencia adecuados), lo que significa que podrá navegarlo usando:
KeyboardVoiceOver ? ️ Consejo
Como ejemplo, puede activar la voz en off en un iPhone que ejecuta iOS 17 o posterior. Esto se puede hacer desde Configuración -> Accesibilidad -> VoiceOver.
Las imágenes OG, también conocidas como "imágenes sociales" (esta es, una imagen que se muestra cada vez que compartimos la URL de nuestro sitio web en plataformas como Twitter, WhatsApp, Discord, etc.), juegan un papel esencial en el compromiso de las redes sociales, pero no nos quedamos ' Por lo general, tengo tiempo para prepararlos uno por uno ... ¿verdad? Bien...? ( Quizás soy el único que enfrenta este problema ... )
Aunque es posible utilizar una imagen OG predeterminada como un respaldo (en este caso, public/nowhylogs-og.jpg ), quería evitar el uso estático (e incluso el uso excesivo) de la misma imagen que se muestra después de una publicación cuando no hay otra Ogimage se especifica en la marina frontal.
Gracias a la biblioteca de Satori, capaz de convertir HTML y CSS en SVG (tiene sus limitaciones, como los idiomas RTL que aún no son compatibles ... ¡pero dale tiempo!), Es posible generar imágenes dinámicas de OG en el tiempo de compilación para publicaciones que No incluya ninguno . Entonces, encontrarás una hermosa imagen que se muestra:
Post title .Author name .Site title . Si necesita usar caracteres no latinos, recuerde agregar su fuente preferida en src/utils/loadGoogleFont.ts :
async function loadGoogleFonts (
text : string
) : Promise <
Array < { name : string ; data : ArrayBuffer ; weight : number ; style : string } >
> {
const fontsConfig = [
{
name : "IBM Plex Mono" ,
font : "IBM+Plex+Mono" ,
weight : 400 ,
style : "normal" ,
} ,
{
name : "IBM Plex Mono" ,
font : "IBM+Plex+Mono:wght@700" ,
weight : 700 ,
style : "bold" ,
} ,
]
// Rest of the code.¿Recuerdas las muchas veces que intentaste encontrar algo específico en un sitio web sin herramientas de búsqueda? ¿Qué las deidades que rezaste para decir eso, querido extraño? ¡No diga más! Dado que eso es lo que generalmente me sucede incluso hasta estos días, incluí nuevamente una búsqueda global empoderada por Fuse.js , una biblioteca ligera de búsqueda difusa ... ¡con cero dependencias!
Para obtener más información, no dude en visitar:
Consejo
Dado que ya usé Fuse.js en el pasado, también puede verificar cómo lo implementé en mi querido Karamableg. ¡Prometo que no te arrepentirás!
¿Ya llevas tus gafas de sol? No hay necesidad. Al igual que es obligatorio hoy en día, incorporé un theme switcher para mejorar la experiencia visual para los lectores. ¿Por qué? Porque aunque dice "Devlog", sigue siendo un blog, ¡y nuestras retinas deberían importarnos mucho!
Para obtener más información sobre esta característica específica y sus componentes, eche un vistazo a:
"¿Podemos dejar de discutir Seo-Thingy por una vez, Judit?" , no del todo, no del todo ! Si es una cuestión de discusión, es simplemente porque su existencia podría beneficiarnos, de alguna manera. Déjame explicarte:
Lo que llamamos "contenido amigable con SEO" es el tipo de contenido que se crea de una manera que ayuda a los motores de búsqueda a clasificarlo alto, y no, no se trata solo de palabras clave. Curiosamente, lo que llamamos "SEO" está realmente destinado a ayudar a los motores de búsqueda a encontrar, comprender y conectar su contenido con el tema que está tratando de cubrir.
¿Recuerdas la dynamic ogImage que discutimos antes? Incluso esas imágenes (gráficas abiertas) son útiles para el intercambio de redes sociales y SEO ... ¡y eso es solo una parte de eso!
Echemos un vistazo a nuestro archivo config.ts, por ejemplo:
export const SITE : Site = {
website : "https://nowhylogs.vercel.app/" ,
author : "Judit Lázaro" ,
desc : "A minimal devlog containing No Why Games' misadventures." ,
title : "No Why Games - Devlog" ,
ogImage : "nowhylogs-og.jpg" ,
lightAndDarkMode : true ,
postPerPage : 3 ,
scheduledPostMargin : 15 * 60 * 1000 ,
}Todos estos elementos (incluidas las URL canónicas, las tarjetas sociales, etc.) son esenciales para que nuestro sitio se arrastre e indexe fácilmente por los motores de búsqueda , lo que lleva a una mejor visibilidad en los resultados de los motores de búsqueda.
Como todos saben, RSS es un feed web que permite a los usuarios y aplicaciones acceder a actualizaciones a los sitios web en un formato estandarizado y legible por computadora. Si siente que rápidamente está desmalanceado lo que le interesa a usted y a mis registros son relevantes para usted ... ¡no dude en presionar el botón ondulado! ?
import rss from "@astrojs/rss"
import { getCollection } from "astro:content"
import getSortedPosts from "@utils/getSortedPosts"
import { SITE } from "@config"
export async function GET ( ) {
const posts = await getCollection ( "blog" )
const sortedPosts = getSortedPosts ( posts )
return rss ( {
title : SITE . title ,
description : SITE . desc ,
site : SITE . website ,
items : sortedPosts . map ( ( { data , slug } ) => ( {
link : `posts/ ${ slug } /` ,
title : data . title ,
description : data . description ,
pubDate : new Date ( data . modDatetime ?? data . pubDatetime ) ,
} ) ) ,
} )
}¡Cuanto más fácil, mejor!
Puede ejecutar todos los comandos desde la raíz del proyecto utilizando su hermosa terminal:
| Dominio | Acción |
|---|---|
npm install | Instalar dependencias. |
npm run dev | Inicie el servidor de desarrollo local en localhost:4321 . |
npm run build | Construya su sitio de producción a ./dist/ |
npm run preview | Vista previa de su compilación localmente. |
npm run format:check | Verifique el formato de código con más bonito. |
npm run format | Códigos de formato con más bonitos. |
npm run sync | Genere tipos de mecanografiado para todos los módulos Astro. Obtenga más información aquí. |
npm run lint | Lunción con Eslint. |
docker compose up -d | Corre Nowhylogs en Docker. |
docker compose run app npm install | Ejecute cualquier comando arriba en el contenedor Docker. |
docker build -t nowhylogs . | Construya la imagen Docker para NowyLogs. |
docker run -p 4321:80 nowhylogs | Corre Nowhylogs en Docker. Se puede acceder al sitio web en http://localhost:4321 . |
¡Ah, sí ... los estilos, los estilos ...!
Lo primero es lo primero, permítame compartir algunos de los elementos clave que hicieron posible la existencia de este sitio:
Sin embargo, esa es solo una parte mínima del trabajo real (humano) detrás de este pequeño proyecto.
En cuanto a la paleta de colores en sí, ahora que no hay por qué los juegos son una cosa, tenía que (ligeramente) distanciarme del estilo que estaba tan acostumbrado, como podía ver en mi cartera y blog personales. Esta distancia, así como la nueva aproximación a mí mismo (el desarrollador independiente ahora), no hubiera sido posible sin un artista muy bien conocido por aquí: @aunedelec.
Permítame comenzar diciendo que lamento mucho por destruir su logotipo increíblemente hermoso, pero resulta que soy el peor artista que jamás encontrará en toda su vida. Dejando a un lado todos los chistes, si no fuera por nuestras conversaciones al compartir un café en Viena, su paciencia, apoyo, ojo agudo y habilidades extremas, nunca habría reunido el coraje para abrazar los videojuegos de una manera que no se limita a la escritura. , hablando y pensando en ellos .
Si hay algo que querría agregar aquí aparte de: "Gracias por su talento, apoyo y compañía", eso es inmenso: "Gracias por ser parte de mi vida". No importa cuán oscuro se pueda ver a veces el cielo, esas nubes siempre palidecen frente al sol ... ¡y Grenoble tiene un sol bastante hermoso que admirar del balcón!
Los Jugadores, hijo mis amigos . Dicho esto, no pude cerrar este nuevo capítulo de mi inquietante vida sin señalar un fuerte y sincero: Thank you! ? .
A nuestro increíble patrocinador, @Entreprises LEMRHALI , thank you so much por su apoyo, calma, conocimiento, paciencia y toda la existencia. Últimamente, la "incertidumbre" es una obra que difunde una gran sombra alrededor de nuestras tierras, y créeme cuando digo que me encantaría cambiar esa realidad si fuera posible para mí hacerlo (¿dónde olvidé mi varita mágica esto? tiempo? Sin embargo, creo que todo encontrará su lugar más temprano que tarde.
Como alguien dijo una vez:
Una carretera interestatal, sesenta y cinco, que se extiende desde Alabama hasta apenas tímido de Chicago. Debería dejar el tiempo en esta parte de Kentucky, pero la luz del día simplemente no sacudirá. El sol simplemente no desaparecerá.
Que se traduce en: Hay Esperanza.
Este trabajo vive bajo el techo robusto, cálido y hermoso de la licencia del MIT; Cualquiera que sea el contenido visual o escrito que lo sienta, siempre encontrará una referencia adecuada que especifica a los autores y sitios web detrás de él.
Las atribuciones son esenciales en estos días, y quien participó directa o indirectamente en este proyecto merece el mejor reconocimiento posible. Dicho esto, y solo si disfrutaste lo que encontraste aquí, recuerda que puedes hacer que el dinosaurio sea extremadamente feliz si ...
