Vue-cli Webpack-Simple Tutorial

Vue-cli Webpack-simple Tutorial

Vue.js has an optional command line interface for quickly building out the boilerplate for Single Page type Applications. This sounds like fun, and something we should set up right away! The vue-cli tool gives us a “batteries-included” build environment that makes use of all those modern bells and whistles frontend tools you hear so much about today. Setting it up is easy and you’ll be up and running with hot-reload, lint-on-save, and production-ready builds in a snap.…

VueJS Image Upload

VueJS Image Upload

In this tutorial we’ll create a VueJS image upload component so that users can upload an image to use as an avatar in the application. The goal is to re create the mechanism of an image upload via an html form, however it will all be done in a Vue component. This will allow for real time image updating in the browser, in addition to putting the image in storage and setting the avatar image path in the database in one fell swoop.…

jQuery Autocomplete As You Type

jQuery Autocomplete As You Type

This tutorial will add the feature of autocomplete as you type. In the form where a user can enter a reply to a thread, we want the application to automatically start fetching usernames to choose from when you type a string that begins with the @ symbol. There is a jQuery plugin built for this exact purpose called At.js. In addition to autocomplete of usernames, the plugin also offers emoji like characters such as smileys, coffee cups, and more.…

Mentions And Notifications

Mentions And Notifications

Community based websites often times allow you to mention another user by screen name. For example, if you post a message to Twitter and include a user’s name including the @ symbol, then the user will get a notification that you mentioned them. This tutorial will recreate that type of feature in the forum based application we have been building. In the replies area of threads, if a user types in a reply and includes @Tom as an example, then when Tom logs into his account he should see a notification in the upper right navigation bar area to alert him that he has a thread to check out.…

How To Highlight New Content For Returning Visitors

How To Highlight New Content For Returning Visitors

The goal of this lesson will be to set up a mechanism where by we can highlight new content to returning visitors of the website. So for example, consider a user visits the site and reads all of the threads on the front page and then leaves for the day. Later, a different visitor visits the site and adds a new reply to say three different threads.…