近況 #6


「あたしメリーさん。今、あなたの後ろにいるの。」
東方深秘録

嘛,會講呢句係因為單純迷上咗森羅萬象呢個組織嘅歌。其實凋叶棕嘅御用歌姬めらみぽっぷ都有唱過森羅萬象啲歌架。

我所認知嘅Javascript進化史


呢篇係講我所見識到嘅Javascript進化史。唔會講佢嗰啲ECMAScript由1到7嘅進化史,而係我所認知嘅,網頁效果到而家近乎無所不能嘅Javascript。

講緊呢個嘢都有十年以上歷史...

時間回溯到第一次瀏覽器大戰嗰陣。代表微軟嘅瀏覽器Internet Explorer,同網景嘅Netscape Navigator正喺開始當時仲係「新世界」嘅互聯網市場爭緊一席之長短。當然,除咗瀏覽器之間嘅比拼,我哋呢班對互聯網感到濃厚興趣嘅學生哥亦都好積極開發網頁。為興趣,為學校,為朋友,我哋寫網頁,整討論區,寫留言板。

無法輕易被取代嘅傳統


部份大公司依然使用Classic ASP。

現代嘅工程師,不論前端後端,都會盡量應用新嘅技術去整新嘅程式,又或者係將舊嘅產品重新編寫。之前喺 jQuery - 時代嘅眼淚 度都有講過,GitHub已經完全放棄jQuery,改用Vanilla Javascript去達到想要嘅效果。不過,當你只係想由小專案開始將新嘅技術發揚光大,又唔係咁容易架。

jQuery - 時代嘅眼淚


有返咁上下資歷嘅人都應該會知道jQuery呢套Javascript framework。想當年,JS入門級嘅你掌握咗jQuery就幾乎等於掌握咗front end嘅世界;即使有返一定JS資歷嘅人都因為jQuery帶黎嘅方便而樂於使用佢。而今日,隨住GitHub已經棄用jQuery,雖然未去到話步入歷史,但係影響力應該逐漸衰退。

CSS嘅特色導致問題?


今日係公司最後一日,前後一個月嘅不被信任生涯(?)終於完結。

進入話題先。今日最後幫公司更新咗首頁,發現CSS有一個位係無辦法達成...

HTML:
<div class="col-4 portal-box p-0">
    <a href="{{ route('website.school.index') }}">
        <img src="{{ asset('images/portal-school-image.jpg') }}" class="d-block mx-auto portal-image" />
        <h1 class="position-absolute portal-image-name text-center">學校管理</h1>
    </a>
</div>

SASS:
.portal-box {
    .portal-image {
        width: 100%;

        &:hover {
            opacity: 0.2;

            +.portal-image-name {
                z-index: 2;
            }
        }
    }

    .portal-image-name {
        width: 100%;

        bottom: 0;

        color: #000000;

        z-index: -1;

        &:hover {
            +.portal-image {
                opacity: 0.2;
            }
        }
    }
}

呢個位係當mouse移入張圖嗰陣就會淡化張圖並且會令遮住咗嘅字浮現出黎。問題係當滑鼠指向啲字嘅時候,張圖唔識得淡化......無理由架,明明我已經整咗會淡出架喎?

Compiled CSS:
.portal-box .portal-image-name:hover + .portal-image {
    opacity: 0.2;
}

然後我就去搵關於CSS Adjacent Siblings Selectors嘅嘢,發現我一直誤解佢同CSS General Siblings Selectors嘅用法...
https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector

最後唯有用jQuery達到效果...

Javascript:
$(document).ready(() => {
    $('.portal-image').on('mouseenter', function() {
        $(this).css('opacity', '0.2');
        $(this).siblings('.portal-image-name').css('z-index', '2');
    });
    $('.portal-image').on('mouseleave', function() {
        $(this).css('opacity', '1.0');
        $(this).siblings('.portal-image-name').css('z-index', '-1');
    });
    $('.portal-image-name').on('mouseenter', function() {
        $(this).siblings('.portal-image').css('opacity', '0.2');
        $(this).css('z-index', '2');
    });
    $('.portal-image-name').on('mouseleave', function() {
        $(this).siblings('.portal-image').css('opacity', '1.0');
        $(this).css('z-index', '-1');
    });
});

南無。

Powered by Half-moon Production.

Copyright © 2011-2020 by 泣雨家的雜物房. Version 1.5.2.

近況 #6


「あたしメリーさん。今、あなたの後ろにいるの。」
東方深秘録

嘛,會講呢句係因為單純迷上咗森羅萬象呢個組織嘅歌。其實凋叶棕嘅御用歌姬めらみぽっぷ都有唱過森羅萬象啲歌架。

我所認知嘅Javascript進化史


呢篇係講我所見識到嘅Javascript進化史。唔會講佢嗰啲ECMAScript由1到7嘅進化史,而係我所認知嘅,網頁效果到而家近乎無所不能嘅Javascript。

講緊呢個嘢都有十年以上歷史...

時間回溯到第一次瀏覽器大戰嗰陣。代表微軟嘅瀏覽器Internet Explorer,同網景嘅Netscape Navigator正喺開始當時仲係「新世界」嘅互聯網市場爭緊一席之長短。當然,除咗瀏覽器之間嘅比拼,我哋呢班對互聯網感到濃厚興趣嘅學生哥亦都好積極開發網頁。為興趣,為學校,為朋友,我哋寫網頁,整討論區,寫留言板。

無法輕易被取代嘅傳統


部份大公司依然使用Classic ASP。

現代嘅工程師,不論前端後端,都會盡量應用新嘅技術去整新嘅程式,又或者係將舊嘅產品重新編寫。之前喺 jQuery - 時代嘅眼淚 度都有講過,GitHub已經完全放棄jQuery,改用Vanilla Javascript去達到想要嘅效果。不過,當你只係想由小專案開始將新嘅技術發揚光大,又唔係咁容易架。

jQuery - 時代嘅眼淚


有返咁上下資歷嘅人都應該會知道jQuery呢套Javascript framework。想當年,JS入門級嘅你掌握咗jQuery就幾乎等於掌握咗front end嘅世界;即使有返一定JS資歷嘅人都因為jQuery帶黎嘅方便而樂於使用佢。而今日,隨住GitHub已經棄用jQuery,雖然未去到話步入歷史,但係影響力應該逐漸衰退。

CSS嘅特色導致問題?


今日係公司最後一日,前後一個月嘅不被信任生涯(?)終於完結。

進入話題先。今日最後幫公司更新咗首頁,發現CSS有一個位係無辦法達成...

HTML:
<div class="col-4 portal-box p-0">
    <a href="{{ route('website.school.index') }}">
        <img src="{{ asset('images/portal-school-image.jpg') }}" class="d-block mx-auto portal-image" />
        <h1 class="position-absolute portal-image-name text-center">學校管理</h1>
    </a>
</div>

SASS:
.portal-box {
    .portal-image {
        width: 100%;

        &:hover {
            opacity: 0.2;

            +.portal-image-name {
                z-index: 2;
            }
        }
    }

    .portal-image-name {
        width: 100%;

        bottom: 0;

        color: #000000;

        z-index: -1;

        &:hover {
            +.portal-image {
                opacity: 0.2;
            }
        }
    }
}

呢個位係當mouse移入張圖嗰陣就會淡化張圖並且會令遮住咗嘅字浮現出黎。問題係當滑鼠指向啲字嘅時候,張圖唔識得淡化......無理由架,明明我已經整咗會淡出架喎?

Compiled CSS:
.portal-box .portal-image-name:hover + .portal-image {
    opacity: 0.2;
}

然後我就去搵關於CSS Adjacent Siblings Selectors嘅嘢,發現我一直誤解佢同CSS General Siblings Selectors嘅用法...
https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector

最後唯有用jQuery達到效果...

Javascript:
$(document).ready(() => {
    $('.portal-image').on('mouseenter', function() {
        $(this).css('opacity', '0.2');
        $(this).siblings('.portal-image-name').css('z-index', '2');
    });
    $('.portal-image').on('mouseleave', function() {
        $(this).css('opacity', '1.0');
        $(this).siblings('.portal-image-name').css('z-index', '-1');
    });
    $('.portal-image-name').on('mouseenter', function() {
        $(this).siblings('.portal-image').css('opacity', '0.2');
        $(this).css('z-index', '2');
    });
    $('.portal-image-name').on('mouseleave', function() {
        $(this).siblings('.portal-image').css('opacity', '1.0');
        $(this).css('z-index', '-1');
    });
});

南無。