ਡਿਵੈਲਪਰਾਂ ਦੀ ਇੱਕ ਬੁਰੀ ਆਦਤ ਹੈ ਕਿ ਉਹ ਅਜਿਹੇ 'ਸਵਿਸ ਆਰਮੀ ਨਾਈਫ' (ਬਹੁਤ ਸਾਰੇ ਫੰਕਸ਼ਨਾਂ ਵਾਲੇ ਸੰਦ) ਬਣਾਉਂਦੇ ਹਨ ਜਦੋਂ ਕਿ ਉਨ੍ਹਾਂ ਨੂੰ ਸਿਰਫ਼ ਇੱਕ ਤਿੱਖੀ ਬਲੇਡ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। HTML ਦੀ ਪਹਿਲੀ ਲਾਈਨ ਲਿਖਣ ਤੋਂ ਪਹਿਲਾਂ ਹੀ ਅਸੀਂ ਭਾਰੀ ਫਰੰਟਐਂਡ ਫਰੇਮਵਰਕਸ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲੱਗ ਜਾਂਦੇ ਹਾਂ। ਅਸੀਂ ਐਨੀਮੇਸ਼ਨ ਲਾਇਬ੍ਰੇਰੀਆਂ, ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਟੂਲਸ, ਅਤੇ ਅਜਿਹੀਆਂ ਬਿਲਡ ਪਾਈਪਲਾਈਨਾਂ ਜੋੜ ਦਿੰਦੇ ਹਾਂ ਜੋ ਇੱਕ ਛੋਟੀ ਕੰਪਨੀ ਚਲਾਉਣ ਲਈ ਵੀ ਕਾਫ਼ੀ ਹੋਣ। ਫਿਰ ਅਸੀਂ ਹੈਰਾਨ ਹੁੰਦੇ ਹਾਂ ਕਿ ਸਾਡੀਆਂ ਪੋਰਟਫੋਲੀਓ ਸਾਈਟਾਂ ਨੂੰ ਲੋਡ ਹੋਣ ਵਿੱਚ ਤਿੰਨ ਸੈਕਿੰਡ ਕਿਉਂ ਲੱਗਦੇ ਹਨ, ਮੋਬਾਈਲ 'ਤੇ ਨੈਵੀਗੇਸ਼ਨ ਕਿਉਂ ਟੁੱਟ ਜਾਂਦੀ ਹੈ, ਅਤੇ ਹਾਇਰਿੰਗ ਮੈਨੇਜਰ ਸਾਡੇ ਮਹੀਨਿਆਂ ਦੀ ਮਿਹਨਤ ਨਾਲ ਬਣਾਏ ਪ੍ਰੋਜੈਕਟਾਂ ਨੂੰ ਦੇਖਣ ਤੋਂ ਪਹਿਲਾਂ ਹੀ ਕਿਉਂ ਚਲੇ ਜਾਂਦੇ ਹਨ।
ਮੈਂ ਆਪਣੇ ਤਾਜ਼ਾ ਪੋਰਟਫੋਲੀਓ ਲਈ ਇੱਕ ਵੱਖਰਾ ਰਸਤਾ ਚੁਣਿਆ। ਮੈਂ ਅੰਤਹੀਨ ਡਿਪੈਂਡੈਂਸੀਆਂ (dependencies) ਦੇ ਈਕੋਸਿਸਟਮ ਤੋਂ ਦੂਰ ਰਿਹਾ ਅਤੇ ਪੂਰੀ ਸਾਈਟ ਨੂੰ ਸੈਮੈਂਟਿਕ HTML ਅਤੇ ਸਾਫ਼ CSS ਨਾਲ ਬਣਾਇਆ। ਕੋਈ JavaScript ਫਰੇਮਵਰਕ ਨਹੀਂ। ਕੋਈ ਬਿਲਡ ਸਟੈਪਸ ਨਹੀਂ। ਕੋਈ Third-party ਐਨੀਮੇਸ਼ਨ ਇੰਜਣ ਨਹੀਂ। ਸਿਰਫ਼ ਪਲੇਟਫਾਰਮ ਖੁਦ, CSS Grid ਅਤੇ Flexbox ਦੁਆਰਾ ਸੰਭਾਲਿਆ ਗਿਆ ਲੇਆਉਟ, ਅਤੇ ਇੱਕ ਡਿਜ਼ਾਈਨ ਫਿਲਾਸਫੀ ਜੋ ਸਪੀਡ ਅਤੇ ਸਪੱਸ਼ਟਤਾ ਨੂੰ ਸਿਰਫ਼ ਇੱਕ ਸੋਚ ਤੋਂ ਪਰੇ ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ (feature) ਵਜੋਂ ਦੇਖਦੀ ਹੈ।
ਨਤੀਜਾ ਹਲਕਾ, ਤੇਜ਼ ਅਤੇ ਪੇਸ਼ੇਵਰ ਹੈ। ਇੱਥੇ ਦੱਸਿਆ ਗਿਆ ਹੈ ਕਿ ਮੈਂ ਇਸਨੂੰ ਕਿਵੇਂ ਨੇਪਰੇ ਚਾੜ੍ਹਿਆ।
ਬੁਨਿਆਦ ਤੋਂ ਸ਼ੁਰੂਆਤ ਕਰੋ
ਜ਼ਿਆਦਾਤਰ ਓਵਰ-ਇੰਜੀਨੀਅਰਿੰਗ (over-engineering) ਬੁਨਿਆਦ ਤੋਂ ਹੀ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ। ਇੱਕ ਪੋਰਟਫੋਲੀਓ ਨੂੰ ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਹੋਣ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਇਸਨੂੰ ਤੁਹਾਡੇ ਕੰਮ ਨੂੰ ਦਿਖਾਉਣ, ਲੋਕਾਂ ਨੂੰ ਦੱਸਣ ਕਿ ਤੁਹਾਡੇ ਨਾਲ ਕਿਵੇਂ ਸੰਪਰਕ ਕਰਨਾ ਹੈ, ਅਤੇ ਰਸਤੇ ਤੋਂ ਹਟਣ ਦੀ ਲੋੜ ਹੈ। ਮੈਂ ਸੈਮੈਂਟਿਕ HTML ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਕਿਉਂਕਿ ਬ੍ਰਾਊਜ਼ਰ ਪਹਿਲਾਂ ਹੀ ਜਾਣਦਾ ਹੈ ਕਿ ਇੱਕ nav, ਇੱਕ article, ਅਤੇ ਇੱਕ footer ਨੂੰ ਕਿਵੇਂ ਰੈਂਡਰ ਕਰਨਾ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਸਹੀ ਕੰਮ ਲਈ ਸਹੀ ਐਲੀਮੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਐਕਸੈਸਬਿਲਟੀ, ਸਰਚ ਇੰਜਣ ਵਿਜ਼ੀਬਿਲਟੀ, ਅਤੇ ਰਿਸਪੌਂਸਿਵ ਵਿਵਹਾਰ ਲਗਭਗ ਮੁਫ਼ਤ ਵਿੱਚ ਮਿਲ ਜਾਂਦਾ ਹੈ। ਤੁਸੀਂ ਘੱਟ ਕੋਡ ਵੀ ਲਿਖਦੇ ਹੋ। ਪੰਜ ARIA ਐਟਰੀਬਿਊਟਸ ਵਾਲਾ ਇੱਕ div ਸਿਰਫ਼ ਇੱਕ button ਦੀ ਇੱਕ ਬੇਲੋੜੀ ਨਕਲ ਹੈ। ਮੈਂ ਇਸ ਤੋਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਚਿਆ।
ਲੇਆਉਟ ਲਈ, CSS Grid ਅਤੇ Flexbox ਕਾਫ਼ੀ ਹਨ। Grid ਮੈਕਰੋ (macro) ਢਾਂਚੇ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ: ਪੂਰੇ ਪੇਜ ਦੇ ਸੈਕਸ਼ਨ, ਪ੍ਰੋਜੈਕਟ ਗੈਲਰੀ, ਮੁੱਖ ਬਲਾਕਾਂ ਦੀ ਅਲਾਈਨਮੈਂਟ। Flexbox ਮਾਈਕਰੋ (micro) ਇੰਟਰੈਕਸ਼ਨਾਂ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਦਾ ਹੈ: ਉਸ ਕੈਪਸੂਲ ਦੇ ਅੰਦਰ ਨੈਵੀਗੇਸ਼ਨ ਲਿੰਕ, ਕਾਰਡਾਂ ਦੇ ਅੰਦਰ ਟੈਕਸਟ ਨੂੰ ਸੈਂਟਰ ਕਰਨਾ, ਵਿਊਪੋਰਟ ਦੇ ਹੇਠਾਂ ਫੁੱਟਰ ਨੂੰ ਧੱਕਣਾ। ਇਕੱਠੇ ਮਿਲ ਕੇ, ਉਹ ਹਰ ਉਸ ਕਾਰਨ ਨੂੰ ਖਤਮ ਕਰ ਦਿੰਦੇ ਹਨ ਜਿਸ ਲਈ ਤੁਹਾਨੂੰ 2018 ਵਿੱਚ ਬਾਰ੍ਹੇ-ਕਾਲਮ ਵਾਲਾ ਗਰਿੱਡ ਫਰੇਮਵਰਕ ਇੰਪੋਰਟ ਕਰਨ ਦੀ ਲੋੜ ਪੈ ਸਕਦੀ ਸੀ। ਕੋਡ ਪੜ੍ਹਨਯੋਗ ਰਹਿੰਦਾ ਹੈ। CSS ਫਾਈਲ ਛੋਟੀ ਰਹਿੰਦੀ ਹੈ।
ਰੰਗ, ਟਾਈਪੋਗ੍ਰਾਫੀ, ਅਤੇ ਸੰਜਮ
ਮੈਂ ਚਾਹੁੰਦਾ ਸੀ ਕਿ ਪੋਰਟਫੋਲੀਓ ਲੋਡ ਹੁੰਦੇ ਹੀ ਸ਼ਾਂਤ ਮਹਿਸੂਸ ਹੋਵੇ। ਬੈਕਗ੍ਰਾਊਂਡ ਵਿੱਚ ਹਲਕੇ ਰੇਡੀਅਲ ਗ੍ਰੇਡੀਐਂਟਸ ਦੇ ਨਾਲ ਇੱਕ ਹਲਕਾ ਅਧਾਰ ਵਰਤਿਆ ਗਿਆ ਹੈ। ਕੁਝ ਵੀ ਹਮਲਾਵਰ ਨਹੀਂ। ਗ੍ਰੇਡੀਐਂਟ ਘੱਟ ਓਪੈਸਿਟੀ 'ਤੇ ਹੈ, ਜੋ ਇੱਕ ਨਰਮ ਡੂੰਘਾਈ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਪੇਜ ਨੂੰ ਫਲੈਟ ਮਹਿਸੂਸ ਹੋਣ ਤੋਂ ਰੋਕਦਾ ਹੈ। ਇਹ ਤੁਰੰਤ ਲੋਡ ਹੁੰਦਾ ਹੈ ਕਿਉਂਕਿ ਇਹ ਸ਼ੁੱਧ CSS ਹੈ। ਇੱਥੇ ਕੰਪਰੈੱਸ ਕਰਨ ਲਈ ਕੋਈ ਹੀਰੋ ਇਮੇਜ ਨਹੀਂ ਹੈ, ਕੋਈ WebP ਫਾਲਬੈਕਸ ਨਹੀਂ ਹੈ, ਅਤੇ ਕੌਂਫਿਗਰ ਕਰਨ ਲਈ ਕੋਈ JavaScript ਲੇਜ਼ੀ-ਲੋਡਿੰਗ ਲਾਇਬ੍ਰੇਰੀਆਂ ਨਹੀਂ ਹਨ।
ਟਾਈਪੋਗ੍ਰਾਫੀ ਸ਼ਖਸੀਅਤ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ। ਮੈਂ Outfit ਨੂੰ Ovo ਦੇ ਨਾਲ ਜੋੜਿਆ। Outfit, ਇੱਕ ਜਿਓਮੈਟ੍ਰਿਕ ਸੈਨ-ਸੈਰਿਫ, ਸਾਰੇ UI ਟੈਕਸਟ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ: ਨੈਵੀਗੇਸ਼ਨ ਲੇਬਲ, ਬਟਨ ਟੈਕਸਟ, ਬਾਡੀ ਕਾਪੀ, ਮੈਟਾ ਡਿਟੇਲਸ। ਇਹ ਸਕ੍ਰੀਨਾਂ 'ਤੇ ਸਾਫ਼ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ ਅਤੇ ਛੋਟੇ ਆਕਾਰਾਂ ਵਿੱਚ ਵੀ ਪੜ੍ਹਨਯੋਗ ਰਹਿੰਦਾ ਹੈ। Ovo, ਇੱਕ ਮੀਡੀਅਮ-ਕੰਟਰਾਸਟ ਸੈਰਿਫ, ਹੈਡਰਾਂ ਅਤੇ ਮੁੱਖ ਹੈਡਲਾਈਨਾਂ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਜੋੜੀ ਪੇਜ ਨੂੰ ਇੱਕ ਸ਼ਾਂਤ ਐਡੀਟੋਰੀਅਲ ਅਹਿਸਾਸ ਦਿੰਦੀ ਹੈ। ਇਹ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਹੋਇਆ ਲੱਗਦਾ ਹੈ, ਨਾ ਕਿ ਸਿਰਫ਼ ਕੋਈ ਥੀਮ। ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਗੱਲ ਇਹ ਹੈ ਕਿ ਦੋਵੇਂ ਫੌਂਟ ਇੱਕ ਸਿੰਗਲ ਫੌਂਟ ਸਰਵਿਸ ਜਾਂ ਸੈਲਫ-ਹੋਸਟਡ ਫਾਈਲਾਂ ਤੋਂ ਲੋਡ ਹੁੰਦੇ ਹਨ। ਕੋਈ ਲੇਆਉਟ ਸ਼ਿਫਟ ਨਹੀਂ, ਕੋਈ ਅਣ-ਸਟਾਈਲਡ ਟੈਕਸਟ ਦਾ ਫਲੈਸ਼ ਨਹੀਂ, ਅਤੇ ਸ਼ੁਰੂਆਤੀ ਰੈਂਡਰ ਤੋਂ ਬਾਅਦ ਕੋਈ ਸਕ੍ਰਿਪਟ ਵੇਟ ਨਹੀਂ ਬਦਲਦੀ।
ਫਲੋਟਿੰਗ ਕੈਪਸੂਲ ਮੇਨੂ
ਨੈਵੀਗੇਸ਼ਨ ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਪੋਰਟਫੋਲੀਓ ਅਕਸਰ ਆਪਣੇ ਭਾਰ ਹੇਠ ਦਬ ਜਾਂਦੇ ਹਨ। ਫੁੱਲ-ਸਕ੍ਰੀਨ ਓਵਰਲੇ ਮੇਨੂ, ਸਟੈਗਰਡ ਐਨੀਮੇਸ਼ਨ ਸਕ੍ਰਿਪਟਾਂ, ਅਤੇ ਹੈਮਬਰਗਰ ਆਈਕਨ ਜੋ ਇੱਕ ਕਲਾਸ ਨੂੰ ਟੌਗਲ ਕਰਨ ਲਈ ਚਾਲੀ ਲਾਈਨਾਂ ਦੇ JavaScript ਦੀ ਮੰਗ ਕਰਦੇ ਹਨ। ਮੈ