Category: Web Development

Recently, my company switched from Hipchat to Slack for our internal chat system. Unimpressed with the lack of a dark theme, I decided to make my own Slack.

The Result:

See the Pen Vue.js Message App | Chatty by Michael Lewallen (@michael-lewallen) on CodePen.

How it works

The main things I wanted to focus on for this little side project was to be able to add messages to different chats as well as let the user edit their information as well as the background color.

I figured Vue.js would be an easy way to implement a chat-like interface without access to a database to store and retrieve data from (although I plan on hooking up Firebase to the project in the future). So I set up a data structure that stores the users info, chat rooms as well as allowed the user to push their own chats to the chat rooms.

In order to help with getting the main elements styled without having to custom style everything I hooked up Bootstrap 4 to the project. It helps a lot to have helper classes already set up for you to make smaller design changes easier so you don’t have to write extra CSS.

Speaking of CSS and Vue let’s go over the stack I used for the project.

The Stack

To make this thing work I’ve got my main HTML template that Vue refers to on it’s initial load, CSS with Stylus as my pre-processor to help with auto-prefixing for browser support and of course Vue.js to work with the data and binding the user data to the project. I also have Font Awesome in there for the icons.

Overall, I’m pretty happy with the outcome after getting it to work in one (late) night! Let me know what you think of it or if you have your own chat like project!

That’s right, a simple yet elegant and lightweight WordPress slider for FREE. Some DIY required.

No, there isn’t a sketchy download link for a plugin zip folder filled with questionable code. Yes, it really is going to be free – minus some elbow grease on your end – and best of all I’m going to show you how to set it up!

With all that said, I’m going to shed some light on the featured project slider you can find on my home page. Feel free to either use this snippet for your own project or better yet – fork it and make it better!

Let’s Get Started

For this slider/carousel I wanted something like Owl Carousel, but I wanted to build it myself. I also wanted something that was very specific in terms of functionality and super lightweight.

I set up this pen on CodePen to test out a couple ideas and to get the structure up and running. As you can see, it’s super simple, has no user controls and isn’t dynamic.

I’m essentially just making a list of images where each image is stacked on top of each other with a time delayed function cycling through classes to reveal each image.

Making it Dynamic

In order to get the ‘plain jane’ static version to work in my template, I had to create a counter in my main WP Query that would work in conjunction with the jQuery slider.

In the counter if/else statement I was able to to give the first dynamically pulled featured project a class of current starting the jQuery image slider I created earlier. The slider then takes care of looping through the projects pulled in from the WP Query.

Below is the PHP/HTML required in the template file of your choosing to be able to use it:

You can also reconfigure this WP Query to run through any other custom post types you may have set up or just normal posts. Some possibilities: staff slider, car slider, featured post slider, new real estate listings slider, testimonials, etc…

Pretty neat right? ¯\_(ツ)_/¯

Giving it Controls

To be able to loop through the projects that my WP Query pulls in, I used some jQuery CSS trickery to create some navigation arrows allowing you to go through the projects either forwards or backwards.

To do this, I created two global variables: counter and slideArray. The counter for keeping track of clicks on the navigation arrows and slideArray for getting the number of images in the slider.

Then I set up two functions rotateImages() and rotateImagesBack() that are attached to the right and left navigation arrows through a click function to initiate the functions.

Check out the jQuery below:

Making it Look Nice

Now that the HTML, PHP and jQuery are working together to make all of the moving parts orchestrated, it’s time to button up the slider with some CSS.

You can go about styling this however you want:

• traditional image slider
• slider like mine
• testimonials/text slider
• etc

To get the look that I have, copy the CSS below: