2019’da Bağımlılıktan Arındırılmış Bir Site Oluşturma

Faydalı Alternatif Metin Yazma
Yeni, geliştirilmiş kişisel web sitemin ekran görüntüsü

Birkaç yıl temelde onu görmezden geldikten sonra, son zamanlarda yenilenme zamanının geldiğine karar verdim. kişisel sitem. Önceki yineleme, ızgara sistemi için bir Sass kitaplığı olan Susy ile birleştirilmiş Gulp ve Bower’ın bir kombinasyonunu kullandı (en son sürüm 3 sürümü yerine sürüm 2). Üzerinde en son 2015 yılı civarında bir çalışma yaptım ve söylemem yeterli, aletlerim oldukça eskiydi. Bu sadece 2019’da kesmeyecekti.

Çok basit tek sayfalık bir site olmayı amaçladığım şey için yeni bir araç seti yapılandırmak için çok fazla zaman harcamak istemedim. Javascript kullanmayı planlamadım, ancak bunu yoldan çıkarmazdım (ilerici geliştirme olarak). Sitemi olabildiğince çabuk oluşturup yayınlamak istedim, böylece ne yaptığımı bilmek isterlerse insanları işaret edecek bir şeyim olurdu. Ama aynı zamanda nispeten kolay bir şekilde sürdürebilmek istedim – ihtiyaç duyulduğunda ekstra konuşma katılımları, makaleler ve biyografi güncellemeleri ekleyin. Siteyi yolun biraz aşağısında yeniden ziyaret etmenin, karmaşık bir araç setinin tamamen yeniden yapılandırılmasını gerektirmemesi benim için önemliydi – herhangi bir şey yapmadan önce bağımlılıkları güncellemek için bir saat harcamak istemedim. asıl iş. Araçlarımın yolumdan çekilmesini istiyorum, böylece sevdiğim şeylere konsantre olabilirim: HTML ve CSS.

Özünde, bir web sitesi oluşturmak için ihtiyacınız olan tek şey bir HTML dosyası ve bir CSS dosyasıdır. (Ve elbette, bir CSS dosyası isteğe bağlıdır! Ancak, bir tane olmadan oluşturmak isteyeceğiniz çok fazla web sitesi yoktur.) Ama en son onsuz bir site oluşturdum. hiç muhtemelen beş ya da altı yıl önceydi. Sass’a oldukça bağımlı hale geldim ve onsuz CSS yazmanın oldukça sinir bozucu olacağını düşündüm. Ancak, CSS aradan geçen yıllarda önemli ölçüde ilerledi. Artık, CSS dosyamız boyunca özellik değerlerini depolamamıza ve yeniden kullanmamıza izin veren CSS değişkenlerimiz (veya özel özelliklerimiz) var. Ayrıca, mizanpaj oluşturmayı inanılmaz derecede basit hale getiren CSS Izgara Düzeni spesifikasyonuna sahibiz – artık ızgara sistemi için Bootstrap gibi bir bağımlılığı içe aktarmaya gerek yoktur ve oldukça fazla CSS kesebilirsiniz (bazı geri dönüşlere rağmen). eski tarayıcılar için yazmanız gerekir).

Sadece bu değil, kod editörleri de hızla ortaya çıktı. VS Code ile dosyanızda veya projenizde anahtar kelimeleri aramak, değerleri bulmak ve değiştirmek ve kodunuzu lintlemek çok kolaydır. Çok sayıda uzantı, otomatik tamamlama, otomatik biçimlendirme ve hatta doğrudan düzenleyiciden renk seçme gibi şeylere izin verir.

Yani belki de vanilya CSS yazmak o kadar da külfetli olmazdı. Sitemi HTML, CSS ve başka bir şeyle oluşturmayı denemeye karar verdim.

Doğal olarak, vazgeçmek zorunda kaldığım otomatik araçların bazı avantajları var. Dosyalarımı küçültemiyorum, görüntüleri tembelce yükleyemiyorum veya kritik CSS enjekte edemiyorum, bunların tümü performans avantajı sağlayacaktır. Ama dengede, site zaten oldukça hafif olduğu için bununla iyiyim. Tam genişlikte görüntüler kullanmıyorum ve kullandığım görüntüler makul bir şekilde sıkıştırılmış, bu nedenle dosya boyutları küçük. Aslında, Google’ın kullandığı performans için %100 puan alır. deniz feneri analiz aracı – daha önce yaptığım her şeyden daha iyi!

Sistematik bir yaklaşım

İlk bağlantı noktam anlamsal HTML idi. Sitenin mümkün olduğunca erişilebilir olmasını istedim. Bu, oldukça basit ve minimalist olan tasarımı da gereksiz dağınıklık olmadan bilgilendirdi. Bununla birlikte, denemekle ilgilendiğim bir şey ızgara sistemidir. Pek çok site varsayılan olarak 12 sütunlu bir düzene sahiptir ve bunun elbette avantajları vardır. Ama her zaman taze ve farklı hissettiren asimetrik ızgaralar kullanma fikrini sevdim. Sitemin her bölümü için aynı asimetrik ızgarayı kullandım ve makaleler, konuşma katılımları ve üzerinde çalıştığım siteler için bağlantı blokları için iki veya üç sütunlu ızgaralar yerleştirdim.

CSS

Sass’tan gerçekten özlediğim bir şey, dosyalarınızı parçalara ayırabilmek. Modern editörlerin tüm avantajlarına rağmen, tüm CSS’yi tek bir dosyaya yazmak en kolay deneyim değildir. Hem HTML hem de CSS dosyalarımda, ilgili blokları bulmayı kolaylaştırmak için ilgili stilleri boşluk ve yorumlar kullanarak gruplandırmaya dikkat ettim. kullandım BEM buna yardımcı olan CSS sınıflarımı adlandırmak için.

Düşünmenin sistematik olarak tek CSS dosyası yaklaşımına uygun olduğunu gördüm. Genellikle neredeyse hiç düşünmeden ulaştığım bir CSS sıfırlaması (örneğin Normalize) kullanmadım. Varsayılan stile dayandım (örneğin, yalnızca varsayılanlar doğru görünmediğinde yazı tipi boyutlarını değiştirdim) ve daha sonra yalnızca Harry Roberts’a benzer bir şey kullanmam gerektiğinde geçersiz kıldığım bazı genel ve temel düzey kuralları yapılandırdım. ITCSS metodoloji. Sınıfları yalnızca gerektiğinde ekledim ve bir dereceye kadar yeniden kullanılabilir olmalarını sağlamak için bunları dikkatlice adlandırdım. Mümkün olduğunda kademeli ve kalıtımı kullandım ve CSS’nin benim için zor işi yapmasına izin verdim. Bu, atomik bir CSS yaklaşımının aksine (önceki işimde bir yılın en iyi bölümünde kullandığım, arka rüzgar), bu da kalıtım üzerinde kompozisyonu tercih eder.

Çok büyük bir site için, benim uyguladığım sistematik yaklaşımın daha az pratik olması ve bazı performans dezavantajları olabilir, ancak burada idealdi.

Dezavantajları

Kısmi parçalara ek olarak, Sass’tan yuvalamayı gerçekten özledim. Yuvalama konusunda aşırıya kaçmayı savunmuyorum, ancak medya sorguları söz konusu olduğunda, özellik sorguları ve sözde seçiciler, iç içe yerleştirmenin CSS yazmayı çok daha kolay yönetilebilir hale getirdiğine şüphe yok. Ayrıca, CSS değişkenleriyle yapamayacağınız medya sorgularında değişkenleri kullanabilmeyi de özledim. Kısacası, işimde Sass’ı kullanmaya devam etmek için pek çok neden var ve henüz ondan uzaklaşmayı düşünmüyorum.

Bir web sitesi oluşturmaya yönelik bu basitleştirilmiş yaklaşım, kendisini dinamik içeriğe borçlu olmadığı açıktır. Birkaç kişi statik bir site oluşturucu kullanmayı önerdi. SSG’lerin faydalarının tamamen farkındayım (bu blog bir tane kullanıyor), ancak bu durumda bir tane kullanmamak kasıtlı bir karardı. Amaç, mümkün olan en az araçla hızlı bir şekilde inşa etmekti ve bu kadar küçük bir siteyi şu anda güncel tutmanın çok zor olacağını düşünmüyorum. Tüm sitenin tasarımı yaklaşık dört saat sürdü ve inşa – Bir SSG’yi yapılandırmanın bu sürenin büyük bir kısmını alacağını hayal ediyorum.

Bununla birlikte, gelecek için bir SSG’yi dışlamayacağım ve daha sonra dinamik içerik eklemeyi düşünebilirim. Manuel olarak güncellemek zorunda kalmadan blog makalelerini ve konuşma etkileşimlerini almak güzel olurdu.

Kod düzenleyiciyi kullanma

VS Kodu kullanıyorum ve bir Twitter kullanıcısı, şunları yapmanızı sağlayan bir uzantı önerdi: editörünüzde Sass’ı CSS’ye derleyin, bir yapı işlem hattı olmadan. Bu bir keşifti, çünkü bunu gerçekten kod editörümün daha önce yapabileceği bir şey olarak düşünmemiştim. Bana birkaç yıl önce Sass’ı derlemek için kullandığım bir GUI aracı olan Codekit’i hatırlatıyor ve bu noktada kişisel siteme Sass eklemeyi planlamamama rağmen kesinlikle bir noktada deneyeceğim bir şey. . VS Code’un ne kadar güçlü hale geldiği oldukça etkileyici. Geliştirme sürecime yardımcı olabileceği başka alanlar da var:

snippet’ler

VS Kodunda, aksi takdirde daha büyük kod blokları olabilecekler için kısayol görevi gören yeniden kullanılabilir kod parçacıkları tanımlayabilirsiniz. Birden fazla sayfayla uğraşıyor olsaydım, üstbilgim ve altbilgim için HTML’nin her yerde aynı olmasını sağlamanın biraz baş ağrısı olduğunu düşünürdüm. Bir snippet oluşturabilir ve yalnızca birkaç tuşa basarak yeni HTML sayfalarını doldurmalarını sağlayabilirim.

Sitemin ilk yinelemesinde herhangi bir snippet kullanmamış olmama rağmen, medya sorguları için de gerçekten yararlı olacağını düşünüyorum. Ortak kesme noktaları için birkaç pasaj ayarlayabilir ve bir şeyler yazarken kendime çok zaman kazandırabilirdim. Bunları iş akışıma tanıtmaya gerçekten hevesliyim.

Editör içi küçültme

Ayrıca birkaç uzantı mevcut CSS, HTML ve JS’nizi küçültün basit bir kısayol ile. Bunları küçültmek performans açısından faydalı olabilir ve CSS dosyam büyürse bunun çok faydalı olacağını hayal edebiliyorum.

Çözüm

Pek çok insanın bunu tamamen anti-alet olarak reddetmek için hızlı olacağını hissediyorum, ki durum hiç de öyle değil. Bir endüstri olarak geliştirdiğimiz karmaşık araçların iyi ve gerekli olduğu birçok durum vardır. Burada izlediğim yaklaşımın çok basit bir sitenin ötesine geçme ihtimalinin tamamen farkındayım.

Bir oluşturma sürecinin açık faydaları ve geliştiriciler olarak NPM, Webpack, Gulp, Babel ve daha fazlasına bu kadar çok güvenmemizin iyi nedenleri vardır. Ama binayı tavsiye etmem tüm sitemde yaptığım gibi, araçlarımız bazı şeyler için harika çözümler olduğu için otomatik olarak çözüm olduklarını varsaymaktan suçlu olduğumuzu düşünüyorum. her şey. Ünlü bir alıntıyı ifade etmek için, “Tek aletiniz bir çekiç olduğunda, her şey bir çivi gibi görünür”. Bazı siteler, alıştığımız türden karmaşık araçlara ihtiyaç duymaz ve eğer daha performanslı ve onlarsız inşa edilmesi daha kolay bir şey varsa.

(Küçük) sitelerinin yeniden inşasına ihtiyaç duyan birkaç serbest çalışan müşterim var ve şimdiden bu yaklaşımın muhtemelen yeterince iyi olacağını düşünüyorum, oysa daha önce bunu düşünmezdim. Dahası, yazdığım kodun sürdürülebilir olduğundan emin olacağım ve gerekirse daha fazla araç ekleyebilirim.

Benzer düşünceleriniz olup olmadığını (veya kesinlikle katılmıyorsanız!) ve geliştirme sürecini bağımlılık eklemeden hızlandırmanın yolları için önerileriniz varsa duymak isterim. Sitemin yeniden inşası hakkında tweet attığımda, şimdiye kadarki en popüler tweetim oldu.

Akla gelebilecek en temel teknolojileri kullanarak bir web sitesi inşa ederken bir şekilde devrim niteliğinde bir şey bu.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.