It’s fun to use Vue 3 without NodeJS, CLI, NPM, or Webpack! Simple and Easy! Let’s see what needs to be done to use vue-simple-calendar (https://github.com/richardtallent/vue-simple-calendar) Add the following reference to index.html: (download from https://unpkg.com/vue-simple-calendar@6.0.0-b3/static/css/) <link rel=”stylesheet” href=”assets/css/style.css” /> <link rel=”stylesheet” href=”assets/css/default.css” /> <link rel=”stylesheet” href=”assets/css/holidays-us.css” /> <script src=”https://unpkg.com/vue-simple-calendar@6.0.0-b3/dist/vue-simple-calendar.umd.js” ></script> Add the references to your component as shown below: const Home = { components: { “calendar-view”: window.CalendarView.CalendarView, “calendar-view-header”: window.CalendarView.CalendarViewHeader }, setup() { const showDate = ref(new Date(‘3/15/2021’)); const setShowDate = (d) => { console.log(“Called!! “, d) showDate.value = d; } return { name: “Hi Agami”, showDate, setShowDate }; }, template: html` <div> <h1>{{ name }}</h1> <calendar-view :show-date=”showDate” class=”theme-default holiday-us-traditional holiday-us-official”> <template #header=”{ headerProps }”> <calendar-view-header :header-props=”headerProps” @input=”setShowDate” /> </template> </calendar-view> </div> <h2>Ends Here</h2> `, }; export default Home; That’s …
Javascript
What is PWA ?
PWA stands for Progressive Web Application. PWA is basically a website that runs on your mobile browser. But when you see the UI, it is similar to any app. Normally, when you want to create an app, you have to develop apps for different platforms. Like making apps for the IOS platform and putting them in the app store Or make an app for Android and put it on google play, Similarly, make an app for windows then put it …
Barebone Automated Testing
Minimalism in automated testing can be attained by following KISS (Keep it Simple Stupid) Most of the times, in the process of making the code and application testable, the code written for testing is dependent on very heavy libraries, don’t get me wrong, these are good libraries however every aspect of it is not needed and introducing it in the code results in slowing the process considerably. So how do we make our testing efficient? Test the server-side API/routes using …
Cool JavaScript Framework – Alpine.js
Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. This tool’s syntax is almost entirely borrowed from Vue (and by extension Angular). Alpine roots from server-rendered-app background. Alpine fills a hole in between Vanilla JS/JQuery and large frameworks like Vue/React. The complexity/overhead of Vue/React etc. doesn’t justify its value in a lot of cases. A number of times we just need to add bindings and simple interactions to server-rendered …
{ REST : API }
Let us suppose we have a server that is hosting the information about the student. If a client, say a web/android app needs the information regarding the student, then the client must request the server for the resource and the server should send back the response to the client. API is the acronym for Application Programming Interface which allows clients and servers to talk to each other. Key Elements Request URL/Endpoint: Request URL is the address of the resource where …
jQuery is awesome!
So many frameworks around, giving the developers a way to organize and write code with greater precision. All of these frameworks help the programmer write components, interaction with other components, updating virtual DOM, create Single Page Applications and of course manage state, In fact there are many libraries around state management itself. Appear so glamorous isn’t it? However it keeps on adding complexity as components, managing dependencies, it gets messier when one of the modules which has dependency on other …