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. pic.twitter.com/AHTSDot4qc
— GitHub (@github) August 11, 2021
🤫 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 https://t.co/vCbBIoCq90, selecting a few lines of code by clicking on the line numbers, and then hitting ".". That text is then highlighted in https://t.co/FIQYIm5ODE…
Incredibly delightful and works exactly how I would expect. pic.twitter.com/qe6SSpJSe3
— Tyler Leonhardt #BlackLivesMatter (@TylerLeonhardt) August 25, 2021
My current favorite thing is going into a file on github.com, selecting a few lines of code by clicking on the line numbers, and then hitting “.”. That text is then highlighted in 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. pic.twitter.com/abSeUyhCQo
— Sumit Kumar (@TweetsOfSumit) August 19, 2021
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 https://t.co/x23SFl8Xnu in https://t.co/oY7jxkS7SF 😉 pic.twitter.com/WzBtRoskea
— Henning Dieterichs (@hediet_dev) August 12, 2021
Btw. you can install Draw.io in 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 https://t.co/Eoe1xBjj4j:
1️⃣ Go to your https://t.co/XNVKZZ7Ake repo
2️⃣ Press .
3️⃣ Start editingRelease notes: https://t.co/gYyaSdAtb4
Install: https://t.co/yS7md8qlMk pic.twitter.com/p4KgM2Sbcr— Daniel Imms (@Tyriar) August 26, 2021
The new release of Luna Paint for @code is out! This includes some minor features as well as initial support github.dev: 1️⃣ Go to your github.com repo 2️⃣ Press . 3️⃣ Start editing Release notes: github.com/lunapaint/vscode-luna-paint/rele.. Install: marketplace.visualstudio.com/items?itemName..
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 😎) pic.twitter.com/dQcqkKSQfS
— Jonathan Carter (@LostInTangent) August 12, 2021
🗺️ 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 https://t.co/Am4EhpKJfJ editor, and wish you could use it for gists, then you're in luck! You can install the GistPad extension (https://t.co/C4vZgHmZhi), and create/edit gists directly in-browser 🔥 I use this for managing code snippets, notes, etc. pic.twitter.com/Z6gNTnmx1Q
— Jonathan Carter (@LostInTangent) August 14, 2021
📢 If you’re loving the new github.dev editor, and wish you could use it for gists, then you’re in luck! You can install the GistPad extension (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 https://t.co/Am4EhpKJfJ 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://t.co/XVMz5aKahV pic.twitter.com/ZHlypUZM6W
— Jonathan Carter (@LostInTangent) August 13, 2021
Another fun use case for the 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! 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 https://t.co/Am4EhpKJfJ as my notetaking environment, but I missed having support for backlinks 😢 So I created WikiLens (https://t.co/1Q72Cyqx4a) to provide a wiki-like view for GitHub + markdown, along with rich link navigation. All.From.The.Browser 🥰 pic.twitter.com/gJeSIjYAMo
— Jonathan Carter (@LostInTangent) August 22, 2021
🗒 I’ve started using github.dev as my notetaking environment, but I missed having support for backlinks 😢 So I created WikiLens (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 https://t.co/GbehxzFssK! 💎✨https://t.co/I0wg5qS9CW
Edit and preview the slide deck, in anywhere 😎🏖️ pic.twitter.com/LaDzxRryvv
— Yuki Hattori (@y_hatt) September 3, 2021
Marp for VS Code v1.4.0 has shipped an early preview of web extension for github.dev! 💎✨
github.com/marp-team/marp-vscode/releases/t..
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 https://t.co/AIqjEKH3OL: 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://t.co/vHoBFyyZhd)!
cc @jakevdp pic.twitter.com/AyP7ARaezu
— 👩💻 Paige Bailey #BlackLivesMatter (@DynamicWebPaige) August 11, 2021
🥳 Am excited to share that we have released 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 (marketplace.visualstudio.com/items?itemName..)!
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