Creating a Web Component with frameworks such as Angular and Vue may look ordinary. But how about Vanilla JavaScript?
In my previous Medium article, I explain what a web component is and how to create a web component with a JavaScript framework, namely Vue.js. Before continuing to read this article, you can read my following article first to understand the understanding of web components and also the case study.
If you have read the article above, you already know now how to create a web component with Vue.js. But how about Vanilla JavaScript? 🤔
Creating a Web Component
Let’s start creating a web component with Vanilla JavaScript.
Firstly, we create a JavaScript file called v-card.js. Then type the syntax below:
Note: You…
Bingung mau deploy Aplikasi Angular yang bagus dan gratis itu dimana? Di Netlify saja!
Punya aplikasi Angular tetapi hanya berjalan di local saja? Ingin rasanya aplikasi kalian dilihat oleh banyak orang? Tetapi bagaimana caranya, ya? Tenang saja, kalian dapat melakukan deploy aplikasi Angular kalian ke Netlify! Mari kita bahas bersama-sama.
Apa Itu Deploy?
Apakah kamu pernah mendengar istilah deploy? Deploy atau deployment adalah kegiatan yang bertujuan untuk menyebarkan aplikasi yang sudah dibuat oleh developer. Jadi, kita sebagai user dapat menggunakan aplikasi tersebut.
Nah, untuk penyebarannya sendiri ada bermacam-macam cara tergantung dari aplikasi yang sudah dibuat. Karena Angular adalah aplikasi web, maka kita perlu deploy aplikasi Angular yang sudah dibuat ke Web Hosting.
Creating web component is complicated? Let’s make it easier by using Vue.js
Web Component? What is that?
Have you ever heard of web component? What is a web component? Here is an explanation that I got through Google search:
Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML. — webcomponent.org
Is it clear enough? If not, let’s see some examples.
Case Study
Imagine we have Web App A with the following…
Forget about writing HTML for old email and let’s welcome new ways to write HTML for email
Have you ever made an appearance for a web page using HTML? Do you remember how to make that look? Maybe for simplicity, you will make it like the code below.
Looks easy right? To make Hello World in the middle, all you have to do is add the style = “text-align: center” code. I am sure, if the code increases, you are still able to overcome it. But, have you guys ever made HTML for email? Here is a simple example.
The two code examples above have the same goal, which is to display the Hello World…
