Web Tasarımcıları ve Geliştiricileri İçin Yeni Kaynaklar (Mart 2019)
Web geliştirme dünyasında son birkaç ay boyunca çok şey oldu. İlk olarak, yeni blok tabanlı editör, kod adı Gutenberg, nihayet WordPress 5.0 ile birleştirildi. WordPress'in gelecekte gelişmesi için yeni bir temel oluşturduğu ve geliştiricilerin WordPress işlevleri için genişletme şeklini değiştireceği için kuruluşundan bu yana gerçekten büyük bir değişiklik.
İkincisi, geliştirici arkadaşlarımızdan birkaçı, izin verenler gibi gerçekten faydalı bazı araçlar yarattı. JSON terminalinde görüntülemek ve web tasarım ve geliştirme projelerinde çok yardımcı olabilecek bir kaç React kütüphanesi.
Ve son olarak, en etkili bazıları kaynaklar, referanslar ve eklentiler projelerinizi daha yeni trendlere göre güncellemenize yardımcı olmak için başlatıldı.
Yeni web geliştirme kaynaklarının en kapsamlı listesine girelim:.
Gutenberg El Kitabı
Tasarım için referansları bulabileceğiniz resmi WordPress el kitabı, blok oluşturmak için kod örnekleri ve diğerleri ve projeye katkıda bulunmak için bir rehber. Gutenberg ile geliştirmek için ilk referansınız..
Blok İskele
Blok tabanlı editör ile, WP-CLI şimdi başlamak için uygun bir yol sağlar yeni bir CLI komutuyla Gutenberg Bloğu oluşturma, wp iskele bloğu
. Mevcut eklentilerinize ve temalarınıza oluşturabilir ve ekleyebilirsiniz.
CGB
Gutenberg bloğunu kolayca başlatmanın başka bir yolu Guten Bloğu Oluştur (CGB), bir kazan plakası oluşturmak bir Gutenberg bloğu geliştirmek için. React.js, Webpack, ESLint, Babel, vb. Gibi modern araçlardan oluşur. En iyi bölüm sizin bu araçlardan herhangi birini yapılandırmanıza gerek yok kodunuzu yazmaya odaklanabilirsiniz.
Gutenberg İçin Elementor Blokları
Yapmanıza izin veren bir WordPress eklentisi Herhangi bir Elementor şablonunu ekleyin ve tam olarak editörün içinde önizleyin. Eklenti sağlayan birçok diğer uyumluluk ile birlikte geliyor kesintisiz düzenleme deneyimi Elementor ve Gutenberg arasında. Nasıl yapıldığını görmek için bu videoya göz atın..
Atom Blokları
Gittikçe artan bir koleksiyona sahip bir dizi Gutenberg bloğu. Bu yazının yazıldığı tarihte “Izgara Sonrası Bloğu” hangi sağlar sitenizin yayınlarının bir listesini ızgara düzeninde ekleyin. Bir de var “Referans Blok” Bu, adından da anlaşılacağı gibi, sayfa içine bir Övgü eklemek. Bu sayfadaki Blokların tam önizlemelerine bakın..
Blok Galerisi
Resim galerinizi eklemek için dikkat çekici bir blok olan Block Gallery, yayınınıza resim eklemek için kesintisiz bir deneyim sunar. Resimlerinizi bırakın, galeri göstergesine stil verin (Duvarcılık stili, Atlıkarınca veya Tam Ekran) ve hepsi ayarlandı. Bu, şu anda, sadece WordPress için en iyi Galeri Bloğu.
CoBlocks
Yukarıda belirtilen Blok Galerisi'ni geliştiren aynı yazardan bir bloklar grubu olan CoBlocks, site içeriğinizi aşağıdakiler gibi geliştirecek bir dizi Bloktan oluşur. Akordeon, Fiyatlandırma Tablosu, Gif, Tıkla-Tweet, ve eklenecek daha fazla blok.
StagBlocks
Bir başka Gutenberg Blok takımı. Eklenti, çoğunuzun takdir edeceği bazı ilginç Bloklar getiriyor. Yayınlarınızdaki ve sayfalarınızdaki istatistikleri özelleştirmenize izin veren Stat Bloğu içerir. Web Sitesi Kartı Bloku Fantezi bir kart tarzı önizleme web sitesi. Vurgulanan renkle kod işleyen Kod Bloğu.
Su Samuru Blokları
Ayrıca, Gutenberg Blokları gibi bir koleksiyon “Google Haritalar Bloğu” harita eklemek, “Servis Bloğumuz” için Izgara görünümünde bir düğmeyle servis listesini ekleyin, ve “Görüşler Alan Bloğu” referansların bir listesini eklemek için. Otter Block, işletmelerin ve tema geliştiricilerin takdir edeceği bir Gutenberg Blokları koleksiyonudur..
Gelişmiş Gutenberg Blokları
Bu eklenti bir avuç gelir içeriğinizi zenginleştirmek için gelişmiş Bloklar otomatik oluşturulan içerik tablosu gibi, “Giphy Blokları” Giphy.com’dan GIF resmi eklemek için, “Açılış Bloğu” Unsplash.com dan resim eklemek için, “Banner Reklam Bloğu”, WooCommerce “Sepete Ekle Düğme Bloğu”, ve çok daha fazlası.
Blok Laboratuvarı
Blok Lab, geliştiricilerin Gutenberg Bloğu oluşturmasını kolaylaştırır. Eklenti size izin verir kullanıcı dostu bir GUI ile yeni bir Block kaydedin ve PHP'deki şablonlar. React.js öğrenmenize bile gerek yok.
EDD Blokları
Gutenberg editöründe Easy Digital Downloads ürünlerini hazırlamanıza izin veren bir eklenti. Kısa Kod kullanımından farklı olarak, blok ürün görünümlerini görüntüler.
Test Gutenberg
Gutenberg eklentisini kurmaya veya sitenizi WordPress 5.0 ile güncellemeye hazır değil misiniz? Basitçe yeni editörü denemek için bu siteyi yükle.
Gutenberg Bulutu
Gutenberg Blokları için bir AppStore gibi. Alabileceğiniz merkezi bir yer WordPress ve Drupal'da Kullanılabilecek Gutenberg Blokları. Evet, Drupal ayrıca editörleri için Gutenberg editörünü de kullanacak..
Gutenberg Örnekleri
Gutenberg Blokları oluşturmak için bir Github kod örneği deposu. Burada bulabilirsiniz daha karmaşık bir örneğe basit blok, oluşturmak için “Tarif Bloğu” editörde kullanıcıların ekleyebileceği bir şablon belirleyen yemek tarifi içeriği. Ders kitabı yerine gerçek örneklerden öğrenmeyi tercih edenler için iyi bir referans.
GutenbergJS
Gutenberg'in sadece JavaScript versiyonu. Gutenberg'i herhangi bir JavaScript uygulamanıza entegre etmenize izin veren bir NPM paketi olarak mevcuttur..
Gutenberg'i devre dışı bırak
Gutenberg, WordPress'e yeni olanaklar getirse de, herkes buna hazır değil. Mevcut siteleriniz Gutenberg ile iyi çalışmazsa, bu eklentiyi yükleyebilirsiniz. Size izin verir Gutenberg editörünü devre dışı bırak belirli gönderiler için, gönderim türleri, kullanıcı rolleri, temalar ve ayrıca ön uçtaki Gutenberg stil sayfalarını devre dışı bırakma.
Klasik Editör
Alternatif olarak, bu eklentiyi yükleyebilir, böylece eski klasik düzenleyiciyi kullanmaya devam ederken WordPress 5.0'a güncel kalabilirsiniz. Bu eklenti 2022 yılına kadar desteklenecek.
ClassicPress
Diğer bir alternatif ise, bir WordPress çatalı olan ClassicPress'e geçmektir. ClassicPress odaklandı işletmeler, istikrar ve güvenlik. WordPress eklentileri ile uyumludur ve gelecek sürümlerinde yeni ilginç özellikler getirmeyi planlamaktadır. Gönderimize göz atın: ClassicPress: Gutenberg & React.js'sız WordPress Alternatif
Hızlandırma WordPress
WordPress çok büyüdükçe; bir blog platformundan daha fazlası. Özellikle Gutenberg, sitenize sitenizi yavaşlatabilecek bazı ekstra yükler, kodlar, dosyalar ekledi. Bu, sitenizdeki ağrı noktalarını tanımlamanıza ve sektördeki en iyi uygulamaları ele almanıza yardımcı olmak için başvurabileceğiniz bir ayrıntıdır..
Visual Studio Kod Tarayıcı Önizlemesi
Visual Studio Kodunda Chrome Headless tarafından desteklenen gerçek bir tarayıcı ekleyen bir Visual Code editörü. Bu size sağlar çalışmanızı gerçek zamanlı olarak önizleyin kod editörü içinde ve editör içi hata ayıklama gibi özellikleri etkinleştirir.
Bundlesize
Bundlesize için bir araçtır JavaScript dosyanızı saklayın demetleme kontrol altında boyut. Birlikte verilen dosyanızın her birinin maksimum boyutunu tanımlayabilirsiniz; tanımlanmış maksimum boyut hakkında veya onaylandığında sizi uyaracaktır. Bundlesize, projenizde iş akışının kesintisiz dağıtımı için TravisCI ve CircleCI gibi bir CI servisi ile entegre edilebilir.
WP Ortaya Çıkıyor
Modern MVC modeline dayalı WordPress tema çerçevesi. Laravel ve Slim gibi bir PHP çerçevesiyle çalışmaya alışkınsanız, bu çerçeveyi gerçekten takdir edeceğinizden eminim. Router ve Controller, DI Container ve Middlerware gibi şeyleri kullanabilirsiniz..
Deniz feneri bot
Docker'ı kullanarak bir CI hizmetinde Deniz Feneri çalıştırmanıza olanak sağlayan bir yardımcı program aracı. Bu harika bir araç web sitenizin performans kontrolünü otomatikleştirin web sitenizin kodunda her yeni bir değişiklik yaptığınızda.
App React öğrenin
React App öğrenmek React.js öğrenmek için bir kaynaktır. Ama dışarıdaki diğer kaynaklardan farklı olarak, bu olmalı bilgisayarınıza yerel olarak yüklenmiş. Sadece öğrenme materyalleri değil, aynı zamanda kodları ve etkileşimli örnekleri de içerir. En iyi yanı, yüklendikten sonra çevrimdışıyken yapabilmenizdir.
WP Kabulü
WP Acceptance kabul testleri yapmak için izin veren bir araçtır. Basitçe söylemek gerekirse, Kabul Testleri bir dizi kullanıcı davranışını taklit eden testler. Bu tür bir testi gerçekleştirmek için birçok çerçeve vardır..
Ancak, öncelikle WordPress ile çalışıyorsanız, bu aracı, tipik WordPress projelerinin ihtiyaç duyduğu şekilde tasarlanmış ve uyarlanmış olduğundan, kullanım kolaylığı için takdir edersiniz..
Parlak
Bir JavaScript kütüphanesi mobil cihazda görüntülendiğinde web sitenize ışık yansıması benzetin. Demoyu https://pqina.nl/shiny/ adresinde görebilirsiniz. Yalnızca mobil cihazlarda, yalnızca mobil cihazlarda kullanılabilen belirli bir API’ye güvendiği için çalışacağını belirtmek önemlidir..
Lucid'e tepki göster
ReactLucid size yardımcı olacak bir araçtır hata ayıklama React ve GraphQL uygulamaları daha etkileşimli bir şekilde. Bileşen hiyerarşisini, React uygulamanızdaki durum / sahne değişikliklerini ve GraphQL şemasını, sorguları ve mutasyonları gerçek zamanlı olarak görmenizi sağlar.
CSS Özellikleri Geçiş
Yapmanızı sağlayan bir Chrome uzantısı Chrome'da belirli CSS özelliklerini devre dışı bırak. Bununla, belirli özellikler olmadığında web sitenizin nasıl işleyeceğini ve nasıl davranacağını görebilirsiniz. Tüm tarayıcılarda uygulanamayan yeni CSS özelliklerini uygulamanıza yardımcı olmak oldukça yararlı.
Blendy
Size yardımcı olabilecek bir araç CSS arka plan karışım modlarını resminizle özelleştirin. Karışım modlarını önizleyebilir, renkleri değiştirebilir ve degradeler uygulayabilirsiniz. Unsplash'tan görüntüleri kullanabilir veya bilgisayardan yükleyebilirsiniz..
Elemental tepki
Kutudan çıkar çıkmaz çalışan React öğeleri koleksiyonu. Webpack'e eklenecek yapılandırmaları içe aktarmak veya özelleştirmek için harici bir CSS yok. Button, Checkbox, SelectList, Tabs, Tooltip ve daha fazlası gibi temel bileşenlerle birlikte gelir..
FX
Sık sık JSON formatıyla uğraşıyorsanız, bu aracı takdir edeceğinizden eminim. fx
bir JSON verilerini Terminal'de görüntülemenizi sağlayan komut satırı aracı etkileşimli mod ile. verileri genişletebilecek veya daraltabilecek şekilde. fx
NPM veya Homebrew üzerinden kurulabilir.
Monica
Monica tamamen kendi kategorisinde. Bir tür CRM (Müşteri İlişkileri Yöneticisi) ancak müşteriniz için değil aileniz ve arkadaşlarınız gibi sevdikleriniz için tasarlanmıştır..
Bir CRM gibi, onlarla faaliyetleriniz ve en son ne zaman aradığınız vb. Gibi şeyleri izlemenize izin verir. Dahası, bir süredir konuşmadığınız bir kişiyi aramanızı hatırlatmak için de ayarlanabilir. Buna PRM (Kişisel İlişkiler Yöneticisi) diyorlar..
İyonik Çerçeve
İyonik çerçeve aslında bir süredir var. Ancak son zamanlarda, işlevselliği konusunda oldukça büyük bir sıçrama yaptı. Şimdi sadece daha hızlı değil, İyonik şimdi yükselen iki yıldız çerçevesi ile uyumlu: React.js ve Vue.js.
Bu İyonik bir olması için yere koyar çerçeve agnostik aracı. Dolayısıyla, sadece belirli çerçeveler için işe yaramaz, aynı zamanda ön uç gelişmeler gelecekte geliştikçe yenileri ile de çalışıyor olabilir..
Dikkate değer
Kayda değer bir not alma masaüstü uygulamasıdır. Diğer benzer uygulamaların aksine, özel biçimlendirme, WYSIWYG veya diğer tipik ziller ve ıslıklarla gelmez. Uygulama editörü özellikle Github-flavored Markdown tarafından desteklenmektedir. Notlar düz bir dosyada saklanır .md
dosyaları yanı sıra eki. Sadece çalışıyor ve basit.
TIPTAP
TipTap, Vue.js. ile ProseMirror üzerine kurulu bir WYSIWYG editörüdür. ProseMirror’dan, müthiş Markdown sözdizimi desteği gibi kutudan çıkan bir dizi özelliği devralmanın yanı sıra, TipTap, metni vurgularken biçimlendirme menüsünün göründüğü Menü Balonu, etiketleyebileceğiniz veya bahsedebileceğiniz Öneri özelliği gibi birkaç modern özellik getiriyor içeriğe sahip bir kişiyi JSON formatındaki içeriği dışa aktarabilme.
Restplain
Restplain, sitenizdeki özel bitiş noktaları da dahil olmak üzere WordPress REST API uç noktalarınızın belgelerini kolayca oluşturmanıza olanak sağlayan bir WordPress eklentisidir. Dokümanlar içinden API çağrısı yapma. Unutulmaması gereken bir şey, belgeleri oluşturmak için uç nokta şemasına dayandığıdır, bu nedenle özel uç noktalarınız için uygun bir şema eklediğinizden emin olun..
İçerik Yükleyicisine Tepki Ver
İçerik Yükleyicisine Tepki Ver Gerçek içerik yüklenirken içerik yer tutucusunu görüntülemenizi sağlayan bir React özel bileşenidir. Facebook ve Instagram'da gördüğünüz yükleyici türüne benzer .
efsanevi
Mythic, Depentency Injection, Views ve Controllers gibi en iyi modern uygulamaların yanı sıra kullanımı gibi modern araçlara sahip bir WordPress başlangıç temasıdır. Web Paketi, Sass, Astar, PHP7 minimum gereksinim ve BEM. Bir tema geliştiricisi olarak becerinizi geliştirmek için harika bir tema.
Rafine Github
Github kullanırken deneyiminizi geliştirmek için bir tarayıcı uzantısı. Birkaç kullanışlı kısayol tuşu ekler, bazı düzenleri ve kullanıcı arabirimlerini düzenler, otomatik olarak sorunlara ve PR'lere bağlantı ekler ve daha fazlasını yapar.
WC'yi aç
Açık WC, Özel Web Bileşeni oluşturmanıza izin veren bir dizi araçtır. Bir Web Bileşeni oluşturmak için ana kütüphaneyi, Yeoman jeneratörlerini hızlı bir şekilde oluşturmak için “WC'yi aç” test için yapı iskelesini içeren proje, pamuklanan, ve entegrasyona devam ediyor.
Açık WC eğer iyi bir alternatif olabilir yerel bir web özelliği ile uygulamayı tercih et Vue.js veya React.js gibi bir çerçeve kullanmak yerine.
Gridsome
Gridsome bir Vue.js ve GraphQL ile statik web siteleri ve web uygulamaları oluşturmak için bir araç. WordPress ve Drupal gibi CMS, Markdown veya Yaml gibi yerel bir dosya veya AirTable ve Contentful gibi harici API gibi birden çok veri akışını yönetebilir. Bu, özellikle React.js yerine Vue.js'yi tercih ediyorsanız, Gatsby.js'ye gerçekten harika bir alternatif..
Tarayıcı
Bu, World Wide Web mucidi, Tim Berners-Lee tarafından öngörülen tarayıcıdır. Bu bir HTML oluşturmak için basit bir tarayıcı ve bir adres çubuğunu modern bir tarayıcı gibi göstermez, ancak gezinerek görüntüleyebilirsiniz. Belge> Tüm belge referansından aç ve bir URL'ye yapıştırın ve tıklayın Açık. Sitenizin orijinal tarayıcıyla nasıl işleyeceğini göreceksiniz.
Raster
Raster, CSS Izgarası, CSS Özel Mülkiyet (Değişken) ve özel öğe gibi modern HTML ve CSS özellikleri ile oluşturulan modern bir ızgara çerçevesidir. Kenarlarda yaşamayı sevenler için mükemmel bir çerçeve.
çemberci
Carousel veya Slider eklemek için bir Vue.js bileşeni. Dokunma, Klavye, Fare Tekerleği ve diğer yardımcı navigasyon yoluyla erişilebilir ve kullanılabilir, RTL ve dikey yönü, genişletilebilir ve tabii ki yanıtı destekler.