👉🏻 Fotis demonstrates that using Vue with TypeScript brings many benefits.
👉🏻 With features like typed props, emits, slots, state management, and generics, it noticeably improves the readability of a codebase and ensures everything works as expected.
👉🏻 "In short words, we will be sending a request under the hood for the next resources so that when user clicks the load more button, they will instantly see the result."
Eager delay spinners are not a good user experience as they can make a snappy user interface feel slower. We can provide a better user experience (UX) by delaying spinners to appear only after a perceivable delay.
To achieve this improved UX, you can use AsyncComponent. Vue provides the defineAsyncComponentdefineAsyncComponent function to lazy load components:
1<template>2 <AsyncComp />3</template>45<script setup>6import { defineAsyncComponent } from 'vue'78const AsyncComp = defineAsyncComponent(() => {9 return new Promise((resolve, reject) => {10 // ...load component from server11 resolve(/* loaded component */)12 })13})14</script>
defineAsyncComponentdefineAsyncComponent accepts a loader function that returns a Promise. The resolveresolve callback should be called if the component has been loaded, and the rejectreject callback to indicate that loading the component has failed.
Now let's implement the delayed loading spinner by using the advanced options of the defineAsyncComponentdefineAsyncComponent function:
1<template>2 <AsyncComp />3</template>45<script>6import { defineAsyncComponent } from 'vue'7import Loading from './components/Loading'89export default {10 components: {11 AsyncComp: defineAsyncComponent({12 // the loader function13 loader: () =>14 new Promise((resolve) => {15 setTimeout(() => {16 resolve(import('./components/HelloWorld.vue'))17 }, 2000)18 }),1920 // A component to use while the async component is loading21 loadingComponent: Loading,22 // Delay before showing the loading component. Default: 200ms.23 delay: 500,24 }),25 },26 data() {},27}28</script>
This demo simulates a network request to fetch HelloWorld.vueHelloWorld.vue from a server which takes 2 seconds:
👉🏻 Ever wondered why cookies are not passed correctly to subrequests - e.g. during SSR or when using Nitro/H3?
👉🏻 Alexander takes a look at how to pass all the important information, including event context and headers to further calls, eliminating different behavior on server and client.
Dynamic Parameters in Oracle APEX REST Data Source Synchronizations Jul 25, 2024 · 6 min read Introduction In this post, I will describe how to dynamically pass parameters to Oracle APEX Rest Data Source Synchronizations. APEX REST Source Synchronizations allow you to declaratively Sync data from an REST API to a local table. Please read this post for more on why you may want to do that. This works well if you want to synchronize small to medium-sized data sets. The challenge comes when you want to sync larger data sets. For example, you would not want to Synchronize 1 million records over a REST API hourly. We need a way to run our Sync every hour but only pick up records that have changed in the last hour. Oh, and by the way, we want to do this declaratively! APEX REST Source Synchronization Steps to the Rescue. Use Case We have been tasked with Synchronizing Time Entries from the Harvest Time Entry SaaS Application to a local Oracle DB table for use in an APEX Appl...
评论
发表评论