ಡೆವಲಪರ್ಗಳಿಗೆ ಒಂದು ಕೆಟ್ಟ ಅಭ್ಯಾಸವಿದೆ: ಅವರಿಗೆ ಕೇವಲ ಒಂದು ಚೂಪಾದ ಬ್ಲೇಡ್ ಬೇಕಾದಾಗ ಅವರು ಸ್ವಿಸ್ ಆರ್ಮಿ ನೈಫ್ ಅನ್ನು ತಯಾರಿಸಲು ಮುಂದಾಗುತ್ತಾರೆ. ಮೊದಲ HTML ಸಾಲನ್ನು ಬರೆಯುವ ಮೊದಲೇ ನಾವು ಭಾರೀ ಫ್ರಂಟ್ ಎಂಡ್ ಫ್ರೇಮ್ವರ್ಕ್ಗಳನ್ನು ಬಳಸಲು ಮುಂದಾಗುತ್ತೇವೆ. ನಾವು ಅನಿಮೇಷನ್ ಲೈಬ್ರರಿಗಳು, ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್ಮೆಂಟ್ ಟೂಲ್ಗಳು ಮತ್ತು ಒಂದು ಸಣ್ಣ ಕಂಪನಿಯನ್ನು ನಡೆಸಲು ಬೇಕಾದಷ್ಟು ಶಕ್ತಿಯುತವಾದ ಬಿಲ್ಡ್ ಪೈಪ್ಲೈನ್ಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುತ್ತೇವೆ. ನಂತರ ನಮ್ಮ ಪೋರ್ಟ್ಫೋಲಿಯೊ ಸೈಟ್ಗಳು ಲೋಡ್ ಆಗಲು ಮೂರು ಸೆಕೆಂಡುಗಳನ್ನು ಏಕೆ ತೆಗೆದುಕೊಳ್ಳುತ್ತವೆ, ಮೊಬೈಲ್ನಲ್ಲಿ ನ್ಯಾವಿಗೇಷನ್ ಏಕೆ ಕೆಲಸ ಮಾಡುವುದಿಲ್ಲ ಮತ್ತು ನಾವು ತಿಂಗಳುಗಟ್ಟಲೆ ಕಷ್ಟಪಟ್ಟು ತಯಾರಿಸಿದ ಪ್ರಾಜೆಕ್ಟ್ಗಳನ್ನು ನೋಡುವ ಮೊದಲೇ ಹೈರಿಂಗ್ ಮ್ಯಾನೇಜರ್ಗಳು ಏಕೆ ಹೊರಟುಹೋಗುತ್ತಾರೆ ಎಂದು ನಾವು ಆಶ್ಚರ್ಯ ಪಡುತ್ತೇವೆ.
ನನ್ನ ಇತ್ತೀಚಿನ ಪೋರ್ಟ್ಫೋಲಿಯೊದಲ್ಲಿ ನಾನು ವಿಭಿನ್ನ ಹಾದಿಯನ್ನು ಆರಿಸಿಕೊಂಡೆ. ಅಂತ್ಯವಿಲ್ಲದ ಡಿಪೆಂಡೆನ್ಸಿಗಳ (dependencies) ಪರಿಸರದಿಂದ ದೂರ ಸರಿದು, ಸಂಪೂರ್ಣ ಸೈಟ್ ಅನ್ನು ಸೆಮ್ಯಾಂಟಿಕ್ HTML ಮತ್ತು ಕ್ಲೀನ್ CSS ಬಳಸಿ ನಿರ್ಮಿಸಿದೆ. ಯಾವುದೇ JavaScript ಫ್ರೇಮ್ವರ್ಕ್ಗಳಿಲ್ಲ. ಯಾವುದೇ ಬಿಲ್ಡ್ ಸ್ಟೆಪ್ಗಳಿಲ್ಲ. ಯಾವುದೇ ಥರ್ಡ್-ಪಾರ್ಟಿ ಅನಿಮೇಷನ್ ಇಂಜಿನ್ಗಳಿಲ್ಲ. ಕೇವಲ ಪ್ಲಾಟ್ಫಾರ್ಮ್ ಮಾತ್ರ, ಲೇಔಟ್ ಅನ್ನು CSS Grid ಮತ್ತು Flexbox ಮೂಲಕ ನಿರ್ವಹಿಸಲಾಗಿದೆ, ಮತ್ತು ವೇಗ ಹಾಗೂ ಸ್ಪಷ್ಟತೆಯನ್ನು ಕೇವಲ ಹೆಚ್ಚುವರಿ ವಿಷಯಗಳಾಗಿ ನೋಡದೆ ಅವುಗಳನ್ನೇ ಪ್ರಮುಖ ವೈಶಿಷ್ಟ್ಯಗಳಾಗಿ ಪರಿಗಣಿಸುವ ವಿನ್ಯಾಸ ತತ್ವವನ್ನು ಬಳಸಲಾಗಿದೆ.
ಇದರ ಫಲಿತಾಂಶವು ಲಘು, ವೇಗ ಮತ್ತು ವೃತ್ತಿಪರವಾಗಿದೆ. ನಾನು ಇದನ್ನು ಹೇಗೆ ಮಾಡಿದೆ ಎಂಬ ವಿವರ ಇಲ್ಲಿದೆ.
ಅಡಿಪಾಯದಿಂದ ಪ್ರಾರಂಭಿಸಿ
ಹೆಚ್ಚಿನ ಓವರ್-ಇಂಜಿನಿಯರಿಂಗ್ ಅಡಿಪಾಯದಿಂದಲೇ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. ಪೋರ್ಟ್ಫೋಲಿಯೊ ಎಂಬುದು ಒಂದು ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್ ಆಗಿರಬೇಕೆಂದಿಲ್ಲ. ಅದು ನಿಮ್ಮ ಕೆಲಸವನ್ನು ಪ್ರದರ್ಶಿಸಬೇಕು, ಜನರು ನಿಮ್ಮನ್ನು ಹೇಗೆ ಸಂಪರ್ಕಿಸಬಹುದು ಎಂದು ತಿಳಿಸಬೇಕು ಮತ್ತು ಅಷ್ಟೇ ಕೆಲಸ ಮಾಡಬೇಕು. ನಾನು ಸೆಮ್ಯಾಂಟಿಕ್ HTML ಅನ್ನು ಬಳಸಿದೆ ಏಕೆಂದರೆ ಬ್ರೌಸರ್ ಈಗಾಗಲೇ nav, article, ಮತ್ತು footer ಅನ್ನು ಹೇಗೆ ರೆಂಡರ್ ಮಾಡಬೇಕೆಂದು ತಿಳಿದಿದೆ. ನೀವು ಸರಿಯಾದ ಕೆಲಸಕ್ಕೆ ಸರಿಯಾದ ಎಲಿಮೆಂಟ್ ಬಳಸಿದಾಗ, ನಿಮಗೆ ಸುಲಭ ಲಭ್ಯತೆ (accessibility), ಸರ್ಚ್ ಇಂಜಿನ್ ದೃಶ್ಯತೆ (search engine visibility) ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ವರ್ತನೆಗಳು ಉಚಿತವಾಗಿ ಸಿಗುತ್ತವೆ. ನೀವು ಕಡಿಮೆ ಕೋಡ್ ಬರೆಯುತ್ತೀರಿ. ಐದು ARIA ಅಟ್ರಿಬ್ಯೂಟ್ಗಳನ್ನು ಹೊಂದಿರುವ ಒಂದು div ಎಂಬುದು ಕೇವಲ button ನ ಅತಿಯಾದ ಅನುಕರಣೆಯಷ್ಟೇ ಆಗಿರುತ್ತದೆ. ನಾನು ಅದನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ತಪ್ಪಿಸಿದೆ.
ಲೇಔಟ್ಗಾಗಿ, CSS Grid ಮತ್ತು Flexbox ಸಾಕಾಗುತ್ತವೆ. Gridವು ಮ್ಯಾಕ್ರೋ ರಚನೆಯನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ: ಒಟ್ಟಾರೆ ಪೇಜ್ ಸೆಕ್ಷನ್ಗಳು, ಪ್ರಾಜೆಕ್ಟ್ ಗ್ಯಾಲರಿ, ಪ್ರಮುಖ ಬ್ಲಾಕ್ಗಳ ಜೋಡಣೆ. Flexboxವು ಮೈಕ್ರೋ ಇಂಟರಾಕ್ಷನ್ಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ: ಆ ಕ್ಯಾಪ್ಸುಲ್ ಒಳಗಿನ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ಗಳು, ಕಾರ್ಡ್ಗಳ ಒಳಗೆ ಪಠ್ಯವನ್ನು ಮಧ್ಯದಲ್ಲಿ ತರುವುದು, ಫೂಟರ್ ಅನ್ನು ವ್ಯೂಪೋರ್ಟ್ನ ಕೆಳಭಾಗಕ್ಕೆ ತಳ್ಳುವುದು. ಇವೆರಡೂ ಸೇರಿ 2018 ರಲ್ಲಿ ನೀವು ಬಳಸುತ್ತಿದ್ದ ಹನ್ನೆರಡು-ಕಾಲಮ್ ಗ್ರಿಡ್ ಫ್ರೇಮ್ವರ್ಕ್ ಅನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡಬೇಕಾದ ಎಲ್ಲಾ ಕಾರಣಗಳನ್ನು ಇಲ್ಲೇ ನಿವಾರಿಸುತ್ತವೆ. ಕೋಡ್ ಓದಲು ಸುಲಭವಾಗಿರುತ್ತದೆ. CSS ಫೈಲ್ ಚಿಕ್ಕದಾಗಿರುತ್ತದೆ.
ಬಣ್ಣ, ಟೈಪ್ ಮತ್ತು ಸಂಯಮ
ಪೋರ್ಟ್ಫೋಲಿಯೊ ಲೋಡ್ ಆದ ತಕ್ಷಣ ಅದು ಶಾಂತವಾಗಿ ಕಾಣಬೇಕೆಂದು ನಾನು ಬಯಸಿದೆ. ಬ್ಯಾಕ್ಗ್ರೌಂಡ್ನಲ್ಲಿ ತಿಳಿ ಬಣ್ಣದೊಂದಿಗೆ ಸೂಕ್ಷ್ಮವಾದ ರೇಡಿಯಲ್ ಗ್ರೇಡಿಯಂಟ್ಗಳನ್ನು ಬಳಸಲಾಗಿದೆ. ಯಾವುದೂ ಅತಿಯಾಗಿಲ್ಲ. ಗ್ರೇಡಿಯಂಟ್ ಕಡಿಮೆ ಒಪಾಸಿಟಿ (opacity) ಯಲ್ಲಿರುತ್ತದೆ, ಇದು ಪೇಜ್ ಫ್ಲಾಟ್ ಆಗಿ ಕಾಣದಂತೆ ತಡೆಯುತ್ತದೆ ಮತ್ತು ಗಮನ ಸೆಳೆಯಲು ಅಬ್ಬರಿಸುವುದಿಲ್ಲ. ಇದು ಶುದ್ಧ CSS ಆಗಿರುವುದರಿಂದ ತಕ್ಷಣವೇ ಲೋಡ್ ಆಗುತ್ತದೆ. ಕಂಪ್ರೆಸ್ ಮಾಡಲು ಯಾವುದೇ ಹೀರೋ ಇಮೇಜ್ಗಳಿಲ್ಲ, WebP ಫಾಲ್ಬ್ಯಾಕ್ಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಅಗತ್ಯವಿಲ್ಲ, ಕಾನ್ಫಿಗರ್ ಮಾಡಲು ಯಾವುದೇ JavaScript ಲೇಜಿ-ಲೋಡಿಂಗ್ ಲೈಬ್ರರಿಗಳಿಲ್ಲ.
ಟೈಪೋಗ್ರಫಿ (Typography) ವ್ಯಕ್ತಿತ್ವವನ್ನು ನೀಡುತ್ತದೆ. ನಾನು Outfit ಅನ್ನು Ovo ಜೊತೆ ಜೋಡಿಸಿದೆ. Outfit ಎಂಬ ಜಿಯೋಮೆಟ್ರಿಕ್ ಸ್ಯಾನ್-ಸೆರಿಫ್ (geometric sans-serif), ಎಲ್ಲಾ UI ಪಠ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ: ನ್ಯಾವಿಗೇಷನ್ ಲೇಬಲ್ಗಳು, ಬಟನ್ ಪಠ್ಯ, ಬಾಡಿ ಕಾಪಿ, ಮೆಟಾ ವಿವರಗಳು. ಇದು ಸ್ಕ್ರೀನ್ಗಳಲ್ಲಿ ಸ್ಪಷ್ಟವಾಗಿರುತ್ತದೆ ಮತ್ತು ಸಣ್ಣ ಗಾತ್ರದಲ್ಲೂ ಓದಲು ಸುಲಭವಾಗಿರುತ್ತದೆ. Ovo ಎಂಬ ಮೀಡಿಯಂ-ಕಾಂಟ್ರಾಸ್ಟ್ ಸೆರಿಫ್ (medium-contrast serif), ಹೆಡರ್ ಮತ್ತು ಪ್ರಮುಖ ಹೆಡ್ಲೈನ್ಗಳಿಗೆ ಬಳಕೆಯಾಗುತ್ತದೆ. ಈ ಜೋಡಿಯು ಪೇಜ್ಗೆ ಒಂದು ಶಾಂತವಾದ ಎಡಿಟೋರಿಯಲ್ ಭಾವನೆಯನ್ನು ನೀಡುತ್ತದೆ. ಇದು ಕೇವಲ ಒಂದು ಥೀಮ್ನಂತೆ ಕಾಣದೆ, ವಿನ್ಯಾಸಗೊಳಿಸಿದಂತೆ ಕಾಣುತ್ತದೆ. ಅತಿ ಮುಖ್ಯವಾಗಿ, ಎರಡೂ ಫಾಂಟ್ಗಳು ಫಾಂಟ್ ಸರ್ವಿಸ್ನಿಂದ ಅಥವಾ ಸೆಲ್ಫ್-ಹೋಸ್ಟೆಡ್ ಫೈಲ್ಗಳಿಂದ ಒಂದೇ ಕರೆಯ ಮೂಲಕ ಲೋಡ್ ಆಗುತ್ತವೆ. ಇದರಿಂದ ಲೇಔಟ್ ಶಿಫ್ಟ್ (layout shift), ಅನ್ಸ್ಟೈಲ್ಡ್ ಪಠ್ಯದ ಫ್ಲ್ಯಾಶ್ ಅಥವಾ ಇನಿಷಿಯಲ್ ರೆಂಡರ್ ನಂತರ ಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಫಾಂಟ್ ಬದಲಾವಣೆಗಳಾಗುವುದಿಲ್ಲ.
ಫ್ಲೋಟಿಂಗ್ ಕ್ಯಾಪ್ಸುಲ್ ಮೆನು
ನ್ಯಾವಿಗೇಷನ್ ಎಂಬುದು ಪೋರ್ಟ್ಫೋಲಿಯೊಗಳು ತಮ್ಮದೇ ತೂಕಕ್ಕೆ ಅಡಗಿ ಬೀಳುವ ಜಾಗ. ಫುಲ್-ಸ್ಕ್ರೀನ್ ಓವರ್ಲೇ ಮೆನುಗಳು, ಸ್ಟ್ಯಾಗರ್ಡ್ ಅನಿಮೇಷನ್ ಸ್ಕ್ರಿಪ್ಟ್ಗಳು ಮತ್ತು ಕ್ಲಾಸ್ ಬದಲಾಯಿಸಲು ನಲವತ್ತು ಸಾಲುಗಳ JavaScript ಬೇಕಾಗುವ ಹ್ಯಾಂಬರ್ಗರ್ ಐಕಾನ್ಗಳು. ಇವೆಲ್ಲವೂ ನನಗೆ ಬೇಡವಾಗಿತ್ತು.
ನಾನು ಒಂದು ಫ್ಲೋಟಿಂಗ್ ಗ್ಲಾಸ್ಮಾರ್ಫಿಕ್ ಕ್ಯಾಪ್ಸುಲ್ ಮೆನುವನ್ನು ನಿರ್ಮಿಸಿದೆ. ಇದು ಒಂದು ಏಕಲಂಬ (single horizontal) ಕಂಟೇನರ್ ಆಗಿದ್ದು, ಅಂಚುಗಳು ದುಂಡಗಿದ್ದು, ವ್ಯೂಪೋರ್ಟ್ನ ಮೇಲ್ಭಾಗದ ಬಳಿ ಫಿಕ್ಸ್ಡ್ ಆಗಿರುತ್ತದೆ. ಗ್ಲಾಸ್ಮಾರ್ಫಿಸಂ ಎಂಬುದು ಸೆಮಿ-ಟ್ರಾನ್ಸ್ಪರೆಂಟ್ ಬ್ಯಾಕ್ಗ್ರೌಂಡ್ ಕಲರ್ ಮತ್ತು backdrop-filter: blur() ಪ್ರಾಪರ್ಟಿ ಇರುವುದರಿಂದ ಬರುತ್ತದೆ. ಇದು ಕಂಟೆಂಟ್ ಅನ್ನು ಮರೆಮಾಚದೆ ಅದರ ಮೇಲೆ ತೇಲುತ್ತದೆ, ಪ್ರತಿಯೊಂದು ಸೆಕ್ಷನ್ಗೆ ತಕ್ಷಣದ ಪ್ರವೇಶವನ್ನು ನೀಡುತ್ತದೆ ಮತ್ತು ಸಂಪೂರ್ಣ ಮರುವಿನ್ಯಾಸವಿಲ್ಲದೆ ಸಣ್ಣ ವ್ಯೂಪೋರ್ಟ್ಗಳಲ್ಲಿ ಸುಲಭವಾಗಿ ಕುಸಿಯುತ್ತದೆ. ಬ್ರೌಸರ್ ಇದನ್ನು ನಿರ್ವಹಿಸುವುದರಿಂದ ಈ ಎಫೆಕ್ಟ್ ಆಧುನಿಕವಾಗಿ ಕಾಣುತ್ತದೆ, ಕ್ಯಾನ್ವಾಸ್ ಲೈಬ್ರರಿಯಲ್ಲಲ್ಲ.