Size Smashing'in En İyisini Getiriyoruz

Sanırım hepimiz bu yılın oldukça bir şey olduğu konusunda hemfikiriz. Hepimize öyle ya da böyle meydan okundu ve yeni normal, eski normal değil. Yine de, güvenlik ve herkesin iyiliği ile topluluk içinde yaratıcı sağlık konusundaki düşünce ve duyguları paylaşmanın önemine en önemli vurgu devam etmektedir.

Ne yazık ki, COVID-19'un etkileri dünya çapında hala o kadar geniş kapsamlı ki, Smashing ekibi bu yıl planlarımızda büyük değişiklikler yapmak zorunda kaldı. Smashing Magazine'in genel yayın yönetmeni Rachel Andrew'un güzel bir şekilde belirttiği gibi:

“Salgın birçok insan için hayatı öngörülemez ve korkutucu hale getirdi. Smashing'de, hem işi hem de konuşmacılarımızı ve atölye liderlerimizi destekleyecek şekilde harika içerik sunmanın yeni yollarını çok hızlı bir şekilde bulmamız gerekti. Topluluğun coşkusu, destek mesajları ve bu yeni biçimleri deneme isteği bizi cesaretlendirdi."

Bu notta, tüm 2020 tarihlerini çevrimiçi olarak almaya karar verdik. Seni orada görmeyi umuyoruz!

Tüm bu harika şeyleri sizin desteğiniz sayesinde yapabiliyoruz ve bunu gerçekten ve içtenlikle takdir ediyoruz.

Becerilerinizi Geliştirmenize Yardımcı Olacak Etkileşimli Atölyeler

Çevrimiçi atölye çalışmaları ile, masanızdan ayrılmanıza gerek kalmadan, yüz yüze bir atölyede olduğu gibi aynı deneyimi ve uzmanlara erişimi sağlamayı amaçlıyoruz. Böylece kendi hızınızda, kendi zamanınızda öğrenebilir ve yol boyunca etkileşimli alıştırmaları takip edebilirsiniz.

Size hem tasarım hem de ön uçla ilgili atölyelerin bir karışımını sunmak için elimizden gelenin en iyisini yaptık:

Arkanıza yaslanın, Rahatlayın ve Dinleyin!

Smashing Podcast , sabah işe giderken, spor salonunda egzersiz yaparken veya sadece bulaşık yıkarken yanınıza biraz Smashing almanın mükemmel bir yoludur. Drew McLellan iki haftada bir tasarım ve geliştirme uzmanlarıyla web'deki çalışmaları hakkında konuşuyor. Yeni bölümleri hazır olur olmaz almak için favori uygulamanıza abone olabilirsiniz.

Duymak ve hakkında daha fazla bilgi edinmek istediğiniz bir konu var mı? Ya da belki siz ya da tanıdığınız biri, web ve tasarımla ilgili, çok sevdiğiniz bir konu hakkında konuşmak istersiniz? Sizden haber almak isteriz! Bize Twitter üzerinden ulaşmaktan çekinmeyin, size en kısa sürede geri dönmek için elimizden geleni yapacağız.

Smashing Bookshelf'e En Son Eklediğimiz

Click'in ilk kopyalarını gönderdik ! Birkaç hafta önce Gölgeli Hileler Olmadan Tıklamaları Nasıl Teşvik Edilir ve kitabın bir kopyasını önceden sipariş ettiyseniz, yazarın kendisinden, Paul Boag'dan kişisel bir not almış olmalısınız. Sosyal medyada çıkan tepkileri takip etmek eğlenceliydi – Ari Stiles son gönderisinde bazı tweetler paylaştı.

Tıklamak! çoğumuzun yaratıcı bir "dürtme"ye ihtiyaç duyduğu bir zamanda ortaya çıkar. Kitap, çevrimiçi siteler ve hizmetler oluşturmaya yönelik rutinlerimiz hakkında farklı düşünmemiz için bize ilham veriyor - neyin işe yarayıp neyin yaramadığını. İçindekiler bölümüne geçebilir veya önce bir göz atmak isterseniz, hemen ücretsiz bir PDF alıntısı indirebilirsiniz (17.3 MB). Mutlu okumalar!

Smashing Magazine'de Trend Konular

Bildiğiniz gibi, web endüstrisindeki güncel çeşitli konulara ayrılmış her gün yeni bir makale yayınlamayı hedefliyoruz. İşte okuyucularımızın en çok keyif aldıkları ve daha fazla tavsiye ettikleri bazıları:

• “CSS Haberleri Temmuz 2020,” Rachel Andrew
• “React's Context API'sine Giriş,” Yusuff Faruq
• Matt Maribojoc "Vue.js'de Bileşenler Arasında Nasıl Veri Aktarılır?"
• Barry Pollard , “Görüntülerde Yükseklik ve Genişlik Ayarı Yeniden Önemlidir”
• "Statik Olarak Oluşturulan Siteler ile Sunucu Tarafında Oluşturulan Uygulamalar Arasındaki Farklar" Timi Omoyeni

Bültenimizden En İyi Seçimler

Dürüst olacağız: Her iki haftada bir, Smashing Newsletter sayılarını makul bir uzunlukta tutmakta zorlanıyoruz - parlak projeler üzerinde çalışan çok sayıda yetenekli insan var! Katılan herkese teşekkürler!

Sponsorlukla ilgileniyor musunuz? Ortaklık seçeneklerimize göz atmaktan çekinmeyin ve istediğiniz zaman ekiple iletişime geçin - size hemen geri döneceklerinden emin olabilirsiniz.

Not Bu gönderileri yazıp hazırladığı için Cosima Mielke'ye çok teşekkür ederim!

Kişiliğe Sahip Ücretsiz Yazı Tipleri

Tipografi, güçlü bir iletişim aracı, fikirleri ifade etmenin bir yolu ve yaratıcılığın tetikleyicisidir. Bu anlayıştan yola çıkarak Arjantin merkezli tip dökümhanesi Rostype, kişisel ve ticari projelerde herkes için ücretsiz olarak kullanılabilen fontlar yaratıyor.

Şu anda mevcut 15 yazı tipi var ve her biri benzersiz bir kişiliğe sahip. Bazıları özellikle okunabilirliğe odaklanılarak tasarlanmıştır, diğerleri öne çıkmak için yapılmış mükemmel ekran yazı tipleridir, bazıları retrodan ilham almıştır, diğerleri daha fütüristik ve dinamiktir. Koronavirüs karantinasından ilham alan bir yazı tipi bile var. Biraz daha belirgin bir yazı tipi arıyorsanız bir hazine sandığı.

Yazı Tipi Yapımı

Diğer tasarım ekiplerinin nasıl çalıştığı ve düşündüğünün perde arkasına gizlice bakmak her zaman bilgilendiricidir. YouTube Tasarım Direktörü Chris Bettig, şimdi kendisinin ve ekibinin marka elçisi işlevi gören özel yapım bir yazı tipi olan YouTube Sans'ı nasıl oluşturduklarına ilişkin ilginç bir vaka çalışmasını paylaşıyor.

Yeni yazı tipi ortaya çıkmadan önce YouTube, ikonik oynat düğmesini ve kelime işareti için Alternatif Gotik'in değiştirilmiş bir sürümünü kullandı. Ancak Chris Bettig'in açıkladığı gibi, net bir tipografik rehberlik yoktu. YouTube'un tüm ürünlerinde çalışacak ve platformun dünya görüşünü ve onu kullanan içerik oluşturucular topluluğunu yansıtacak şekilde tasarlanan YouTube Sans, bunu değiştirdi. Yazı tipinin nasıl hayata geçtiği ve tasarım ekibinin bu süreçte karşılaştığı zorluklar hakkında daha fazla bilgi için vaka çalışmasına göz atmayı unutmayın.

Tarayıcı Yazı Tipi Oluşturma Tutarsızlıklarıyla Başa Çıkma

Bir böceğin kelimenin tam anlamıyla bizi rahatsız ettiği anları hepimiz biliriz ama onu nasıl çözeceğimizi bir türlü bulamıyoruz. Stephanie Stimac kısa süre önce böyle bir sorunla karşılaştı: Safari'de kişisel web sitesini açtığında, sayfasının başlığının diğer tarayıcılardan ne kadar farklı olduğunu fark etti. Beklenenden çok daha cesur görünüyordu.

Bu işleme tutarsızlıklarının nedenini bulmak için Stephanie, kullanıcı aracısı stil sayfası ile hesaplanan CSS özellikleri arasındaki farkları incelemeye başladı ve kısa süre sonra kendisini Chrome, Firefox ve Edge ile kafa karıştırıcı davranışı karşılaştırarak tavşan deliğinin çok aşağısında buldu. Hangi tarayıcının stili doğru bir şekilde ele aldığı sorusunun basit bir cevabı yok, ancak birkaç test yaptıktan sonra Stephanie, tarayıcının yazı tipi ağırlıklarını nasıl kalınlaştıracağına karar vermesini nasıl engelleyeceğini buldu: yazı tipi ağırlığını açıkça tanımlamanız gerekir. Sayısal değerler. Önemli bir fark yaratan küçük bir ayrıntı.

Sürekli Performans Ölçümleri Kolaylaştı

Bir web sitesini başlatırken, sitenin hızlı olduğundan ve en iyi uygulamaları takip ettiğinden emin olmak için performans testleri yapmak yaygındır. Ancak dağıtımlar her gün gerçekleşir gerçekleşmez bunu nasıl hızlı tutabiliriz? Speedlify, Zach Leatherman'ın bu soruya verdiği yanıttır.

Speedlify, sürekli olarak performansı ölçmek ve performans istatistiklerini yayınlamak için Lighthouse ve Ax'i kullanan, en fazla saatte bir ve otomatik olarak günde bir kez açık kaynaklı bir depo olarak yayınlanan statik bir sitedir. Bilgisayarınızda manuel olarak, yerel olarak çalıştırabilir ve verileri deponuza kontrol edebilirsiniz veya Netlify kullanıyorsanız, tamamen bağımsız olarak çalışabilir. Performansı her zaman görünürde tutmanın harika bir yolu.

Anında Bildirimin Anatomisi

Push bildirimleri ilk olarak 2009'da iOS'ta tanıtıldı, web push bunu beş yıl sonra izledi. Bugün, iOS ve Android'den Amazon Echo, Windows, Chrome, Safari, Firefox, Edge ve daha pek çok platformda ve tarayıcıda destekleniyorlar. Bu platformların her biri biraz farklı olsa da, tasarımcıların bir anında iletme bildirimine tam olarak neyin girdiğini anlamalarını karmaşık hale getiriyor.

Lee Munroe'dan faydalı bir hatırlatma geliyor. Hangi platformda ne kadar metine ihtiyacınız olduğunu, görseller için gereksinimleri, karakter kısıtlamaları olup olmadığını ve hatırlaması zor olabilecek diğer detayları özetledi. Genel bakış, erişiminizin olmadığı işletim sistemlerinde bildiriminizin nasıl görüneceğini değerlendirmek için de kullanışlıdır. Yer imleri için bir tane.

Ana Kare Animasyonlarını Canlı Düzenleme

Animasyon oluştururken, ince ayarlarken animasyonu çalışırken görmek her zaman yararlıdır. Ne yazık ki, bu aynı zamanda metin düzenleyiciniz ve tarayıcı arasında çok fazla geçiş yapmayı da içeriyor. Mitch Samuels bunu yapmaktan bıkmıştı, bu yüzden ona zaman kazandıracak bir araç geliştirdi: Keyframes.app.

Araç, görsel bir zaman çizelgesi düzenleyicisiyle bir CSS ana kare animasyonu oluşturmanıza olanak tanır. Bir zaman çizelgesine adımlar ekleyebilir, hedef öğenizin her adımda sahip olmasını istediğiniz CSS özelliklerini ayarlamak için basit kullanıcı arayüzünü kullanabilirsiniz; animasyonlu önizleme canlı olarak güncellenecektir. Sonuçtan memnun kaldığınızda, CSS'yi kopyalayabilir ve hemen projenizde kullanabilirsiniz. Keyframe.app, bir Chrome uzantısı olarak da mevcuttur. Gerçek bir zaman kazandıran.

Projeniz İçin En İyi İnşa Aracını Belirleme

Derleme araçları, iş akışlarını düzene sokarak ve en iyi uygulamaları kodlayarak geliştiricilerin hayatlarını kolaylaştırmayı amaçlar. Ancak, bir proje için doğru inşa aracını seçmek zor olabilir. Daha bilinçli bir karar vermenize yardımcı olmak için, Google Chrome geliştirici ilişkileri ekibinden kişiler Tooling.Report'u oluşturdu .

Bir oluşturma aracının en iyi uygulamalara ne kadar bağlı olduğunu değerlendirmek için bir dizi teste dayalı olarak, Tooling.Report size çeşitli paketleyiciler ve destekledikleri özellikler hakkında bir genel bakış sunar. Bu yalnızca bir proje için en iyi aracı belirlemenin hızlı bir yolu değil, aynı zamanda en iyi uygulamaları mevcut kod tabanlarına dahil etmek için bir referanstır - uzun vadeli tüm oluşturma araçlarını ve dolayısıyla web'in sağlığını iyileştirme hedefiyle.

Düz Bir Resmi Katlanmış Bir Postere Dönüştürme

Bazı kodlama deneyleri, en deneyimli geliştiricileri bile hayretler içinde bırakıyor. Ve her gün kullanmayacağınız bir şey olsa bile, geliştirici arkadaşların alışılmışın dışında düşündüğünü ve web teknolojileriyle nelerin mümkün olduğunu keşfetmesini görmek her zaman ilham vericidir. Lynn Fisher'ın saf CSS ile yarattığı katlanmış poster efekti böyle bir deneydir.

Biraz CSS ile Lynn, ortalama görüntünüzü katlanmış bir poster gibi gösterir. Görüntü üzerinde yatay ve dikey olarak uzanan kağıt kırışıkları ve postere 3D efekti veren bir arka plan gölgesi ile. CSS ile neler başarılabileceğini güzel bir şekilde gösteren havalı küçük bir proje.

Yerel ve Özel Seçme Öğeleri Arasında Bir Denge Kurmak

Yalnızca dış tarafı değil, içi de şekillendirilmiş, stil sahibi bir seçme öğesini nasıl oluşturursunuz? Sandrina Pereira, “Yerel ve Özel Seçilmiş Öğeler Arasında Dengeyi Kurmak” başlıklı makalesinde, mümkün olduğunca çok sayıda yerel özellikten yararlanan, iyi görünümlü, erişilebilir bir seçim yaratma girişimini paylaşıyor.

Buradaki fikir, seçimi "karma" yapmaktır; bu, bunun tek bir tasarım deseninde hem yerel bir <select> hem de stil sahibi bir alternatif seçim olduğu anlamına gelir. Yardımcı teknolojinin kullanıcıları yerel bir <select> öğesi alacaklardır, ancak bir fare kullanıldığında, yaklaşım, bir seçim öğesi olarak işlev görecek şekilde yapılmış stilize edilmiş bir sürüme dayanır. Akıllı!

CSS Değişkenleri ve max() ile Hibrit Konumlandırma

Bazı fikirler, kalıpların dışında düşünmenizi ve bunları gerçekleştirmek için yeni yollar keşfetmenizi gerektirir. Şu örneği hayal edin: En üste kaydırıldığında, yan tarafta, başlığın hemen altında bir sayfa gezinmesine sahip olmak istiyorsunuz. Başlık görüntülenmediğinde sayfayla birlikte kaydırması ve kaydırmanın geri kalanı için en üstte kalması gerekiyor. Lea Verou'nun yakın tarihli bir projede başarmak istediği tam olarak buydu.

Bunun bir position: sticky örneği olduğunu söyleyebilirsiniz, ancak Lea'nın gösterdiği gibi, işi bitirmek için daha ince ayarlanmış bir yaklaşım var. Herhangi bir JavaScript olmadan. Çözümü, CSS değişkenlerine ve CSS özelliklerine min/maks kısıtlamaları uygulamanıza izin veren yeni max() işlevine dayanır. Geri dönüş, henüz max() 'ı desteklemeyen tarayıcılarda yardımcı olur. Akıllı!

Web'in Karanlık Tarafından Hikayeler

Bilgisayar korsanları, veri ihlalleri, gölge hükümet faaliyetleri, siber suçlar, bilgisayar korsanlığı - web'in karanlık tarafında çok şey oluyor. Ama bu faaliyetlerin arkasındaki insanlar kim? Ve onların “görevi” nedir? Jack Rhysider, ağın gizli kısımlarında meydana gelen hikayelere bir podcast ayırdı: Darknet Diaries.

İster bir video poker makinesinde aşırı miktarda para kazanmasını sağlayan bir hata bulan bir kumarbazın hikayesi, ister bir penetrasyon test cihazının binalara girmesinin veya bir ulus devletin başka bir ülkedeki bir şirketi hacklemesinin hikayesi olsun, Darknet Diaries, gizli bir dünyaya dair sürükleyici bilgilerle doludur. Podcast, gerçekleri kontrol ederek ve etik bilgi kaynağı sağlayarak gazetecilik standartlarına bağlı kalıyor ve tüm bunlar harika bir eğlence olsa da, dinleyicileri dijital yaşamları konusunda daha duyarlı ve bilgili vatandaşlar haline getirmek için siber güvenlik kültürünü açıklamayı da amaçlıyor. Ayarladığınızdan emin olun.

Haftada bir kez teslim edilen kullanışlı ön uç ve UX bitleri.

İşinizi daha iyi yapmanıza yardımcı olacak araçlarla. Abone olun ve Vitaly'nin Akıllı Arayüz Tasarım Kontrol Listeleri PDF'sini e-posta ile alın.

(Çarpıcı) e-postanız

Ön uç ve UX üzerinde. 190.000 kişi tarafından güvenilen.