NoWhyLogs
1.0.0
alias Nowhylogs
? /Juditkaramazov
? Portofolio
☕ Blog
Ingat ketika saya jatuh cinta dengan ... Astro ? Nah, ini dia lagi! Tipe TypeScript dan fitur yang ramah pengembang, interaktivitas dinamis React dan komponen yang dapat digunakan kembali ... dan Astro , tentu saja.
Jika kebetulan Anda ingin memulai dengan fleksibilitas karakteristik dan hasil yang rapi, izinkan saya untuk mengingatkan Anda bahwa mencapai tujuan seperti itu tidak bisa lebih mudah setelah Astro bergabung dengan pertandingan. Sekarang, dan untuk berjaga -jaga jika ini adalah salah satu dari kebutuhan Speed ™ untuk Anda, silakan pertimbangkan langkah -langkah berikut.
Buka terminal Anda dan jalankan perintah berikut:
npm create astro@latestBahkan ada templat pemula yang tersedia:
# 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 >Akhirnya:
npm run devMudah, kan? Jangan ragu untuk memeriksa dokumentasi Astro atau melompat ke server perselisihan mereka. Nikmati perjalanannya, sesama astronot! ?
Tip
Apa pun yang Anda putuskan untuk dilakukan, harap diingat untuk menghormati kode etik saat berinteraksi dengan proyek dan platform itu sendiri. Terima kasih banyak atas waktu dan kesabaran Anda!
Beberapa hari yang lalu, saya memulai entri No Why - Devlog pertama saya sebagai berikut:
Sebagai jam -jam terakhir yang panas pada hari Agustus ini merayap menjauh dari Barcelona, kami mendinginkan layar kami dengan beberapa kata -kata digital aneh yang menjelaskan sifat dan arsitektur situs ini. Manusia yang sangat manusia, secara inheren spontan.
Dalam semua kejujuran, saya butuh waktu yang cukup lama untuk mengartikulasikan pikiran saya menjadi kata -kata - dan saya membutuhkan waktu lebih lama untuk mengumpulkan keberanian dan kekuatan mental yang diperlukan untuk akhirnya membuat situs yang dapat berfungsi sebagai representasi yang valid dari kesalahpahaman saya sebagai sesuatu yang lain Dari "pengembang situs web" - label yang saya hentikan ketika saya menyadari bahwa pekerjaan saya telah mencapai pantai konsep "perangkat lunak", tanpa batas yang relevan lagi.
Apakah Anda ingat Red Hot Chili Pepper's Emblematic Road Trippin '? ( "Apakah kamu bercanda, Judit? Ini sebuah mahakarya; tentu saja kita ingat!" , Hah, yah. Senang bertemu denganmu lagi, teman -teman.) "Hanya cermin untuk matahari" adalah salah satu garis yang menghantam keras untuk tidak Alasan khusus, dan setelah berton -ton tinggi dan rendah, saat -saat di mana saya diam -diam bertanya pada diri sendiri: "Siapa yang seharusnya saya lakukan?", Dan beberapa episode lain yang tidak menguntungkan, saya berkata pada diri sendiri bahwa saya membutuhkan ruang yang pada akhirnya bisa menjadi sesuatu yang bisa menjadi sesuatu Mirip dengan cermin untuk matahari . Cermin untuk jiwa, jika ada.
Seperti yang mungkin Anda ketahui, saya sudah memiliki blog pribadi di mana saya dapat membagikan beberapa pemikiran, analisis, dan omong kosong saya; Namun, saya masih tidak mengerjakan api unggun di mana saya bisa duduk, meluangkan waktu untuk mencerna esensi video game development , dan mewakili perjalanan itu sendiri dalam bentuk "buku harian" atau "blog dev". Itulah sebabnya Nowhylogs ( personal devlog containing relevant information on my progress as an indie developer ) ada, saya kira. Ketika kabut menjadi terlalu padat, kita semua perlu menemukan mercusuar kita sendiri.
Berbicara tentang mercusuar! Bukankah skor sebelumnya bagus ?
Sementara sederhana dan mudah diakses, saya berupaya untuk membuat No Why Games - Devlog menjadi cermin (satu lagi!) Dari niat dan aturan batin saya sebagai pengembang, selalu menempatkan performance , accessibility , dan best practices terlebih dahulu.
"Bagaimana Anda melakukan itu, Judit ? , Tanya sama sekali tidak ada. Biarkan saya berbagi beberapa rahasia dan fitur sehingga Anda dapat melihat apa? Kunci ?, Kalau begitu.
Tidak diragukan lagi, apa pun yang berkaitan dengan konsep Accessibility diterjemahkan menjadi lautan kemungkinan besar, keraguan, dan hal -hal baru untuk dipelajari setiap hari. Namun, saya ingin memastikan bahwa devlog ini as accessible as possible (dan tidak hanya berkat landmark yang tepat), yang berarti bahwa Anda akan mampu menavigasi dengan menggunakan:
KeyboardVoiceOver ? ️ Tip
Sebagai contoh, Anda dapat mengaktifkan sulih suara pada iPhone yang menjalankan iOS 17 atau lebih baru. Ini dapat dilakukan dari pengaturan -> aksesibilitas -> sulih suara.
Gambar OG, juga dikenal sebagai "gambar sosial" (ini adalah gambar yang ditampilkan setiap kali kami berbagi URL situs web kami di platform seperti Twitter, WhatsApp, Discord, dll.), Mainkan peran penting dalam keterlibatan media sosial - tetapi kami tidak T biasanya punya waktu untuk mempersiapkan mereka satu per satu ... kan? Benar...? ( Mungkin aku satu -satunya yang menghadapi masalah ini ... )
Meskipun dimungkinkan untuk menggunakan gambar OG default sebagai fallback (dalam hal ini, public/nowhylogs-og.jpg ), saya ingin menghindari penggunaan statis (dan bahkan penggunaan berlebihan) dari gambar yang sama ditampilkan posting demi posting kapan pun tidak ada yang lain Ogimage ditentukan di frontmatter.
Thanks to Satori's library, capable of converting HTML and CSS to SVG (it has its limitations, like RTL languages not being supported yet... but give it time!), it's been possible to generate dynamic OG images at build time for posts that tidak termasuk apapun . Kemudian, Anda akan menemukan gambar yang indah yang ditampilkan:
Post title .Author name .Site title . Jika Anda perlu menggunakan karakter non-Latin, harap ingat untuk menambahkan font pilihan Anda di 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.Ingat berkali -kali Anda mencoba menemukan sesuatu yang spesifik di situs web tanpa alat pencarian? Apa yang dewa yang Anda doakan untuk dikatakan tentang itu, orang asing yang terkasih? Katakan Tidak Lagi! Karena itulah yang biasanya terjadi pada saya bahkan hingga hari ini, saya memasukkan lagi pencarian global yang diberdayakan oleh Fuse.js , perpustakaan pencarian fuzzy yang ringan ... dengan nol dependensi!
Untuk informasi lebih lanjut, jangan ragu untuk mengunjungi:
Tip
Mengingat bahwa saya sudah menggunakan Fuse.js pada hari itu, Anda juga dapat memeriksa bagaimana saya mengimplementasikannya di Karamablog saya yang sangat dicintai. Saya berjanji Anda tidak akan menyesalinya!
Apakah Anda sudah memakai kacamata hitam Anda? Tidak perlu. Sama seperti wajib saat ini, saya memasukkan theme switcher untuk meningkatkan pengalaman visual bagi pembaca. Mengapa? Karena meskipun dikatakan "Devlog", itu masih blog - dan retina kami harus sangat penting bagi kami!
Untuk informasi lebih lanjut tentang fitur khusus ini dan komponennya, silakan lihat:
"Bisakah kita berhenti mendiskusikan Seo-Thingys sekali, Judit?" , tidak cukup, tidak cukup ! Jika ini masalah diskusi, itu hanya karena keberadaannya mungkin bermanfaat bagi kita, dalam beberapa hal. Izinkan saya menjelaskan:
Apa yang kami sebut "konten ramah -SEO" adalah jenis konten yang dibuat dengan cara yang membantu mesin pencari memberi peringkat tinggi - dan tidak, ini tidak semua tentang kata kunci. Lucunya, apa yang kita sebut "SEO" benar -benar dimaksudkan untuk membantu mesin pencari menemukan, memahami, dan menghubungkan konten Anda ke topik yang Anda coba bahas.
Ingat dynamic ogImage yang kita bahas sebelumnya? Bahkan gambar seperti itu (grafik terbuka) berguna untuk berbagi media sosial dan SEO ... dan itu hanya bagian darinya!
Mari kita lihat file config.ts kami, misalnya:
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 ,
}Semua elemen ini (termasuk URL kanonik, kartu sosial, dll.) Sangat penting untuk membuat situs kami mudah dirangkak dan diindeks oleh mesin pencari , yang mengarah ke visibilitas yang lebih baik dalam hasil mesin pencari.
Seperti yang Anda semua tahu, RSS adalah umpan web yang memungkinkan pengguna dan aplikasi untuk mengakses pembaruan ke situs web dalam format standar yang dapat dibaca komputer. Jika Anda merasa ingin menyiangi dengan cepat melalui minat Anda dan log saya yang relevan untuk Anda ... jangan ragu untuk menekan tombol bergelombang! ?
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 ) ,
} ) ) ,
} )
}Semakin mudah, semakin baik!
Anda dapat menjalankan semua perintah dari akar proyek menggunakan terminal indah Anda:
| Memerintah | Tindakan |
|---|---|
npm install | Instal dependensi. |
npm run dev | Mulai Server Dev Lokal di localhost:4321 . |
npm run build | Bangun situs produksi Anda ke ./dist/ |
npm run preview | Pratinjau build Anda secara lokal. |
npm run format:check | Periksa format kode dengan lebih cantik. |
npm run format | Kode format dengan lebih cantik. |
npm run sync | Hasilkan Jenis TypeScript untuk semua modul Astro. Pelajari lebih lanjut di sini. |
npm run lint | Lint dengan Eslint. |
docker compose up -d | Jalankan Nowhylogs di Docker. |
docker compose run app npm install | Jalankan perintah apa pun di atas ke dalam wadah Docker. |
docker build -t nowhylogs . | Bangun gambar Docker untuk Nowhylogs. |
docker run -p 4321:80 nowhylogs | Jalankan Nowhylogs di Docker. Situs web akan dapat diakses di http://localhost:4321 . |
Ah, ya ... gaya, gaya ...!
Hal pertama yang pertama, izinkan saya untuk membagikan beberapa elemen kunci yang memungkinkan keberadaan situs ini:
Namun, itu hanya bagian minimal dari pekerjaan nyata (manusia) di balik proyek kecil ini.
Adapun palet warna itu sendiri, sekarang tidak mengapa permainan adalah suatu hal, saya harus (sedikit) menjauhkan diri dari gaya yang biasa saya lakukan, seperti yang bisa Anda lihat dalam portofolio dan blog pribadi saya. Jarak ini, serta perkiraan baru bagi saya (pengembang indie sekarang), tidak akan mungkin tanpa seniman yang sangat terkenal di sekitar sini: @Aunedelec.
Izinkan saya untuk memulai dengan mengatakan bahwa saya sangat menyesal telah menghancurkan logo Anda yang sangat indah, tetapi ternyata saya adalah seniman terburuk yang pernah Anda temukan sepanjang hidup Anda. Di samping semua lelucon, jika bukan karena percakapan kami saat berbagi kopi di Viena, kesabaran Anda, dukungan, mata yang tajam, dan keterampilan ekstrem, saya tidak akan pernah mengumpulkan keberanian untuk merangkul video game dengan cara yang tidak terbatas pada penulisan , berbicara, dan memikirkan mereka .
Jika ada sesuatu yang ingin saya tambahkan di sini selain: "Terima kasih atas bakat, dukungan, dan perusahaan Anda", itu sangat besar: "Terima kasih telah menjadi bagian dari hidup saya". Tidak peduli seberapa gelap langit itu kadang -kadang terlihat, awan -awan itu selalu pucat di depan matahari ... dan grenoble memiliki matahari yang cukup indah untuk dikagumi dari balkon!
Los Jugadores Son Mis Amigos . Yang mengatakan, saya tidak bisa menutup bab baru dari kehidupan saya yang mengganggu ini tanpa intoning keras dan tulus: Thank you! ? .
Kepada sponsor kami yang luar biasa, @Entreprises LEMRHALI , thank you so much atas dukungan, ketenangan, pengetahuan, kesabaran, dan seluruh keberadaan Anda. Akhir -akhir ini, "ketidakpastian" adalah sebuah karya yang menyebarkan bayangan yang cukup besar di sekitar tanah kami - dan percayalah ketika saya mengatakan saya ingin mengubah kenyataan itu jika saja mungkin bagi saya untuk melakukannya (di mana saya melupakan tongkat sihir saya ini waktu? Namun, saya percaya bahwa semuanya akan menemukan tempatnya lebih cepat daripada nanti.
Seperti yang pernah dikatakan seseorang:
An Interstate Highway-Enam Puluh Lima-Berlari dari Alabama hingga hanya malu Chicago. Seharusnya berhenti waktu di bagian Kentucky ini, tetapi siang hari tidak akan bergetar. Matahari tidak akan hilang.
Yang diterjemahkan menjadi: Hay Esperanza.
Pekerjaan ini hidup di bawah atap lisensi MIT yang kuat, hangat, dan indah; Apa pun scape konten visual atau tertulis darinya, Anda akan selalu menemukan referensi yang tepat yang menentukan penulis dan situs web di belakangnya.
Atribusi sangat penting akhir -akhir ini, dan siapa pun yang mengambil bagian secara langsung atau tidak langsung dalam proyek ini layak mendapatkan pengakuan terbaik. Yang mengatakan, dan hanya jika Anda menikmati apa yang Anda temukan di sini, ingatlah bahwa Anda dapat membuat dinosaurus sangat senang jika Anda ...
