サーバー側は、1995年にウェブの最も熱いものを含みます

13862 ワード
html css tutorial webdev テキストリンク
最近、私は将来に戻ってきました.私はWordPressのようなものを放棄しているし、いくつかの私のサイトのために実行しているノードのアプリを持っている試み.代わりに私は考えられないことを行って、見つけることができるほぼすべての可能なWebホテルサービスで利用可能な機能に戻って戻ってきました:SSIは、サーバー側が含まれています、90年代半ば頃に導入されました.

路上裏
私はそこにある新しいものが好きです、しかし、いくつかはあまりに複雑で、管理するために重くなって、単純なもののためにもろいです.確かに、あなたは先に行くことができるとギャツビーで実行しているホームページやポートフォリオを持っていますが、私はそれが非常に過電圧であると主張するだろう.あなたが前にツールで何もしなかったならば、それは良い経験ですが.
私は新しい技術を学びたいと思っているわけではありません.その代わりに私はたくさんの古いサイトを持っています.およそ10年前に、私は私がよりよく内容に集中することができるという望みで、WordPressに私のサイトを移しました.まあ、それはうまくいきませんでした.WPへの一定の変更は私のカスタムデザインが常に次のアップデートで壊れたので、私はデフォルトのテーマを使用しなければならなかった、それらは私の好みに決していなかった.これは、サイトの私のインスピレーションを殺し、結局私はもはや新しいコンテンツを作った.
新しい「より簡単な」技術のうち、私はdenoに興味があります、しかし、それさえ、いくつかの設定を始めて、ちょうど始まるHTMLより多くを書くことを意味します.それで、これは本当に私を押しました、そして、私は私が使用したものを思い出しました:SHTML.

基礎
PHPをサポートしているサービスについては、SSIをアップロードして実行している可能性があります.これは非常に簡単に開始することを意味しますindex.shtml ファイルと一緒に物事を入れ始める.いくつかのホストで使用する必要があります.htaccess 機能を有効にするには、次の手順に従います
Options +Includes
AddType text/html .shtml
AddOutputFilter INCLUDES .html
ここでは定期的にもSSIを有効にしました.html ファイル.
使用する最も一般的なSSI機能は<!--#include virtual="/head.html"--> . これはhead.html サイトのルートからのファイルhttps://example.com/head.html ).
これを行うのは、HTMLファイルのローカルコピーを見ることが壊れているようです.マシン上で開発したいなら、ASPのようにHTTPサーバを設定する必要があります.私は1つなしで住んでいたし、単に私はそれらを変更しているファイルをアップロードするためにSFTPを使用しているので、私はバージョン管理と自動化のすべての種類を欠落している!
ほとんどの場合、これは十分です.共有コンポーネントがあるサイトを作成できます.

構造
このようにして、自分のHTMLを分割してしまいました.
<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta name="description" content="" />
<!--#include virtual="/head.html"-->
<!--#include virtual="/js-utility.html"-->
    </head>
    <body>
<!--#include virtual="/site-nav.html"-->

        <!-- PAGE CONTENT HERE -->

<!--#include virtual="/topic-nav.html"-->
<!--#include virtual="/foot.html"-->
    </body>
</html>
私は一人以上いるjs-utility.html ファイルのソート.これらの1つの例はFlickity ゲームの私のスクリーンショットのイメージカルーセルを提供します.付属のHTMLファイルは非常に簡単です.
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css" />
<script async defer src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
私はまた、Flickity JSがキックオフするまでスクロール可能な水平行に画像をレンダリングするように私のイメージギャラリーのためのフォールバックCSSを書いた.私も使っているloading="lazy" 最初のもの以外のすべてのイメージのために、私は怠惰な荷を積んでいます.現代のWeb標準は確かに強力です!つの属性は、多くの策略と考慮を必要とするために使われる何かを管理します.
興味があればhere is a page with the carousel . あなたもJavaScriptをオフにすることができますし、スクロールバーを使用して画像をスクロールすることができますか、またはそれらをクリックして、それぞれを通過することができますか、またはそれらを介してキーボードを使用してタブをすることができます.JavaScriptが機能していないときでも、それは3つの使いやすさ/アクセシビリティ機能です、そして、彼らのためのコードは複雑でありません.でも今は少し側を追っています.

キャッシング
あなたがしたいことの一つは、あなたのファイルタイプのほとんどに長いキャッシュタイムを設定することです.たとえば、1年間の画像やcssを保存することは理にかなっている.しかし、欠点は、キャッシュバスターを変更するたびに、CSSファイルを変更することを覚えておく必要があることです!閉じるこの動画はお気に入りから削除されています<link rel="stylesheet" href="/index.css?version-X" /> あなたが変化し続けるところX 手動で.これは良いです.
SSIは、これを自動化することができます!ファーストトゥーhead.html 次のように追加できます.
<!--#config timefmt="%Y-%m-%d_%H%M%S" -->
これは使用する日付書式です.これは文字列になります2020-10-02_215735 . 次の部分は、キャッシュバスターとして日付を使用することです.
<link rel="stylesheet" href="/index.css?<!--#flastmod virtual="/index.css" -->" />
そして今、あなたのCSSの新しいバージョンをアップロードするたびにすべてのページがすぐに新しいCSSを使用します!もちろん、あなたのHTMLファイルの短いキャッシュタイムを持っているか、ブラウザが常にファイルが変更されたかどうかをサーバーに尋ねるようにする必要があります.私はこのポストでキャッシングの詳細を調査しません-現在のところ、あなたがキャッシュヘッダーでこのキャッシングふるまいをコントロールすることができるということを知っているために、それは十分以上です.

色、レイアウト測定、テーマ
これは、JSソリューションのSSS、less、cssモジュール、cssなどあらゆる種類のCSSツールなしでサイトを作るときに最も迷惑な部分の一つです.あなたがそれぞれの使用を追跡するために必要なものの色を変更するアイデアを取得するたびに、別のコンテキストのために意味される間違った色を変更しないことを確認するたびに.
最近では、この問題に対するCSSのみの解決策があります.それは本当に多くの、特にJSツールのCSSのテーマの機能と機能に販売されている人々によって高く評価され、非常に下にある壮大な機能です.
しかし、背景、テキスト、リンク、フォーカスの色のような基本を定義したいと言うと、暗い暗い部分のための影.
このようにします.
:root {
    --bg: white;
    --fg: #333;
    --link: #00A;
    --focus: #059;
    --shadow: rgba(0, 0, 0, 0.05);
}
次に、適切な場所でこれらを定義することができます.
html {
    background-color: var(--bg);
    color: var(--fg);
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* fallback for browsers with no :focus-visible support */
a:focus {
    outline: thin dotted var(--focus);
    outline-offset: 1px;
}
/* ignored by non-Firefox */
a:not(:-moz-focusring) {
    outline: none;
}
/* ignored by browsers that do not support :focus-visible */
a:not(:focus-visible) {
    outline: none;
}
/* Firefox :focus-visible */
a:-moz-focusring {
    outline: thin solid var(--focus);
    outline-offset: 2px;
    -moz-outline-radius: 6px;
}
/* standard :focus-visible (Chrome 86 and later) */
a:focus-visible {
    outline: thin solid var(--focus);
    outline-offset: 2px;
}

a:active {
    background-color: var(--shadow);
}
クーラーでさえ、ブロックを定義することができます.
.block { background-color: var(--bg); color: var(--fg); }
その後、ブロックの色のテーマを適用することができます!
.blue {
    --bg: navy;
    --fg: white;
    --link: #33F;
    --focus: white;
    --shadow: rgba(0, 0, 0, 0.5);
}
ここで驚くべきことは、青いブロックの内側のすべてのリンクが自動的に他のものより軽い青い色であるということですnavy ダークブルーで、すべてのテキストは白です.
そして、これは単に書くだけでHTMLで実現できます.
<div class="block blue">
    <!-- CONTENT HERE -->
</div>
変数を微調整することもできますstyle 属性.あなたも、メインブロック内のさまざまなスタイルのルールを持つブロックを持つことができますし、物事だけで作業を続ける、ネストの問題はありません!これは、すべてのツールでさえ達成するのが非常に難しい何かです.そして、あなたはちょうどより多くの色のためにこれを使うことができます、そして、変数のために変数を使うことさえできます:--bg: var(--shadow); .

概要
これを言うのはちょっとおどけかもしれませんが、サーバー側にはHTML、CSS、バニラJavaScriptのサイトを作りたいと思っている人にとって、非常に潜在的な選択肢があると思います.典型的な近代的なWebdevのルートとは異なり、多くの強力なものを達成するために、最高の練習に従うには、多くのツールを必要としない、パフォーマンスの維持可能なサイトを持っている.
ほとんどのブラウザサポートtype="module" これらの日も能力を簡単にバンドルなしで複雑な複数のファイルJSのアプリを作ることができます!小さなサイト上のミニ化のようなことを行うことは本当に価値の多くを提供していない、圧縮は本当にあなたのために多くを管理することができます.ちょうどあなたのファイルが転送で圧縮されることを確認してください.htaccess ) そして、あなたは行くのがよいです.
また、人々があなたのソースコードを読むことを奨励サイトを作成することも可能です!あなたは、あなたのCSSのためにあなたのHTMLを読者のためにきちんとフォーマットしておくことができます.とtype="module" あなたは複雑なJSのアプリを誰もがファイルを1つだけで自分のブラウザで見て理解することができますを作成することができます.これは、学習と教育の機会を開きます.
これは実際には規範であったものです.あなたは彼らのサイトのソースを見てどのように熟練した人々を理解することができます.最近では、あまりにも多くのサイトがマンガ生のゴミを提供し、人々は同様に自分の趣味のサイトにこの実践に従ってください.それは本当に意味をなすか?
今日はサーバー側を試してみて、あなたの人間に優しいコード化サイトを試してみてください!それは簡単です:あなたはおそらくあなたの最初のHTMLファイルを持っていると15分未満で世界に目に見える一度Googleを自分でホスト!
#6 DECODE CASE
ubuntuでmysqlリモート接続を開く