NoWhyLogs
1.0.0
AKA Nowhylogs
? /Juditkaramazov
? Portfolio
☕ Blog
Erinnerst du dich, als ich mich in ... Astro verliebt habe? Nun, hier gehen wir wieder! Typscripts Type-Sicherheit und Entwicklerfreundlichkeitsfunktionen, die dynamische Interaktivität von React und die wiederverwendbaren Komponenten ... und Astro natürlich.
Wenn Sie sich zufällig mit seiner charakteristischen Flexibilität und den ordentlichen Ergebnissen beginnen möchten, ermöglichen Sie mir, Sie daran zu erinnern, dass das Erreichen eines solchen Ziels nicht einfacher sein könnte, wenn Astro in das Match angeschlossen wird. Nun, und für den Fall, dass dies ein weiterer derjenigen, die für Sie Speed ™ -Momente für Sie benötigen , sollten Sie die folgenden Schritte in Betracht ziehen.
Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:
npm create astro@latestEs sind sogar Startervorlagen verfügbar:
# 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 >Endlich:
npm run devEinfach, richtig? Fühlen Sie sich frei, die Dokumentation von Astro zu überprüfen oder in ihren Discord -Server zu springen. Genießen Sie die Fahrt, Kollegen! ?
Tipp
Was auch immer Sie sich entscheiden, denken Sie bitte daran, den Verhaltenskodex zu respektieren, während Sie mit dem Projekt und der Plattform selbst interagieren. Vielen Dank für Ihre Zeit und Geduld!
Vor ein paar Tagen habe ich mein erstes No Why Games - Devlog -Eintrag wie folgt gestartet:
Als die letzten hitzigen Stunden dieses Tages August von Barcelona wegschifft, kühlen wir unsere Bildschirme mit einigen seltsamen, digitalen, digitalen Wörtern dieser Website ab, die die Natur und Architektur dieser Website erklären. Heftig menschlich, von Natur aus spontan.
Ehrlich gesagt habe ich ziemlich lange gebraucht, um meine Gedanken in Worte zu artikulieren - und ich brauchte noch länger, um den notwendigen Mut und die mentale Stärke zu sammeln, um endlich eine Seite zu schaffen, die als gültige Darstellung meiner Missgeschicke als etwas anderes dienen könnte als ein "Website -Entwickler" - ein Etikett, das ich nicht mehr verwendet habe, als mir klar wurde, dass meine Arbeit die Küste des Konzepts der "Software" ohne relevante Grenzen mehr erreichte.
Erinnern Sie sich an Red Hot Chili Peppers emblematisches Road Trippin? . Spezifischer Grund, und nach Tonnen von Höhen und Tiefen, Momente, in denen ich mich stillschweigend fragte: "Wer soll ich sein?", Und einige andere unglückliche, aber menschliche Folgen, sagte ich mir, dass ich einen Raum brauchte , der irgendwann etwas werden könnte Ähnlich wie dieser Spiegel für die Sonne . Ein Spiegel für die Seele, wenn überhaupt.
Wie einige von Ihnen wahrscheinlich wissen, besitze ich bereits einen privaten Blog, in dem ich einige meiner Gedanken, Analysen und Unsinn teilen kann. Ich habe jedoch immer noch nicht an einem Lagerfeuer gearbeitet, in dem ich sitzen konnte, mir die Zeit nehmen, um die Essenz der video game development zu verdauen und die Reise selbst in Form eines "Tagebuch" oder "Dev -Blog" darzustellen. Deshalb existiert Nowhylogs (ein personal devlog containing relevant information on my progress as an indie developer ), nehme an. Wenn der Nebel viel zu dicht wird, müssen wir alle unseren eigenen Leuchtturm finden.
Apropos Leuchttürme! Ist die vorherige Partitur nicht nur schön ?
Obwohl ich einfach und zugänglich ist, habe ich mir keine Mühe gemacht No Why Games - Devlog einen Spiegel (ein anderer!) Meiner Absichten und inneren Regeln als Entwickler, immer performance , accessibility und best practices zuerst.
"Wie haben Sie das gemacht, Judit?, Fragte absolut niemand. Lassen Sie mich ein paar Geheimnisse und Funktionen teilen, damit Sie sehen können, was der Schlüssel war.
Zweifellos bedeutet alles, was mit dem Konzept der Accessibility zu tun hat, zu einem immensen Ozean von Möglichkeiten, Zweifeln und neuen Dingen, die jeden Tag lernen müssen. Ich wollte jedoch sicherstellen, dass dieser Devlog as accessible as possible war (und nicht nur dank der richtigen Wahrzeichen), was bedeutet, dass Sie durch die Verwendung von:
KeyboardVoiceOver ? Euen Tipp
Als Beispiel können Sie Voice -Over auf einem iPhone einschalten, das iOS 17 oder später mit iOS ausgeführt wird. Dies kann aus Einstellungen -> Barrierefreiheit -> Voice -Over erfolgen.
OG -Bilder, auch als "soziale Bilder" bezeichnet (dies ist ein Bild, das immer dann angezeigt wird, wenn wir unsere Website -URL auf Plattformen wie Twitter, WhatsApp, Discord usw. teilen), spielen eine wesentliche Rolle im Engagement in sozialen Medien - aber wir ziehen nicht an. Ich habe normalerweise die Zeit, sie einzeln vorzubereiten ... richtig? Rechts...? ( Vielleicht bin ich der einzige, der dieses Problem gegenübersteht ... )
Obwohl es möglich ist, ein Standard-OG-Image als Fallback (in diesem Fall public/nowhylogs-og.jpg ) zu verwenden, wollte ich die statische Verwendung (und sogar Überbeanspruchung) desselben Bildes vermeiden, das nach dem Postposten angezeigt wird, wenn kein anderer Ogimage ist in der Frontmatter angegeben.
Dank der Satoris Bibliothek, in der es in der Lage ist, HTML und CSS in SVG umzuwandeln (es hat seine Grenzen, wie RTL -Sprachen, die noch nicht unterstützt werden ... aber geben Sie ihm Zeit!), War es möglich , dynamische OG -Bilder zum Erstellen von Zeiten für Beiträge zu generieren, die Beiträge, die Beiträge, die Beiträge haben, die Beiträge, die Beiträge, generieren, in deren Beiträge, die Beiträge haben, die Beiträge haben, die Beiträge, die Beiträge haben, die Beiträge haben, die Beiträge haben, die Beiträge, die Beiträge haben, die Beiträge haben, die Beiträge haben, die Beiträge haben, die Beiträge haben, die Beiträge haben, die Beiträge haben, die Beiträge haben, die Beiträge haben, die Beiträge haben, die Beiträge haben, die Beiträge generieren, die Beiträge generieren, die Beiträge generieren, die Beiträge generieren, in denen es sich Nichts einschließen . Dann finden Sie ein wunderschönes Bild, das anzeigt:
Post title .Author name .Site title . Wenn Sie nicht-Latin-Zeichen verwenden müssen, denken Sie bitte daran, Ihre bevorzugte Schriftart in src/utils/loadGoogleFont.ts hinzuzufügen:
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.Denken Sie daran, dass Sie oft versucht haben, etwas Spezifisches auf einer Website ohne Suchwerkzeuge zu finden? Was haben die Gottheiten, die Sie beteten, um darüber zu sagen, lieber Fremder? Sag nicht mehr! Da mir das normalerweise auch in diesen Tagen passiert, habe ich erneut eine globale Suche durch Fuse.js , eine leichte Fuzzy-Search-Bibliothek, mit null Abhängigkeiten aufgenommen!
Für weitere Informationen können Sie gerne besuchen:
Tipp
Angesichts der Tatsache, dass ich täglich Fuse.js verwendet habe, können Sie auch überprüfen, wie ich ihn in meinem geliebten Karamablog implementiert habe. Ich verspreche, dass Sie es nicht bereuen werden!
Tragen Sie Ihre Sonnenbrille schon? Keine Notwendigkeit. So wie es heutzutage obligatorisch ist, habe ich einen theme switcher integriert, um die visuelle Erfahrung der Leser zu verbessern. Warum? Denn obwohl es "Devlog" steht, ist es immer noch ein Blog - und unsere Retinas sollten uns sehr wichtig sein!
Weitere Informationen zu dieser spezifischen Funktion und ihrer Komponenten finden Sie unter:
"Können wir einmal aufhören, SEO-ITHINGYS zu diskutieren, Judit?" , nicht ganz, nicht ganz ! Wenn es sich um eine Frage der Diskussion handelt, liegt es einfach daran, dass seine Existenz uns in gewisser Weise zugute kommen könnte. Lassen Sie mich erklären:
Was wir als "SEO -freundlichem Inhalt" bezeichnen, ist die Art von Inhalten, die so erstellt wurde, dass die Suchmaschinen sie hoch rangieren - und nein, es geht nicht nur um Keywords. Lustigerweise soll das, was wir "SEO" nennen, wirklich dazu dient, Suchmaschinen zu finden, zu verstehen und Ihre Inhalte mit dem Thema zu verbinden, das Sie abdecken möchten.
Erinnerst du dich an das dynamic ogImage das wir zuvor besprochen haben? Sogar solche Bilder (offene Grafik) sind nützlich für das Teilen von sozialen Medien und für SEO ... und das ist nur ein Teil davon!
Schauen wir uns beispielsweise unsere Datei config.ts -Datei an:
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 ,
}Alle diese Elemente (einschließlich kanonischer URLs, soziale Karten usw.) sind unerlässlich, damit unsere Website von Suchmaschinen leicht gekrabbt und indiziert wird , was zu einer besseren Sichtbarkeit in den Ergebnissen der Suchmaschine führt.
Wie Sie alle wissen, ist RSS ein Web-Feed, mit dem Benutzer und Anwendungen in einem standardisierten, computerlesbaren Format auf Aktualisierungen auf Websites zugreifen können. Wenn Sie das Gefühl haben, schnell zu widmen, was Sie und meine Protokolle für Sie relevant sind, zögern Sie nicht, den welligen Knopf zu drücken! ?
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 ) ,
} ) ) ,
} )
}Je einfacher, desto besser!
Mit Ihrem schönen Terminal können Sie alle Befehle aus der Wurzel des Projekts ausführen:
| Befehl | Aktion |
|---|---|
npm install | Abhängigkeiten installieren. |
npm run dev | Starten Sie den lokalen Entwicklerserver unter localhost:4321 . |
npm run build | Bauen Sie Ihre Produktionsseite auf ./dist/ auf |
npm run preview | Vorschau Ihres Builds vor Ort. |
npm run format:check | Überprüfen Sie das Codeformat mit schöner. |
npm run format | Formatcodes mit hübscher. |
npm run sync | Generieren Sie Typ -Skriptypen für alle Astro -Module. Erfahren Sie hier mehr. |
npm run lint | Lint mit Eslint. |
docker compose up -d | Führen Sie Nowhylogs auf Docker aus. |
docker compose run app npm install | Führen Sie einen beliebigen Befehl oben in den Docker -Container aus. |
docker build -t nowhylogs . | Erstellen Sie das Docker -Bild für Nowhylogs. |
docker run -p 4321:80 nowhylogs | Führen Sie Nowhylogs auf Docker aus. Die Website ist unter http://localhost:4321 zugänglich. |
Ah, ja ... die Stile, die Stile ...!
Das Wichtigste zuerst erlauben Sie mir, einige der Schlüsselelemente zu teilen, die die Existenz dieser Website ermöglicht haben:
Dies ist jedoch nur ein minimaler Bestandteil der realen Arbeit (menschlich) hinter diesem kleinen Projekt.
Was die Farbpalette selbst angeht, jetzt, da kein Grund, warum Spiele eine Sache sind, musste ich mich (leicht) von dem Stil distanzieren, an den ich es gewohnt war, wie man in meinem persönlichen Portfolio und Blog sehen konnte. Diese Entfernung sowie die neue Annäherung an mich selbst (der Indie-Entwickler jetzt) wäre ohne einen äußerst bekannten Künstler hier nicht möglich gewesen: @aunedelec.
Erlauben Sie mir, zunächst zu sagen, dass es mir sehr leid tut, Ihr unglaublich schönes Logo zu zerstören, aber es stellt sich heraus, dass ich der schlechteste Künstler bin, den Sie jemals in Ihrem ganzen Leben finden werden. Abgesehen von allen Witzen, wenn es nicht für unsere Gespräche wären, wenn Sie einen Kaffee in Viena, Ihre Geduld, Ihre Unterstützung, Ihr scharfer Auge und Ihre extremen Fähigkeiten teilen, hätte ich nie den Mut gesammelt, Videospiele auf eine Weise zu umarmen, die nicht auf das Schreiben beschränkt ist , sprechen und über sie denken .
Wenn es hier etwas hinzufügen möchte, als: "Danke für Ihr Talent, Ihre Unterstützung und Ihr Unternehmen", ist das immens: "Danke, dass Sie Teil meines Lebens sind". Egal wie dunkel der Himmel manchmal aussehen mag, diese Wolken blassen immer vor der Sonne ... und Grenoble hat eine schöne Sonne, die man vom Balkon aus bewundern kann!
Los Jugadores Sohn Mis Amigos . Trotzdem konnte ich dieses neue Kapitel meines beunruhigenden Lebens nicht schließen, ohne ein lautes und aufrichtiges: Thank you! ? .
Vielen Dank an unseren erstaunlichen Sponsor @Entreprises LEMRHALI , thank you so much für Ihre Unterstützung, Ruhe, Wissen, Geduld und gesamte Existenz. In letzter Zeit ist "Unsicherheit" eine Arbeit, die einen großen Schatten in unserem Land verbreitet - und glauben Sie mir, wenn ich sage, ich würde gerne diese Realität ändern, wenn es nur für mich möglich wäre (wo habe ich meinen magischen Zauberstab vergessen Zeit? Ah ...) . Ich glaube jedoch, dass alles früher als später seinen Platz finden wird.
Wie jemand einmal sagte:
Eine zwischenstaatliche Autobahn-fünfundsechzig-läuft von Alabama bis nur schüchtern von Chicago. Es sollte in diesem Teil von Kentucky die Zeit verlassen, aber das Tageslicht wird einfach nicht erschüttern. Die Sonne wird einfach nicht verschwinden.
Was bedeutet: Hay Esperanza.
Diese Arbeit lebt unter dem robusten, warmen und schönen Dach der MIT -Lizenz; Unabhängig von den visuellen oder schriftlichen Inhalten werden Sie immer eine ordnungsgemäße Referenz finden, in der die Autoren und Websites dahinter angegeben sind.
Zuschreibungen sind heutzutage von wesentlicher Bedeutung, und wer direkt oder indirekt an diesem Projekt teilgenommen hat, verdient die bestmögliche Anerkennung. Das heißt, und nur, wenn Sie es genossen haben, was Sie hier gefunden haben, denken Sie daran, dass Sie den Dinosaurier extrem glücklich machen können, wenn Sie ...
