Technical background of wait/delay/sleep Programmers who have been coding in PHP or C# can look in JavaScript for functions like wait or sleep or delay. Functions like that just freeze running application in certain place for a given time and, next, continue code execution from that place. But in JavaScript there are no built-in methods…
Category: tips front-end
Popover on hover in VueJS
Hi! I will create in this short tutorial a popover (sometimes named as tooltip) component in VueJS. I didn’t use in my example any third-party library, like Bootstrap or Vue Bootstrap. This is a pure tooltip/popover component in VueJS just with JavaScript usage. Why it is better to create your own popover in VueJS than…
VueJS background image URL
Using CSS image as background in HTML element is quite obvious situation. You can do that for example as text background, for slides in carousel (slider), for articles in its listing and in many many cases. In many cases you will have one single component which must display correct data with correct background image. Than…
Iframe and parent window postMessage communication
Quite common situation is that we place part of the content of our site in IFRAME tag which is linked with another page, typically, in the same domain as our main page. This is a very common idea when we are building a bigger application which is build of micro-front-ends (micro-front-end is an architecture pattern…
Vue Router for application hosted on static server
I will show in this article how to start using Vue Router in Vue CLI project with very basic settings which will allow to host your application on normal static server (like Apache on e.g. GoDaddy). What we want to achieve here is the following scenario: We have our VueJS application created in Vue CLI…
Vue CLI: modify webpack configuration
When using Vue CLI sometimes we must change how it is working in background. I mean what are the bundling rules, how server works etc. We must know that Vue CLI uses in background the Webpack with quite sophisticated settings. But we can use dive into that and change whatever we want. Create new empty…
Webpack configuration with TypeScript
I will show in this article, step by step, how to configure Webpack to work with TypeScript for front-end application. Webpack is a tool which allows us to code JavaScript or TypeScript front-end applications and divide our code on modules, separated files with view (html), logic (js) and styles (css), and gather all files into…
FIREBASE: integrate ADMIN SDK with NodeJS back-end API
In our first article about Firebase here I described how to create Firebase account, how to add it to our project and how to deploy whole project on Firebase hosting. In my second article about Firebase I described how to integrate Firebase user authentication service. So – two previous articles are about integration or Front-end…
FIREBASE: AUTHENTICATION IN WEB APP
In our previous article about Firebase here we described how to create Firebase account, how to add it to our project and how to deploy whole project on Firebase hosting. We added here to our project Firebase user authentication service in web application. And here we will continue that – we will integrate Firebase authentication…
FIREBASE: Add Firebase to your JavaScrpt project + Firebase CLI installation + Firebase hosting deploy
I will focus in this article on important part of work when you, as front-end developer, want to make in your own project users authentication, add based on that, give them access to your back-end API in Node.js. But as you are front-end developer, you are not a specialist in security of back-end applications and…
VueJS – loading spinner component
Loaders or spinners are popular way to fill empty container while its content is loading asynchronously. We use it – typically – when some content is loading, by using ajax request or something is processing in the background. We can use loading spinner in VueJS as a separate component in very nice and clean manner…
Send data between SalesForce and JavaScript Vue/React/Angular app in Aura component
I described in this article HERE how to embed your own custom JavaScript app (in my case VueJS app) inside SalesForce page with Aura Component. I mean by “JavaScript” app, the application coded in VueJS, ReactJS, Angular or in pure JavaScript. I will continue here article mentioned earlier. Embedding you custom front-end gives really huge…