Image for post
Image for post

In this post we are going to create small example for a notification service and how we might use a Proxy to create an interesting API for triggering messages in your application. If you haven’t had a chance to work with javascript’s Proxy object yet, I recommend you check it out! It acts as a trap for calls to another object, allowing you to decide how it handles access to the that object. Very cool!

The scope of the example below is very small, but if you want to see a real implementation, you can view this repository I just created that shows a real tool I built for one of my Vue applications. …


If you’ve ever used vh units to size a layout element and previewed that layout in a mobile browser, you’ll quickly find a fun little quirk that’s quite annoying.

Image for post
Image for post

As soon as the user starts to scroll, the navigation bar is removed and the height of the viewport is now larger than it once was, and that means all of your elements sized with vh are now adjusting to this new reality. Fun, right?

I often use the vh unit when designing the first element on a mobile page to either be full screen, or slightly less than full screen so the next section is peaking above the fold. Rather than giving up on the vh unit for this goal, I came up with a Vue Directive solution to lock in the height of an element. …


After working on several large Vue projects, one thing that started to annoy me was the need to import common sass variables and mixins on every component:

Image for post
Image for post

I thought to myself: there has to be a better way! I wanted to remove the need for relative imports and also auto-import my global sass tools into every Vue component. After a little research, I found the solution!

Let’s assume a default Vue project using the webpack template, with a similar file structure:

Image for post
Image for post

The mixins.scss and variables.scss should be self explanatory: that’s where you define those respective sass variables.

Inside of globals.scss you would aggregate all of your globals. In this instance, we would import our mixins and…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store