GitHub bir süre önce doğrudan tarayıcınızdan (🤯) VS Kodunda açmak için herhangi bir repodayken klavyede noktaya ( . ) basmanızla çalışan github.dev’i yayınladı. Bu basit hareket size GitHub’da kod okuma, düzenleme ve paylaşma konusunda önemli bir üretkenlik artışı sağlayabilir, bir iPad hatta herhangi bir akıllı cihazdan bile.
Not: . tuşuna ek olarak, aynı efekti elde etmek için URL çubuğunuzdaki “.com”u “.dev” olarak da değiştirebilirsiniz 👍
github.dev VS Koduna dayandığından, tuş bağlamalarınızı, renk temanızı, dosya simgelerinizi, snippet’lerinizi ve daha fazlasını özelleştirebilirsiniz. Daha da havalı, ayarların senkronizasyonunu etkinleştirebilir ve kişiselleştirmelerinizi VS Code, github.dev ve Codespaces arasında dolaşabilirsiniz . Bu şekilde, nerede kod okuyor/düzenliyor olursanız olun, kendinizi evinizde hissedeceksiniz 💖
Bununla birlikte, hemen açık olmayan şey, github.dev’in daha da zorlayıcı bir şey sağlamasıdır: Tamamen yeni GitHub yerel iş akışlarını özelleştirme ve oluşturma fırsatı. Github.com’u genişletmek için tarayıcı uzantılarına veya 3. taraf hizmetlere güvenmek yerine, GitHub’ı doğrudan geliştirmek için üretken ekosistemiyle birlikte zaten sevdiğiniz düzenleyiciden yararlanmanız yeterlidir. Ne demek istediğimi açıklamak için Github.dev’in bugün neler mümkün kıldığına dair 10 örneğe bakalım 🚀
1. ✉️ Derin Bağlantıları Paylaşma
(.) Noktaya bir repo sayfasından basmaya ek olarak, GitHub.com’da belirli bir dosyayı görüntülerken de basabilirsiniz. Ayrıca, o anda açık olan dosyada bir metin seçerseniz ve . tuşuna basarsanız, VS Kodu açıldığında, o dosyaya odaklanacak ve aynı metin seçimini vurgulayacaktır. Ardından, URL’yi tarayıcınızda kopyalayabilir ve tam olarak aynı bağlamı paylaşmak için bunu başkalarına gönderebilirsiniz . Bu basit yetenek, kod hakkında iletişim kurmanın yeni ve ilginç yollarını etkinleştirme potansiyeline sahiptir 🔥
Demo: GitDoc uzantısının VS Code’daki repo olaylarına nasıl abone olduğunu görmek için bu bağlantıyı tıklayın .
2. ✅ İstek İncelemelerini Çekin
(.) Nokta Github.com’da bir repoya veya dosyaya tıklamanın yanı sıra, bir çekme isteğini görüntülerken de buna basabilirsiniz. Bu, yorumları görüntüleme ve yanıtlama, değişiklik önerme ve hatta PR’yi doğrudan düzenleyiciden onaylama/birleştirme yeteneğini içeren zengin, çok dosyalı bir görünüm kullanarak PR’yi gözden geçirmenizi sağlar. Bu, dalları klonlamaya veya değiştirmeye gerek kalmadan geliştiricilere daha iyi araçlar sağlayarak “yüzeysel incelemeleri” azaltma potansiyeline sahiptir 🙅♂️
. in any file) shows PR review comments in-line… I’m using this so much already because it’s faster than checking out the reviewed branch and loading the local environment.Demo: CodeTour uzantısına bir normal ifade ayrıştırıcısı eklemek için PR’yi incelemek için bu bağlantıyı tıklayın .
3. 📊 Görüntüleri + Diyagramları Düzenleme
VS Code, metin dosyalarını düzenlemenin ötesinde, uzantıların projenizdeki herhangi bir dosya türünü düzenlemenizi sağlayan özel düzenleyicilere katkıda bulunmasına da izin verir. Örneğin, Drawio uzantısını yüklerseniz zengin diyagramları görüntüleyebilir ve düzenleyebilirsiniz.
Ek olarak, Luna Paint uzantısını yüklerseniz görüntüleri düzenleyebilirsiniz (PNG, JPG, vb.).
Her durumda, düzenlemeleriniz otomatik olarak kaydedilir ve Source Control sekme aracılığıyla değişiklik işlemini GitHub deponuza geri gönderebilir/itebilirsiniz. Daha da havalı, başkalarıyla bir resim/şema için derin bir bağlantı paylaşabilirsiniz ve gerekli uzantıları yükledikleri sürece, sizinle aynı deneyim aracılığıyla işbirliği yapabilirler. Bu, github.dev’i GitHub’da saklanan herhangi bir dosya türü için hacklenebilir bir “tuval” yapar 😎
4. 🗺 Kod Tabanı İzlenecek Yolları
Yeni bir kod tabanı öğrenmek zordur, çünkü genellikle nereden başlayacağınız veya çeşitli dosya/klasörlerin birbiriyle nasıl ilişkili olduğu belirsizdir. github.dev ile, bir kod tabanının kılavuzlu izlenecek yollarını oluşturmanıza ve oynatmanıza izin veren CodeTour uzantısını yükleyebilirsiniz. github.dev tamamen tarayıcıda mevcut olduğundan, bu, ekipteki veya topluluğunuzdaki herkesin yerel olarak herhangi bir şey yüklemeye gerek kalmadan hızla hızlanmasını kolaylaştırır.
Demo: Bu repoyu açın ve CodeTour’u yükleyin. Getting Started Tura katılmak isteyip istemediğinizi soran bir tost ile sunulacaksınız.
5. 📕 Kod Parçacıkları + Özetler
Gists, geliştiricilerin kod parçacıklarını, yapılandırma dosyalarını, notları ve daha fazlasını yönetmesi ve paylaşması için popüler bir yoldur. github.dev’de GistPad uzantısını yükleyebilir ve ana fikirlerinizi görüntüleyebilir/düzenleyebilirsiniz. Bu, birden çok depoda kod parçacıklarını korumanıza ve bunlara hem masaüstü düzenleyicinizden hem de GitHub’da her koda göz atarken/düzenlerken erişmenize olanak tanır.
6. 🎢 Web Oyun Alanları + Eğitimler
Kodlama oyun alanları (örn. CodePen, JSFiddle), programlama dillerini/kütüphanelerini öğrenmenin ve sonra bunları başkalarıyla paylaşmanın popüler bir yoludur. github.dev ile CodeSwing uzantısını yükleyebilir ve mevcut düzenleyici kurulumunuzu kullanarak ve dosyalarınız GitHub’a geri döndürülerek web oyun alanları oluşturmaya başlayabilirsiniz.
Demo: Bu repoyu açın ve CodeSwing + CodeTour’u yükleyin. Birkaç saniye sonra oyun alanı ile karşılaşacaksınız.
7. ✏️ Not Alma + Bilgi Tabanları
VS Code, birinci sınıf bir markdown editörüdür ve bu nedenle, tüm kişisel notlarınızı/belgelerinizi düzenlemek ve önizlemek için github.dev’i kullanmaya başlayabilirsiniz. Daha da havalı, WikiLens uzantısını Roam/Obsidian benzeri bir düzenleme deneyimi elde etmek, GitHub’da depolanan ve VS Code için uzantılar/kişiselleştirmeler ekosisteminden yararlanabilen bir bilgi tabanını sürdürmek için yükleyebilirsiniz .
8. 📽 Sunumlar
Markdown tabanlı not almak için github.dev’i kullanmaya alıştıktan sonra, deneyim çok basit ve zarif olduğundan, kaçınılmaz olarak markdown kullanarak diğer belge türlerini yazmak isteyeceksiniz. Marp uzantısını yüklerseniz, işaretlemeden başka bir şey kullanmadan slayt desteleri oluşturmaya başlayabilir ve bunları doğrudan tarayıcınızdan sunabilirsiniz. Bu iş akışını kullanmaya başladım ve GistPad ile birleştiğinde (sunuları özet olarak depolamak için), konuşmaları/toplantıları yönlendirmenin en harika yolu bu 🥰
https://github.com/marp-team/marp-vscode/releases/tag/v1.4.0
Edit and preview the slide deck, in anywhere 😎🏖️
9. 📓 Jüpyter Defterleri
Oyun alanlarını kodlamanın yanı sıra, kodu öğrenmenin ve paylaşmanın bir başka popüler yolu da Jupyter not defterleridir..ipynb ile github.dev’de bir dosya açarsanız, not defterinin hücrelerini ve önbelleğe alınmış çıktılarını hemen görüntüleyebilirsiniz. Daha da iyisi, Python kodunu gerçekten tamamen tarayıcınızda çalıştırmak için Pyodide uzantısını yükleyebilirsiniz!
notebooks with the entire #Python data science stack, using the #Pyodide extension (https://marketplace.visualstudio.com/items?itemName=joyceerhl.vscode-pyolite)!
cc @jakevdp
10. 🛠 Kendi Uzantınızı Oluşturmak!
Muhtemelen fark ettiğiniz gibi, yukarıdaki öğelerin çoğu, birinin oluşturup pazarda yayınladığı bir uzantı ile yapıldı. VS Code tamamen genişletilebilir olduğundan, basit JavaScript API’lerini kullanarak, yalnızca VS Code masaüstünü değil, github.dev’i de destekleyen kendi uzantılarınızı oluşturabilirsiniz. Yani GitHub’da kodlamayı nasıl daha üretken ve eğlenceli hale getireceğinize dair harika bir fikriniz varsa, başlamak için ihtiyacınız olan her şeye artık sahipsiniz 🏃
🔮 İleriye Bakmak
GitHub.dev için zaten bir sürü kullanım örneği olsa da, daha erken günler ve bu nedenle, ekosistem yenilik yapmaya devam ettikçe bu, gelişimini izlemeye değer bir alan. Özellikle, gerçek zamanlı işbirliğini ve sınıf ödevlerinin tarayıcıda tam olarak desteklendiğini görmek heyecan verici.
Heyecanlı zamanlar 🙌
Kaynak: Jonathan Carter