Quasar Framework

walfin

I saw this in a PHPStorm ad.

So, cheers, everyone, for those of us who are still using PHP (on shared hosting particularly)!

walfin

According to npm statistics today, bootstrap-vue has 257,360 weekly downloads and Vuetify has 290,901 weekly downloads, while Quasar has 27,944 weekly downloads (about 10%). What is your plan for increasing Quasar’s userbase so we will have a larger community (and thus, likely better community support)?

walfin

Use npm install --save-dev webpack-obfuscator.

Here’s a sample from my quasar.conf.js:

let JavaScriptObfuscator=require('webpack-obfuscator');
...
build:{
...
extendWebpack(cfg,{isServer,isClient}){
if(!ctx.dev&&!ctx.debug){
cfg.plugins.push(new JavaScriptObfuscator({
debugProtection: true,
debugProtectionInterval: true,
rotateStringArray: true,
renameGlobals: true,
stringArrayEncoding: 'rc4',
stringArrayThreshold: 1
}));
...
}
...
}

walfin

Maybe you want to store user in Vuex and do this (perhaps in your root component’s created hook):

this.$router.beforeEach((to,from,next)=>this.$store.state.user?next():next('/auth'));

Alternatively, you can use vue-router abstract mode to prevent the user from manually keying in a hash / path.

walfin

I have deployed my recipe and eatery sharing app for the Ketogenic dieting community today.

Check out https://customautosys.com/products.html?ketoshare if you are interested (even if you’re not on a Ketogenic diet, you can give me tips on my interface design!)

walfin

Fab! I’m in.

walfin

Hi, I would like to share my picture list component that allows dragging of pictures to reorder them. Dependencies are promise-file-reader, downscale and mobile-drag-drop if you want to use it on mobile. Let me know if you find it useful!

<style>
.separator{
	border-radius:5px;
	border:1px black dashed;
}
.pictureList{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}
.picture{
	width:max-content;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
}
#newPicture{
	width:0.1px;
	height:0.1px;
	opacity:0;
	overflow:hidden;
	position:absolute;
	z-index:-1;
}
</style>
<template>
<div>
	<p v-if="this.pictures.length>0">Drag the pictures to rearrange them (hold down on the picture to drag on mobile).</p>
	<div class="pictureList">
		<div ref="divs" v-for="(picture,index) in pictures" class="picture">
			<q-separator vertical class="separator" @dragover="dragOverLeft(index,$event)" @dragenter="dragEnter($event)" @dragleave="dragLeaveLeft(index)" @drop="dropLeft(index,$event)" :style="leftSeparatorVisible[index]?'width:30px':'width:20px;opacity:0'"/>
			<q-avatar draggable="true" rounded :style="dragging===index?'opacity:0.5':''" @dragstart="dragStart(index,$event)" @dragend="dragEnd">
				<img draggable="false" :style="dragging===index?'border:2px grey dashed':''" :src="picture.src"/>
				<q-badge color="primary" floating transparent v-ripple @click="removePicture(index)">
					<q-icon name="far fa-times-circle"/>
				</q-badge>
			</q-avatar>
			<q-separator v-if="lastItem[index]" vertical class="separator" @dragover="dragOverRight(index,$event)" @dragenter="dragEnter($event)" @dragleave="dragLeaveRight(index)" @drop="dropRight(index,$event)" :style="rightSeparatorVisible[index]?'width:30px':'width:20px;opacity:0'"/>
		</div>
		<input type="file" multiple id="newPicture" ref="newPicture" @change="newPictureChanged($event)" accept="image/*"/>
		<q-btn color="primary" glossy push @click="$refs.newPicture.click()">Add Picture</q-btn>
	</div>
</div>
</template>
<script>
import PromiseFileReader from 'promise-file-reader';
import downscale from 'downscale';

export default{
	props:['pictures'],
	data(){
		return{
			dragging:null,
			leftSeparatorVisible:[],
			rightSeparatorVisible:[],
			lastItem:[]
		};
	},
	watch:{
		pictures:{
			deep:true,
			handler(){
				this.leftSeparatorVisible.length=this.pictures.length;
				this.leftSeparatorVisible.fill(false);
				this.rightSeparatorVisible.length=this.pictures.length;
				this.rightSeparatorVisible.fill(false);
				this.computeLastItem();
			}
		}
	},
	methods:{
		computeLastItem(){
			this.lastItem.length=this.pictures.length;
			this.lastItem.fill(false);
			this.lastItem[this.lastItem.length-1]=true;
			if(!this.$refs.divs)return;
			for(let i=0;i<this.lastItem.length-1;++i){
				if(i+1>this.$refs.divs.length)this.lastItem[i]=true;
				else this.lastItem[i]=this.$refs.divs[i+1].getBoundingClientRect().top>this.$refs.divs[i].getBoundingClientRect().top;
			}
		},
		async newPictureChanged(event){
			this.$q.loading.show();
			if(typeof cordova!=='undefined'&&cordova.plugins&&cordova.plugins.permissions){
				await new Promise((resolve,reject)=>{
					function getPermissions(){
						let permissions=cordova.plugins.permissions;
						permissions.requestPermission(permissions.READ_EXTERNAL_STORAGE,async status=>{
							if(!status.hasPermission){
								setTimeout(getPermissions.bind(this),0);
								return;
							}
							this.resolve(status);
						},()=>setTimeout(getPermissions.bind(this),0));
					}
					setTimeout(getPermissions.bind({resolve,reject}),0);
				});
			}
			let promises=[];
			for(let i=0;i<event.target.files.length;++i){
				promises.push(new Promise(resolve=>{
					let newImg=new Image();
					newImg.onload=()=>{
						if(newImg.width<=500||newImg.height<=500){
							this.pictures.push({src:newImg.src});
							resolve(this.pictures[this.pictures.length-1]);
							return;
						}
						downscale(newImg.src,newImg.width>=newImg.height?500:0,newImg.height>=newImg.width?500:0).then(src=>{
							this.pictures.push({src});
							resolve(this.pictures[this.pictures.length-1]);
						}).catch(error=>{
							console.log(error);
							this.$q.notify({message:error,timeout:2000});
							resolve(null);
						});
					};
					PromiseFileReader.readAsDataURL(event.target.files[i]).then(src=>newImg.src=src).catch(error=>{
						console.log(error);
						this.$q.notify({message:error,timeout:2000});
						resolve(null);
					});
				}));
			}
			this.$emit('picturesAdded',(await Promise.all(promises)).filter(picture=>picture!==null));
			this.$q.loading.hide();
		},
		removePicture(index){
			this.$emit('pictureRemoved',this.pictures[index]);
			this.pictures.splice(index,1);
		},
		dragStart(index,event){
			event.dataTransfer.setData('pictureIndex',index);
			this.dragging=index;
			this.$forceUpdate();
		},
		dragEnd(){
			this.dragging=null;
			this.leftSeparatorVisible.fill(false);
			this.rightSeparatorVisible.fill(false);
			this.$forceUpdate();
		},
		dragEnter(event){
			event.preventDefault();
		},
		dragOverLeft(index,event){
			if(this.dragging===null)return;
			event.preventDefault();
			this.leftSeparatorVisible[index]=true;
			this.$forceUpdate();
		},
		dragOverRight(index,event){
			if(this.dragging===null)return;
			event.preventDefault();
			this.rightSeparatorVisible[index]=true;
			this.$forceUpdate();
		},
		dragLeaveLeft(index){
			this.leftSeparatorVisible[index]=false;
			this.$forceUpdate();
		},
		dragLeaveRight(index){
			this.rightSeparatorVisible[index]=false;
			this.$forceUpdate();
		},
		dropLeft(index,event){
			this.leftSeparatorVisible.fill(false);
			this.rightSeparatorVisible.fill(false);
			if(index===this.dragging){
				this.dragging=null;
				return;
			}
			this.pictures.splice(index,0,this.pictures[this.dragging]);
			this.pictures.splice(this.dragging+(this.dragging>index?1:0),1);
			this.dragging=null;
		},
		dropRight(index,event){
			this.leftSeparatorVisible.fill(false);
			this.rightSeparatorVisible.fill(false);
			if(index===this.dragging){
				this.dragging=null;
				return;
			}
			this.pictures.splice(index+1,0,this.pictures[this.dragging]);
			this.pictures.splice(this.dragging+(this.dragging>index?1:0),1);
			this.dragging=null;
		}
	},
	mounted(){
		if(!Array.isArray(this.pictures))this.pictures=[];
		this.leftSeparatorVisible=new Array(this.pictures.length);
		this.leftSeparatorVisible.fill(false);
		this.rightSeparatorVisible=new Array(this.pictures.length);
		this.rightSeparatorVisible.fill(false);
		this.computeLastItem();
		window.removeEventListener('resize',this.computeLastItem);
		window.addEventListener('resize',this.computeLastItem);
	}
};
</script>

mobileDragDrop.js (boot script)

import {polyfill} from 'mobile-drag-drop';
import {scrollBehaviourDragImageTranslateOverride} from "mobile-drag-drop/scroll-behaviour";

polyfill({dragImageTranslateOverride:scrollBehaviourDragImageTranslateOverride});

walfin

@Ben-Hayat So, this has gotten me to work. I decided to rebuild my company website using Quasar, with directus (https://directus.io) as the backend (it has quite a full featured API, including a JavaScript SDK which I used, and has authentication built-in).

Let me know your feedback on the UI:
https://customautosys.com/new (new Quasar UI)
https://customautosys.com (old UI)

@qyloxe said in Would you use Vue + Quasar to build a Marketing site?:

@stefanvh said in Would you use Vue + Quasar to build a Marketing site?:

@Ben-Hayat I don’t want to hijack your topic so let me know if I have to move this discussion somewhere else.

I’m also feeling uncomfortable here…

So, for example simple blog functionality. There needs to be a way to authenticate the user with an username and password. The authentication returns an authorization token. With the authorization token the user should be able to create a blog post (e.g. POST /posts). Unauthenticated people should be able to retrieve this post (e.g. GET /posts or /posts/1). This post is prefetched in Quasar and then displayed in a QCard for example. JSON-API covers creating and fetching resources (the posts), but authentication and even authorization can be performed in a billion different ways. Personally I am using PASETO tokens and /login and /register routes with simply {username, password} as payload with the appropriate HTTP status codes as response. But there are a lot of other ways (http://www.passportjs.org/packages/).

anyway, this scheme could be vulnerable to CSRF family of attacks. You need secure, same-site etc. cookie. Every other client side token, visible to JS is a potential vector of attack. If it is a blog for cats stories I wouldnt worry of course, but if it is a blog for bank official statements - this is another story. Do you know who your target is?
Well, the words are cheap and misleading. We, as developers has a opportunity and privilege to talk precisely and exactly about topic - we can use the language of code. So, please just create a repo on github, put your words into action and just create a skeleton, template, base of your thoughts in material (as in computers haha) form. It is much easier to discuss code in specific context than just dream about any possible or maybe possible context. At the end of the day, you will need to make a technical decision.

Authentication is a problem that has been solved by many other companies. Don’t reinvent the wheel. There are solutions like Auth0 & Okta, just to name 2 of the most common ones. Using a tried-and-tested authentication provider is probably more secure and less susceptible to CSRF than anything a solo dev could churn out.

walfin

What is your opinion on Weex and NativeScript? Do you think Quasar would support native development one day, and if so, which native toolkit might you be most inclined to support?

walfin

@dobbel I used the latest EAP for IntelliJ Ultimate (why limit myself to PHPStorm when I can have everything for free :P)

I added chrome debug extension (all I needed to do was right click the icon and click Inspect in IDEA with IDEA running, and my breakpoints worked) and also xdebug helper (all I needed to do was left click on the icon and click Debug, then click Run->Start Listening for PHP Debug connections - it auto-detected the corresponding file in my project which was symlinked into my localhost Apache www root when it hit the breakpoint). I’m not sure about node.js server side debugging though (my APIs are developed in PHP as I use shared hosting). I’ll probably try debugging electron next. Cordova debugging in IDEA doesn’t seem possible yet, though (hope someone will come up with a guide for that).

Best posts made by walfin