Kategoriler
Kodlama

github.dev ile eğlenceli şeyler

github.dev ile yapabileceğiniz eğlenceli şeyler 😎

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 👍

🤫 New shortcut: Press . on any GitHub repo. https://github.com/github/dev
The dot – Have you tried github.dev yet? Just press the dot key @GitHub

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 .

My current favorite thing is going into a file on http://github.com, selecting a few lines of code by clicking on the line numbers, and then hitting “.”. That text is then highlighted in http://github.dev… Incredibly delightful and works exactly how I would expect.

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 🙅‍♂️

How epic is this? @github codespaces (press . 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.

Btw. you can install http://Draw.io in http://github.dev 😉

Ek olarak, Luna Paint uzantısını yüklerseniz görüntüleri düzenleyebilirsiniz (PNG, JPG, vb.).

The new release of Luna Paint for @code is out! This includes some minor features as well as initial support http://github.dev: 1️⃣ Go to your http://github.com repo 2️⃣ Press . 3️⃣ Start editing Release notes: https://github.com/lunapaint/vscode-luna-paint/releases/tag/0.9.0 Install: https://marketplace.visualstudio.com/items?itemName=Tyriar.luna-paint

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.

🗺️ When I initially shipped CodeTour, the first thing folks asked for was a web player. As of yesterday, you can now go to any GitHub repo w/a tour, and simply press “.” to get a walkthrough of the codebase 🔥 (after installing the CodeTour extension 😎)

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.

📢 If you’re loving the new http://github.dev editor, and wish you could use it for gists, then you’re in luck! You can install the GistPad extension (https://aka.ms/gistpad), and create/edit gists directly in-browser 🔥 I use this for managing code snippets, notes, etc.

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.

Another fun use case for the http://github.dev editor: web playgrounds. Create interactive samples and then share them, in a way that’s easily remixable. Check out this demo, and install the CodeSwing/CodeTour extensions. Directly from the browser! https://github.dev/lostintangent/rock-paper-scissors

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 .

🗒 I’ve started using http://github.dev as my notetaking environment, but I missed having support for backlinks 😢 So I created WikiLens (https://aka.ms/wikilens) to provide a wiki-like view for GitHub + markdown, along with rich link navigation. All.From.The.Browser 🥰

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 🥰

Marp for VS Code v1.4.0 has shipped an early preview of web extension for http://github.dev! 💎✨
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!

🥳 Am excited to share that we have released http://github.dev: a completely in-browser @github + @code editing tool. You can even run @ProjectJupyter
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 🙌

Online kod editörleri: Ücretsiz online web kod editörleri geniş listesi.

Kaynak: Jonathan Carter

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO volkan@volkanyilmaz.com.tr