Best posts made by walfin

I saw this in a PHPStorm ad.

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

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)?

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
}));
...
}
...
}

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.

Fab! I’m in.

@Hawkeye64 I was wondering if there was a way to start loading the images immediately after first paint (in the background). Currently the first opening of my menu sidebar is lagging as it only starts loading the images when the menu is opened. I’m currently resorting to using img instead of q-img and putting in invisible imgs elsewhere on the page to force the images to load.

Get well soon Razvan!

@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.

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!)

@dobbel In app.styl:

.screenwide
	max-width 100% !important

.screenwide .q-table
	max-width 100% !important

.screenwide td
	white-space normal !important
	word-wrap normal !important
	hyphens manual

.screenwide th
	text-align center !important

In the relevant template:

<q-table :data="recipients" :columns="columns" :rows-per-page-options="[0]" selection="multiple" :selected.sync="selected" table-class="screenwide" dense>

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?

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});

Found the answer, it needs to be installed using --save instead of --save-dev

@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).

@daveshirman

• Page transition animations
  Comes out of the box in Quasar, not sure about Ionic
• Easy of customising CSS
  In Quasar you have SASS, SCSS and Stylus variables.
• Ease of making a production build on iOS and Android
  I’ve only ever done Android. It works seamlessly.
• Compatibility with Cordova/Capacitor
  Fully compatible but I think for Capacitor Ionic may have an edge since they wrote Capacitor after all.
• General feel of the app Vs native
  Perfect for Android (material design), but Quasar got rid of its iOS mode so you have to configure the UI elements manually. I hope they bring it back.
• Job opportunities
  Here’s where we lose out, I guess. But we have the jobs board on this forum and the jobs channel on Discord.
• Tooling stability
  There was a major shift from CLI v1 to v2 which resulted in many changes having to be made and there’s no automated migration tool (yet). However, if you’re starting out fresh you’ll start with CLI v2.
• Real apps I can check out.
  Check out my apps at https://customautosys.com/covidgame and https://customautosys.com/ketoshare.

Hi @Seanitzel!

Never thought I’d see the day when Vue and React can join forces

https://blog.logrocket.com/vue-composition-api-in-react-functional-components

I wonder if anyone will create a Reactivuegular next (then again, Angular is no longer very popular nowadays).