Web Tasarımcıları ve Geliştiricileri İçin Yeni Kaynaklar (Ekim 2017)

Bu ay Taze Kaynaklar önceki aylardan biraz farklı olacak. Biz web geliştiricileri, hızla değişen bir sektörde geçimini sağlıyoruz ve Google, Microsoft, Firefox ve PHP gibi en büyük teknoloji şirketlerinden bazılarının, çalışma biçimimizi değiştirecek birçok duyuru gördüm. ağ.

Bu bölümde, listemizin yarısı bu duyurularla ilgili olacak. Öyleyse geleceğe merhaba demeye hazır ol.!

Temel Görüntü Optimizasyonu

Bu bir web için bir görüntüyü optimize etmek için ayrıntılı makale Addy Osmani tarafından yazılmış. Nasıl yapılır, sadece yapılacak ve yapılmayacak şeyler etrafında dönen diğer yazılar gibi değil..

Bu makale aslında teknik detayların yanı sıra optimizasyonun arkasındaki bilim. Ayrıca çeşitli optimizasyon yaklaşımları ve görüntü formatları hakkında ayrıntılı bilgi bulacaksınız., araçlar, ipuçları ve bazı gerçek dünya örnekleri.

PHP 7.2

Kapsamlı PHP 7.2'ye ne geldiğine dair referans. PHP uygulama performansını artıran eklemelerin yanı sıra, PHP 7.2 birkaç şeyin kaldırılacağı amortisman ve artık kullanılmamalıdır.

PHP 7.2'de, yani kullanımdan kaldırılacak iki işlev var. create_function () ve __autoload (). Eğer bir web geliştiricisiyseniz, kodunuzu inceleyin ve gerekli değişiklikleri yapın. Hala bu iki işlevi kullanan çok sayıda WordPress eklentisi gördüm..

Web Paylaşımı API'si

Dürüst olmak gerekirse bu API web geldiğini görmedim. Ancak, web üzerindeki etkileşimin yarısı ile ilgili “paylaşım”, bu API büyük ölçüde işler yaratacak web geliştiricileri için yerel bir paylaşım deneyimi oluşturmak daha kolay, özellikle mobil platformda.

Bu API şu anda yalnızca Masaüstü ve Android için Google Chrome'da kullanılabilmektedir. Eylem halindeyken görmek için bu Youtube videosunu izleyin..

Görüntü Asenkron Özelliği

Web’de devrim yaratacak bir başka şey de zaman uyumsuz img öğesi için öznitelik. Yazma zamanında, birkaç yaklaşım vardır. JavaScript'i küçük bir hile içeren, senkronize olmayan bir şekilde resim yükleyin. Yakında ekleyebileceğiz zaman uyumsuz = ilgili üzerine img eleman.

Firefox Kuantum

Mozilla, Firefox’taki güncellemeleri agresif bir şekilde zorladı; “Proje Kuantum”. Quantum CSS'yi içeriyor - yeni bir motor son derece hızlı CSS oluşturma, yeni bir kullanıcı arayüzü ve yeni DevTools.

Yayın web geliştiricilerinde çekiş gücü kazanmak Bazıları ana tarayıcılarını Firefox'a geçirdi bile. Quantum DOM ve WebRender'ı da içeren bu projede daha fazlası var. Firefox Quantum motorunu temel alan Node.js yarışmacısını görecek miyiz? Şey, belki evet.

İOS ve Android için MS Edge

Microsoft şimdi duyurdu en yeni tarayıcısı Edge'i iOS ve Android’e bırakın. Bu, web sitelerinizin test edeceği bir tarayıcı daha olduğu anlamına gelir.

Gutenberg

WordPress şu anda Gutenberg adında iddialı bir projede. Gutenberg bir neredeyse tamamen JavaScript ile oluşturulmuş WordPress editörüne facelift.

Bu noktada, Gutenberg React ile inşa ancak proje Preact, Vue veya başka bir şey gibi başka bir çerçeve düşünüyor. Şimdilik karmaşık bir durum. Bu nedenle, WordPress geliştiricileri için temalar ve eklentiler oluşturma sonsuza kadar WordPress inşa etme biçimimizi değiştirecek.

FoitFout

FoitFout, FOIT ve FOUT denilen iki farklı yaklaşımı karşılaştırmak için kullanışlı bir araçtır. web'e özel yazı tipleri yükle. Bu araçla, iki yaklaşımı taklit edebilir ve hangi yaklaşımın sitenize en uygun olduğuna karar verebilirsiniz.

Vuera

Vuera bir Vue ve React'i birlikte kullanmanızı sağlayan JavaScript kitaplığı. Bir Vue bileşeni ekleyebilirsiniz. .vue veya Vue'da bir React bileşeni kullanın. Takımınız şimdi olabilir Her çerçevede daha üretken kullanmayı tercih ettiklerini.

Draggable

“Draggable” Shopify'dan muhteşem bir kütüphanedir. Yerel tarayıcının üstüne inşa edilmiştir Drag-n-Drop API ve birlikte çalışmanız için kapsamlı bir API sağlar. İhtiyacınız olan bir şey sağlamazsa, bir İşlevlerini genişletmek için özel modül. Nasıl çalıştığını görmek için gösterime göz atın.

FlowchartJS

Adından da anlaşılacağı gibi FlowchartJS bir PowerPoint'teki gibi bir akış çizelgesi oluşturmayı sağlayan kütüphane. Benzer şekilde, daire, elips, kare, elmas, üçgen gibi çeşitli grafik şekilleri oluşturabilirsiniz..

QuickBill

Hafif ve fatura oluşturmak için basit web uygulaması. Hiçbir hesaba gerek kalmadan çalışmak için yerel tarayıcı teknolojilerini ve API'lerini kullanır. Basitçe web sitesine gidin, öğeleri faturaya ekleyin ve PDF dosyasını oluşturun. Bu kadar!

mocka

Mocka bir prototip web sitesi için kullanabileceğiniz içerik yer tutucusu. Sadece 500 bayt ve tamamen özelleştirilebilir. Sass karışımını kullanarak projenizin CSS dosyasına kolayca ekleyebilirsiniz..

CSS birkaç sınıf sağlar dahil olmak üzere mocka-medya resim yer tutucu oluşturmak için, mocka-başlığı Başlık oluşturmak ve mocka metin keyfi bir metin oluşturmak için.

VueStar

VueStar bir Bir simgeye tıkladığınızda parlak bir efekt eklemek için Vue bileşeni, Twitter’ın yaptıklarına benzer “kalp” mobil uygulamalarında simgesi. Bileşen adlı yeni bir öğe tanıtıyor vue-yıldızlı web çağında ekleyebilirsiniz. Ve bitti!

Izgara Bahçesi

CSS Izgarası, web üzerinde bir düzen oluşturmak için yeni bir konsept sunar ve sahip olduğu sayısız yeni özellik göz önüne alındığında ilk bakışta karmaşıktır..

GridPlayground temelde bir Mozilla CSS Grid'in öğretilmesi ve CSS Grid'in kabul edilmesini ilerletme girişimi. Firefox bile Izgara düzenini incelemek için DevTools'a yeni bir araç getiriyor.

Snippet Yöneticisi

“Snippet Yöneticisi” basit kod parçacıklarını depolamak ve yönetmek için uygulama. Yeni bir öğe oluşturabilir, kodu yapıştırabilir ve noktayı ayarlayabilirsiniz. Bu noktada, hiçbir şey çok süslü değildir ve yalnızca NPM kullanarak derlemeniz gereken kaynak kodunu sağlar..

Sekmeli Arayüz

Harika JavaScript'i en az kullanarak, ilerici ve erişilebilir sekme gezinme oluşturma konusunda genel bilgiler. Erişilebilir tasarım hakkında daha fazla bilgi edinmek isteyenler için harika bir kaynak.

SwissInCSS

SwissInCSS, CSS dışında hiçbirini kullanmayan klasik İsviçre poster tasarımlarını sergiliyor. Kaynak kod CodePen'de mevcuttur..