Kaydol

Merhaba Sevgili Floodlar.com Kullanıcısı, Web sitemizde geçirdiğiniz zaman ve bu büyüleyici flood evrenine katılımınız için teşekkür ederiz. Floodların geniş dünyasıyla dolu deneyiminizi daha fazla keşfetmek için, web sitemizi sınırsız olarak kullanabilmeniz adına giriş yapmanız gerekmektedir.

Oturum aç

Merhaba Floodlar.com Kullanıcısı, İlk üç sayfayı tamamladınız, tebrikler! Ancak, floodların devamını görmek ve daha fazla interaktif deneyim yaşamak için giriş yapmanız gerekiyor. Hesabınız yoksa, hızlıca oluşturabilirsiniz. Sınırsız floodlar ve etkileşimler sizleri bekliyor. Giriş yapmayı unutmayın!

Şifremi hatırlamıyorum

Şifreniz mi unuttunuz? Endişelenmeyin! Lütfen kayıtlı e-posta adresinizi giriniz. Size bir bağlantı göndereceğiz ve bu link üzerinden yeni bir şifre oluşturabileceksiniz.

Fil Necati Masonlar Locası Subreddit Adı Nedir? Cevap: ( N31 )

Üzgünüz, flood girme izniniz yok, Flood girmek için giriş yapmalısınız.

Lütfen bu Floodun neden bildirilmesi gerektiğini düşündüğünüzü kısaca açıklayın.

Lütfen bu cevabın neden bildirilmesi gerektiğini kısaca açıklayın.

Lütfen bu kullanıcının neden rapor edilmesi gerektiğini düşündüğünüzü kısaca açıklayın.

Mobil Uygulamada Açın

Güncel Floodlar En sonuncu Nesne

web.dev mühendislik blogu #1: Siteyi nasıl oluşturuyoruz ve Web Bileşenlerini kullanıyoruz

web.dev mühendislik blogu #1: Siteyi nasıl oluşturuyoruz ve Web Bileşenlerini kullanıyoruz

Bu, web.dev’in mühendislik blogundaki ilk gönderidir. Önümüzdeki aylarda çalışmalarımızdan eyleme dönüştürülebilir içgörüler paylaşmayı umuyoruz; bu nedenle Engineering Blog etiketiyle gönderileri izleyin! Burada, statik sitemiz için oluşturma sürecini ve web bileşenlerimizin arkasındaki (isteğe bağlı!) JavaScript’i ele alacağız.

web.dev, modern web deneyimleri oluşturmaya yönelik içerik sağlar ve sitenizin performansını ölçmenize olanak tanır. Bilgili kullanıcılar, Ölçüm sayfamızın sadece bir arayüz olduğunu fark etmiş olabilir. deniz feneri, Chrome’un DevTools’unda da mevcuttur. web.dev’de oturum açmak, sitenizde düzenli Lighthouse denetimleri yapmanızı sağlar, böylece puanının zaman içinde nasıl değiştiğini görebilirsiniz. Oldukça özel olduğunu düşündüğümüz için Ölçüm sayfasını biraz sonra tekrar ziyaret edeceğim. 🎊

giriiş #

Temel olarak web.dev, bir Markdown dosyaları koleksiyonundan oluşturulan statik bir sitedir. kullanmayı seçtik 110 çünkü Markdown’ı HTML’ye dönüştürmeyi kolaylaştıran gösterişli, genişletilebilir bir araçtır.

Ayrıca, yalnızca destekleyen tarayıcılara sunduğumuz modern JavaScript paketlerini de kullanıyoruz. type="module"içerir async Ve await. Her zaman güncel kalan tarayıcılar tarafından desteklenen, ancak eski sürümlerin küçük bir kısmı tarafından desteklenmeyen özellikleri de memnuniyetle kullanıyoruz. Statik bir site olduğumuz için, JavaScript sadece gerekli değil içeriğimizi okumak için

Statik HTML oluşturmayı ve JavaScript’imizi Rollup ile paketlemeyi içeren oluşturma işlemi tamamlandıktan sonra, web.dev test için basit bir statik sunucuda barındırılabilir. site neredeyse tamamen statik, ancak yine de özel bir Node.js sunucusundan yararlanan birkaç özel ihtiyacımız var. Bunlar, geçersiz alan adları için yönlendirmelerin yanı sıra, yaklaşan bir uluslararasılaştırma özelliği için kullanıcının tercih ettiği dili ayrıştıran kodu içerir.

Statik üretim #

Web.dev’deki her sayfa Markdown’da yazılmıştır. Tüm sayfalar şunları içerir: ön mesele, her gönderiyle ilgili meta verileri açıklayan. Bu meta veriler, başlıklar, etiketler vb. oluşturarak her sayfanın düzenine alınır. İşte bir örnek:

---
layout: post
title: What is network reliability and how do you measure it?
authors:
- jeffposnick
date: 2018-11-05
description: |
The modern web is enjoyed by a wide swath of people…

---

The modern web is enjoyed by a wide swath of [people](https://www.youtube.com/watch?v=dQw4w9WgXcQ), using a range of different devices and types of network connections.

Your creations can reach users all across the world...

Bu ön konu, yazar(lar), yayın tarihi ve etiketler gibi isteğe bağlı özellikleri tanımlamamıza izin verir. Eleventy, ön konuyu uygun bir şekilde ortaya çıkarır. veri akıllı bir şey yapmak istediğimiz hemen hemen her eklentide, şablonda veya diğer bağlamda. Veri nesnesi, Eleventy’nin tanımladığı şeyi de içerir. veri dizisi— her bir sayfadan, sayfanın kullandığı düzenden ve hiyerarşik klasör yapısında bulunan verilerden alınan çeşitli veriler.

Her benzersiz düzen, farklı bir içerik türünü tanımlar ve miras itibaren diğer düzenler. Web.dev’de bu özelliği, farklı içerik türlerini (gönderiler ve kod laboratuvarları gibi) doğru bir şekilde çerçevelemek ve aynı zamanda bir üst düzey HTML düzenini paylaşmak için kullanıyoruz.

Koleksiyonlar #

Eleventy, keyfi içerik koleksiyonları oluşturmak için programatik bir yol sağlar. Bu, yazı yazarları için sayfalandırma desteği oluşturmamıza ve sanal sayfalar (diskte eşleşen bir Markdown dosyası olmayan sayfalar) oluşturmamıza izin verdi. Örneğin, yazar sayfalarımızı, kalıcı bağlantısı için bir ifade içeren bir şablon (böylece şablon her yazar için yeniden işlenir) ve bir destek koleksiyonu kullanarak oluştururuz.

Bu, örneğin Addy’nin tüm gönderilerini içeren basit bir sayfayla sonuçlanır!

sınırlamalar #

Şu anda Eleventy’nin oluşturma sürecine kolayca bağlanamıyoruz çünkü bu beyan ediciziyade zorunlu: Nasıl istediğinizi değil, ne istediğinizi tanımlarsınız. Eleventy’yi daha büyük bir yapı aracının parçası olarak çalıştırmak zordur, çünkü yalnızca komut satırı arayüzü aracılığıyla çalıştırılabilir.

şablonlama #

web.dev’in kullandığı Rahibeler orijinal olarak Mozilla tarafından geliştirilen şablonlama sistemi. Nunjucks, döngüler ve koşullu ifadeler gibi tipik şablon oluşturma özelliklerine sahiptir, ancak aynı zamanda tanımlamamıza izin verir. kısa kodlar daha fazla HTML oluşturan veya başka bir mantığı çağıran.

Statik içerik siteleri oluşturan çoğu ekip gibi, biz de küçük başladık ve zamanla kısa kodlar ekledik – şimdiye kadar yaklaşık 20 tane. Bunların çoğu yalnızca daha fazla HTML oluşturur (özel web bileşenlerimiz dahil). İşte bir örnek:

{% Aside %}
[See how Asides work in the web.dev codebase](/handbook/web-dev-components/#asides)
{% endAside %}

Sonunda şöyle görünecek:

İlgili Mesajlar

Yorum eklemek için giriş yapmalısınız.