UI prototiplerini anında oluşturmanıza ve paylaşmanıza izin veren bir web uygulaması veya uzantısı olmasını hiç istediniz mi?
Hepimiz yapıyoruz! Hepimizin sitelerimizin veya uygulamalarımızın nasıl görünmesini ve nasıl hissettirmesini istediğimize dair fikirleri var.
Yani gerçekten harika bir tasarım buldunuz ve bunu nasıl yaptığınızı tam olarak hatırlayamıyor musunuz?
Şimdi onu paylaşmanın bir yolunu bulmalısın. Oldukça karmaşık bir tasarımı paylaşmaya çalışıyorsanız, bu günler hatta haftalar alabilir.
Web uygulaması prototiplerinizi oluşturmak için beklemeniz için hiçbir neden yok. Onları şimdi Dabblet ile oluşturun.
Öğeleri, stili sürükleyip bırakın ve kaydedin. İncelenmesi için bir tasarımcıya gönderin veya bir sunuma kopyalayın. İmkanlar sonsuzdur.
Dabblet nedir?
kullanma dabblet, gerçek zamanlı olarak küçük CSS parçacıkları ve HTML kodu deneyebilirsiniz.
Bunu kullanırken CSS kodunuzda herhangi bir ön eke ihtiyacınız olmayacak. GitHub özleri, içeriğinizi saklamanıza, başka sitelerde yayınlamanıza ve başkalarıyla paylaşmanıza olanak tanır.
Bu, kod parçacıklarını diğer geliştiricilerle paylaşmanın ve geri bildirim almanın harika bir yoludur.
Nasıl Çalışır?
Kod yazıldığı anda, görsel çıktı hemen üstünde görünür. JavaScript her tuş vuruşunda çalıştırmanın rahatsız edici olacağı ve hatta bazı durumlarda tarayıcının kullanılamaz hale gelmesine neden olabileceği düşünüldüğünde, tek istisnadır.
JavaScript sekmesindeki "JS'yi Çalıştır" seçeneğini veya klavye kısayolunu (Ctrl + Enter veya Cmd + Enter) kullanmak, bir Dabblet çalıştığında JavaScript'i çalıştıracaktır. Seçenekler menüsü bu stili değiştirmenizi sağlar.
Bir geliştirici olarak, bu üç dilde aynı anda kodlama veya bitmiş ürünü görme arasında geçiş yapabilirsiniz.
Özellikler
Dabblet'in bilmeniz gereken özellikleri şunlardır:
Hızlı CSS Düzenleme: CSS özelliklerini hızlı bir şekilde ekleyebilir, düzenleyebilir ve kaldırabilirsiniz. Değişiklikler gerçek zamanlı olarak sayfaya yansıtılacaktır.
Sözdizimi Vurgulama: CSS ve HTML kodu, sözdizimi vurgulanarak okunmasını ve anlaşılmasını kolaylaştırır. Siz yazarken kod da doğrulanacaktır. İsterseniz kod kutusunu gizlemeyi de seçebilirsiniz.
Otomatik Tamamlama: Dabblet, CSS özellikleri ve değerleri için otomatik tamamlama sunar. Stil sayfaları oluştururken veya düzenlerken bu çok yardımcı olabilir.
Önceden Oluşturulmuş CSS Stil Sayfaları: Popüler web sitelerinden önceden oluşturulmuş CSS stil sayfalarına erişebilirsiniz. Bunlar, kendi web sitenize hızlı ve kolay bir şekilde stiller eklemek için kullanılabilir.
Temel Destek: Dabblet, kod snippet'lerinizi kolayca saklamanıza ve başkalarıyla paylaşmanıza olanak tanıyan GitHub Gists'i destekler.
Canlı önizleme: Sayfayı yeniden yüklemeden kod değişikliklerinizin sonuçlarını gerçek zamanlı olarak görebilirsiniz. Örneğin, bir metnin rengini değiştirirseniz, siz yazdıkça değişikliğin metne yansıdığını göreceksiniz.
Klavye kısayolları: Dabblet, yeni bir stil kuralı ekleme veya yorum yapma gibi genel görevler için klavye kısayollarına sahiptir.
Çoklu Görüntüleme Modu: Dabblet, kodu ve sonuçları yan yana veya birbirinin üstünde ve altında görmenizi sağlayan çoklu görüntüleme modları sunar.
Artılar
- Hızlı CSS
- Oturum açmış olsanız bile, yine de gizli olarak kaydedebilirsiniz.
- Açılar, renkler, süre vb. gibi çeşitli parametreler için satır içi CSS değer önizleyicileri.
- Her şey XHR-ed olduğundan, kaydettiğinizde bile sayfa hiçbir zaman yenilenmez.
- Klavye kısayolları bolca.
- Tüm kodlar otomatik olarak biçimlendirilir (markdown hariç).
- Baştan sona sağlam belgeler.
Eksiler
- Arayüz ilk başta biraz bunaltıcı ama alışıyorsunuz.
- Proje düzeyinde yönetim özelliği yok (henüz).
Dabblet Entegrasyonları
Herhangi bir platformun diğer hizmetlerle entegre olması gerekir ve Dabblet bir istisna değildir. Dabblet'in sunduğu entegrasyonlardan bazıları şunlardır:
Google Analytics
Google Analytics izleme kodunuzu Dabblet sayfalarına kolayca ekleyebilirsiniz. Bu, Dabblet'ınız için sayfa görünümlerini ve diğer istatistikleri izlemenize olanak tanır.
Ubuntu
Dabblet, Ubuntu temaları oluşturmak için kullanılabilir. Yeni bir Dabblet oluşturabilir, CSS ve HTML kodu ekleyebilir ve temayı bir web tarayıcısında önizleyebilirsiniz.
DigitalOcean
Eşi benzeri olmayan bir bulut barındırma şirketi, işletmelere bulut bilişim hizmetleri sağlayarak operasyonlarını daha verimli bir şekilde büyütmelerine olanak tanır.
Dabblet bununla ne yapıyor?
Artık Dabblet'lerinizi oluşturabilir, yönetebilir ve dağıtabilirsiniz. DigitalOcean Uzayları.
Bu, tüm kod parçacıklarınızı tek bir yerde tutmanıza ve bunları başkalarıyla paylaşmanızı kolaylaştırır.
Dabblet için Alternatifler
Alternatifler her zaman mevcuttur ve aynı şekilde, Dabblet söz konusu olduğunda üzerinde düşünülmesi gereken birkaç tane vardır:
Pastebin.com
Programcılar genellikle web sitesini kaynak kodunu veya yapılandırma veri parçalarını kaydetmek için kullanır. Ancak, herhangi biri sağlanan alana herhangi bir metin koyabilir.
JS Kutusu
JS Bin, JavaScript için ücretsiz bir test aracıdır. Sonuç, bir bölmeye Javascript ve diğer bölmeye HTML girildikten sonra kısa bir URL aracılığıyla paylaşılabilir. En sık kullanılan JS kitaplıklarından bazılarını seçmenize izin veren bir menüden yararlanın.
CssDeck
Bu araç, kodlama çalışmalarınızda size yardımcı olabilecek başkalarıyla test senaryoları oluşturmak ve değiş tokuş etmek için harikadır. Çeşitli seçeneklerle, diğer programcılarla anında projeler üzerinde işbirliği bile yapabilirsiniz.
Plunker
Plunker, web geliştiricilerinin beyin fırtınası yapabileceği, işbirliği yapabileceği ve düşüncelerini paylaşabileceği dijital bir platformdur.
Örneğin, “Merhaba dünya!” ile başlayabilirsiniz. herhangi bir dilde programlayın ve zengin bir öğrenme deneyimi oluşturmak için kod parçacıkları, indirimler ve ekran görüntüleri ekleyin.
Son Söz
Sonuç olarak, Dabblet web geliştiricileri, özellikle de hızlı ve kolay bir şekilde yapmanın yollarını arayanlar için kullanışlı bir araçtır. kodlarını test edin.
Çeşitli özellikleri ve entegrasyonları ile bu platform için bir kullanım bulmamak zor.
Bugün bir deneyin!
Yorum bırak