{"id":1409,"date":"2024-12-02T07:22:00","date_gmt":"2024-12-02T00:22:00","guid":{"rendered":"https:\/\/focusnic.com\/blog\/?p=1409"},"modified":"2024-12-19T15:59:28","modified_gmt":"2024-12-19T08:59:28","slug":"frontend-wajah-website","status":"publish","type":"post","link":"https:\/\/focusnic.com\/blog\/frontend-wajah-website\/","title":{"rendered":"Frontend: Wajah Website"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/focusnic.com\/blog\/frontend-wajah-website\/#Pengenalan\" >Pengenalan<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/focusnic.com\/blog\/frontend-wajah-website\/#Komponen_Dasar_Frontend\" >Komponen Dasar Frontend<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/focusnic.com\/blog\/frontend-wajah-website\/#Modern_Frontend_Frameworks\" >Modern Frontend Frameworks<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/focusnic.com\/blog\/frontend-wajah-website\/#Reactjs\" >React.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/focusnic.com\/blog\/frontend-wajah-website\/#Vuejs\" >Vue.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/focusnic.com\/blog\/frontend-wajah-website\/#Angular\" >Angular<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/focusnic.com\/blog\/frontend-wajah-website\/#Responsive_Design_Principles\" >Responsive Design Principles<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/focusnic.com\/blog\/frontend-wajah-website\/#Mobile\" >Mobile<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/focusnic.com\/blog\/frontend-wajah-website\/#Fluid_Layouts\" >Fluid Layouts<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/focusnic.com\/blog\/frontend-wajah-website\/#Frontend_Security\" >Frontend Security<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/focusnic.com\/blog\/frontend-wajah-website\/#Kesimpulan\" >Kesimpulan<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Pengenalan\"><\/span>Pengenalan<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Frontend development<\/strong> merupakan aspek krusial dalam pembangunan website modern yang berfokus pada pengalaman pengguna. Sebagai &#8220;wajah&#8221; sebuah website, frontend bertanggung jawab untuk menciptakan antarmuka yang menarik, responsif, dan fungsional.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Komponen_Dasar_Frontend\"><\/span><strong>Komponen Dasar Frontend<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Tiga pilar utama frontend development:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>HTML (Hypertext Markup Language)<\/strong>\n<ul class=\"wp-block-list\">\n<li>Struktur konten<\/li>\n\n\n\n<li>Semantic markup<\/li>\n\n\n\n<li>Aksesibilitas<\/li>\n\n\n\n<li>SEO-friendly markup<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>CSS (Cascading Style Sheets)<\/strong>\n<ul class=\"wp-block-list\">\n<li>Visual styling<\/li>\n\n\n\n<li>Layout management<\/li>\n\n\n\n<li>Responsive design<\/li>\n\n\n\n<li>Animasi dan transisi<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>JavaScript<\/strong>\n<ul class=\"wp-block-list\">\n<li>Interaktivitas<\/li>\n\n\n\n<li>DOM manipulation<\/li>\n\n\n\n<li>Event handling<\/li>\n\n\n\n<li>Asynchronous operations<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Modern_Frontend_Frameworks\"><\/span><strong>Modern Frontend Frameworks<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Reactjs\"><\/span><strong>React.js<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Keunggulan React meliputi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Virtual DOM<\/li>\n\n\n\n<li>Component-based architecture<\/li>\n\n\n\n<li>JSX syntax<\/li>\n\n\n\n<li>Extensive ecosystem<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Vuejs\"><\/span><strong>Vue.js<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Fitur utama Vue:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Progressive framework<\/li>\n\n\n\n<li>Two-way binding<\/li>\n\n\n\n<li>Template syntax<\/li>\n\n\n\n<li>Lightweight architecture<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Angular\"><\/span><strong>Angular<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Karakteristik Angular:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Full-featured framework<\/li>\n\n\n\n<li>TypeScript integration<\/li>\n\n\n\n<li>Dependency injection<\/li>\n\n\n\n<li>RxJS integration<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Responsive_Design_Principles\"><\/span><strong>Responsive Design Principles<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Mobile\"><\/span><strong>Mobile<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Implementasi mobile-first:<\/p>\n\n\n\n<p>1. Viewport Configuration<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:php decode:true \" >&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<\/pre><\/div>\n\n\n\n<p>2. Media Queries<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:css decode:true \" >@media screen and (min-width: 768px) {\n  \/* Tablet styles *\/\n}<\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Fluid_Layouts\"><\/span><strong>Fluid Layouts<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Teknik layout modern:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Flexbox<\/strong>\n<ul class=\"wp-block-list\">\n<li>Main axis alignment<\/li>\n\n\n\n<li>Cross axis alignment<\/li>\n\n\n\n<li>Flex container properties<\/li>\n\n\n\n<li>Flex item properties<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>CSS Grid<\/strong>\n<ul class=\"wp-block-list\">\n<li>Grid template areas<\/li>\n\n\n\n<li>Grid gap<\/li>\n\n\n\n<li>Auto-fit\/auto-fill<\/li>\n\n\n\n<li>Minmax function<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Frontend_Security\"><\/span><strong>Frontend Security<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Keamanan frontend:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>XSS Prevention<\/strong>\n<ul class=\"wp-block-list\">\n<li>Input sanitization<\/li>\n\n\n\n<li>Content Security Policy<\/li>\n\n\n\n<li>HttpOnly cookies<\/li>\n\n\n\n<li>Escape user input<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>CSRF Protection<\/strong>\n<ul class=\"wp-block-list\">\n<li>Anti-CSRF tokens<\/li>\n\n\n\n<li>SameSite cookies<\/li>\n\n\n\n<li>Origin validation<\/li>\n\n\n\n<li>Secure headers<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Kesimpulan\"><\/span><strong>Kesimpulan<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Frontend development merupakan aspek dinamis yang terus berkembang dalam ekosistem web modern. Sebagai wajah sebuah website, frontend tidak hanya tentang estetika visual, tetapi juga mencakup aspek performa, aksesibilitas, keamanan, dan pengalaman pengguna yang optimal. Dengan memahami dan mengimplementasikan praktik-praktik terbaik dalam frontend development, pengembang dapat menciptakan antarmuka web yang tidak hanya menarik secara visual, tetapi juga fungsional, aman, dan inklusif.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pengenalan Frontend development merupakan aspek krusial dalam pembangunan website modern yang berfokus pada pengalaman pengguna. Sebagai &#8220;wajah&#8221; sebuah website, frontend bertanggung jawab untuk menciptakan antarmuka yang menarik, responsif, dan fungsional. Komponen Dasar Frontend Tiga pilar utama frontend development: Modern Frontend Frameworks React.js Keunggulan React meliputi: Vue.js Fitur utama Vue: Angular Karakteristik Angular: Responsive Design Principles [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1411,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[45],"class_list":{"0":"post-1409","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-informasi","8":"tag-website"},"_links":{"self":[{"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/posts\/1409","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/comments?post=1409"}],"version-history":[{"count":2,"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/posts\/1409\/revisions"}],"predecessor-version":[{"id":1412,"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/posts\/1409\/revisions\/1412"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/media\/1411"}],"wp:attachment":[{"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/media?parent=1409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/categories?post=1409"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/tags?post=1409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}