Kyle Brumm

Adding a Spotify "Currently Playing" Widget to Your Website

Sun, 15 Nov 2015 00:00:00 +0000

Update: This article is no longer up to date. Please visit the spotifyCurrentlyPlaying.js website to get started.

When I started working on my new site, I was trying to come up with unique features that you don’t really see on other portfolio sites. I thought it would be cool to allow people to see what song I am currently listening to, or at least the song I have listened to most recently. I am a lover of Spotify and listen to basically all my music on it. I did some digging into their API and found that there isn’t a way to get a users most recent song, so I made a workaround, using “scrobbling” and Last.fm.

Getting Set Up

First things first, head on over to Github, download the repo, and add it to your project. Before you can use the plugin, you will need to have Spotify and Last.fm accounts set up, as well as a Last.fm API key. Once you have all that set up, you will need to connect your Last.fm account to your Spotify account. You can do this by opening the desktop application and going to “Preferences”. You will see a section with the heading “LAST.FM”. Enter your username and password to give Spotify access.

Once you have that done, Spotify will be able to “scrobble” the songs you play to Last.fm. The next step is to use Last.fm’s API to get that information. Lucky for you, the plugin handles all that. All you need to do is initialize it. You can do so by using a selector for the container you want the Spotify player to render in.

Something like this will do the trick:

$('.js-current-track').spotify({
    width: '100%',
    height: 400,
    username: 'YOUR_USERNAME',
    api_key: 'YOUR_API_KEY'
});

All you need to do is pass in an options object with your desired width and height (optional), as well as your Last.fm username and API key.

That should do it. You should be able to navigate to the page on your site that has the targeted element and see a Spotify player rendered with your most recent Spotify song.

If you ran into any issues, let me know in the comments!

Hiding the H1 Option in the WordPress Editor

Tue, 29 Sep 2015 00:00:00 +0000

Often when creating a WordPress theme, I will program the page.php template file to display the post title with an <h1> tag. Now I’m not an SEO strategist, but I do know that you are only suppose to have one <h1> tag on a page. Because of this, it makes sense to not allow the end user of the theme to add <h1> tags to their post content.

This little snippet will modify the TinyMCE editor, and remove the “Heading 1” option from the formatting dropdown. This should allow to rest easy, assuming the client doesn’t decide to add the tag manually…

Search and Kill Processes

Mon, 17 Aug 2015 00:00:00 +0000

The other day I was working on getting a Vagrant box set up. I ran into an issue where I couldn’t destroy the box and couldn’t find out why. I ended up needing to kill all the Vagrant processes that were running on my machine.

I learned that it’s not exactly the easiest to search for a process and kill it, so I decided to make a little bash script that would let me search all the processes for a string. This would then return an array of process IDs that I could loop through, and kill, one by one.

Caution: Beware what processes you are killing, you could get undesired results.

My Personal Bash Profile

Wed, 05 Aug 2015 00:00:00 +0000

I don’t know about anyone else, but I love finding and creating new things to put in my .bash_profile.

I like to think that I have a lot of useful things in mine so I figured it would be nice to share it with everyone. I update it every now and then, so you can always check back for an updated version.

The Ultimate WordPress Setup

Fri, 31 Jul 2015 00:00:00 +0000

If you haven't noticed by now, here at Happy Medium, we like to make WordPress sites. The majority of our sites we create are done with WordPress. I don't think I'm alone when I say setting up a new project sucks. There are just so many things you have to remember to do and it seems like a never ending list. When I started at Happy Medium, I remember learning the process of setting up a new website, it was a lot to remember. It's not like it was terrible or anything, it was just a lot for a new employee to learn, as well as being pretty time consuming. If you read my last blog post, you may recall me saying that if I can make something more efficient, I am going to.

THE PROBLEM:

Let me give you an example. I have a task to set up a new WordPress site for "Client X". A typical workflow would look something like:

Create a Git repository (Github / BitBucket)
Setup a staging server
Clone our base WordPress repo
Clone our base plugin and theme
Create a local database
Run the, very simple, prepare script

That's just to name a few, but if you are like us, you have a laundry list of tasks to complete before actually have a new site up and running. For setting things up, we use a tool called wp-deploy. It's a framework for deploying WordPress sites using Capistrano, it's pretty amazing. Along with deployment, it also has WordPress included as a submodule. Now this is all fine and dandy, but it doesn't help a whole lot with the initial setup of a site.

THE SOLUTION:

I have been trying to learn more about bash scripting lately, so I figured this would be a great opportunity to learn a few things and make the team's lives a little easier. I started by breaking the setup process into small chunks and tackling them one by one. I started with the base prepare.sh script and expanded on it. The overall goal of the script was to make it so the user would only have to answer simple prompts and make as few decisions as possible.

CONFIGURATION

The first thing you have to do with a new wp-deploy project, is setup your configuration file. The simplest thing to do was to ask the user to input the project "slug". If we continue with our example, our slug would be "clientx". Once the user inputs the project slug, it's smooth sailing from their.

Note: Before running the script, you will need to add your credentials to the config.cfg file. This is used to keep your personal information in it's own file and separate from the script.

Tasks Completed:

Clone the latest version of WordPress
Update the configuration files with the project slug
Create a local database
Install Ruby dependencies
Set up WordPress locally

BITBUCKET

Here at HM, we like to use Bitbucket for storing our projects. If you don't use version control, you should! For every project we need to create a new repository for storing the code. To make this work, I used BitBuckets API. After running a couple curl requests you will have a new repository with all your deployment keys. Read More on the BitBucket API.

Note: Your deployment keys will need to be added to the deployment.txt file.

Tasks Completed:

Create a BitBucket repository using the project slug
Add your deployment keys to the new repository

SERVERPILOT

We use ServerPilot for managing all our projects and servers. Just like our repository, we need to set up a new staging site. I took the same approach with this, using a couple curl requests got the job done. I found out that when you create a new ServerPilot app, it isn't instantly available to have a database added to it. To fix this I had to do a bit of text parsing in order to get the information I needed. I stored the app creation request in a variable and then parsed it to get the new app ID (used to create the database) and the action ID (used to check when the app was created). After the app was finished being created, I was able to add a database using the previously parsed app ID. Read more on the ServerPilot API.

Tasks Completed:

Create a new ServerPilot application
Create a new database for the application (randomly generated username and password)
Update the database.yml with the database credentials

PLUGINS/THEMES

For most projects, we have our own plugin and theme that we have rolled up to help get things started and create consistency. Along with those we have a few plugins that find their way into almost every project as well. To get these set up, we would have to clone each one of them into their respective directories (plugins or themes). Additionally, our theme comes Grunt ready with a few helpful tasks (Sass compiling, minification, browser syncing, SVG spriting). In order for all these to work properly, we have to install our NPM packages and run our default Grunt task. Simple enough, just a couple commands and we're good to go!

Tasks Completed:

Clone the needed plugins and themes
Update the Gruntfile with our project slug
Install NPM packages
Run the initial Grunt task

MISCELLANEOUS

There is an amazing WordPress tool call WP-CLI and if you haven't heard of it, you should check it out. In short, it gives you a CLI for WordPress. Throughout the script, various tasks are completed using the CLI.

Tasks Completed:

Activate plugins and theme
Create a primary menu (Main Menu)
Create a "Home" page and set it to the front page
Create additional pages (the user is prompted to input a comma separated list of pages)
Create a "Blog" page and set it to the page for posts
Update rewrite structure and timezone

THE RESULT:

Where does this leave us?

We can now set up a new WordPress site with only a few keystrokes! This is amazing news. A task that use to take us anywhere from 15 - 30 minutes, now only takes us around 5 minutes. With all that extra time, you could easily get through another HM blog post!

Where do we go from here?

Obviously this script isn't going to fit into everybody's workflow perfectly, but I'm sure there are pieces that can be extracted and used on their own in a lot of cases. Finding that perfect setup is like finding a unicorn. Although there are always going to be ways to improve, hopefully this will at least help you head in that direction.

TL;DR:

Setting up a new WordPress site takes way too long, and there are too many things to remember to do. This script solves that problem.

What this script will do:

Clone the latest version of WordPress
Update the configuration files with the project slug
Create a local database
Install Ruby dependencies
Set up WordPress locally
Create a BitBucket repository using the project slug
Add your deployment keys to the new repository
Create a new ServerPilot application
Create a new database for the application (randomly generated username and password)
Update the database.yml with the database credentials
Clone the needed plugins and themes
Update the Gruntfile with our project slug
Install NPM packages
Run the initial Grunt task
Activate plugins and theme
Create a primary menu (Main Menu)
Create a "Home" page and set it to the front page
Create additional pages (the user is prompted to input a comma separated list of pages)
Create a "Blog" page and set it to the page for posts
Update rewrite structure and timezone

Think you have a better WordPress setup? Let me know in the comments. I'm always looking for ways to improve the way we do things here.

Feel free to head over to Github and grab the script.

Smooth Scrolling to Elements with JavaScript

Mon, 13 Jul 2015 00:00:00 +0000

I always find myself searching for this little snippet on Google, so I decided it was about time I save it so it’s easier to find from now on.

This will make every anchor tag on your site that has an href="#" scroll smoothly to the desired element.

Using the First Paragraph as an Excerpt

Thu, 09 Jul 2015 00:00:00 +0000

Excerpts aren’t very flexible out of the box with WordPress. That’s why I came up with this nice function for getting the first paragraph of the post content. This makes it so that you don’t have any excerpts that just get randomly cut off in the middle of a sentence.

Cleaning a String in PHP

Mon, 06 Jul 2015 00:00:00 +0000

It’s not uncommon to use a post title as an identifier for some functionality. This function will clean up the supplied string and return a nicely formatted one. In short, it removes any whitespace, replaces spaces with hyphens, removes non-alphanumeric characters, and makes everything lowercase.

6 Web Development Tools to Increase Your Efficiency

Wed, 20 May 2015 00:00:00 +0000

As a web developer, I can't stand doing things inefficiently. There are so many development, design, or just everyday tasks that we do throughout the day, that can be done more efficiently. There's even a chance that the task can be automated to take most of the leg work out out of it. That's why I like web development tools so much. If you're like me, you like getting things done so you can spend more time with friends and family, or just browsing reddit and imgur.

Applications

There is an endless amount of applications out there that will help you be more efficient and productive, in fact, Andrew covered some of these a few months back. Not only are these great for web development, but they can help with everyday tasks as well.

ALFRED - Mac Only

Alfred is an amazing application and you can do any number of things with it. In order to unlock its full potential, you have to purchase the Powerpack. Let me tell you, it is well worth it. Once you have the Powerpack, you can download or even create your own "workflows." Another amazing use is the "spell" command. In fact, I used it 8 times while writing this article! A few of my favorites workflows:

Dev Doctor - Specifically the "caniuse" command which allows you to search caniuse.com. (For when you need to check if something doesn't work in IE)
Colors - Lets you easily convert colors from one format to another. (i.e. Hex to RGB)
Hipsum - Grabs dummy text using the hipsum.co API.
Reddit - Puts the top posts of reddit.com at your fingertips.

Feel free to check out all my personal workflows on Github.

SPECTACLE - Mac Only

Do you ever find yourself struggling to move and organize all your windows? Spectacle can fix that! With Spectacle, you will be able to easily arrange your windows with minimal effort. It's as simple as Command + Option + Right Arrow. Your window is now covering the right half of your screen. BOOM! The shortcuts are easily customizable, and better yet, the project is open source.

FLYCUT - Mac Only

Holy smokes! If you have ever had to enter copy into a website, you know how tedious of a task it can be. Constantly going back and forth between the website and the copy document, copying paragraph by paragraph. That's just silly, don't do that! Flycut basically creates a "clipboard history" for you. This means that you can copy multiple chunks of text, and then paste them one by one with Shift + Command + V. You can even sync your clipboard between computers using Dropbox. Again, Flycut is an open source project

Tools

If you are a web developer, you have probably noticed the plethora of tools that have been sprouting up in the past couple of years. It is amazing to have so many great tools at our disposal, but it can be very difficult deciding what tools are really worth keeping around. I certainly haven't tried them all, but these are a few of my favorite.

Build Tools

If you do a lot of front end development, I'm sure you are familiar with the large number of tedious tasks that constantly need doing when making CSS or JS changes. If you keep up with popular web development tools and trends, there is a high probability that you have heard of one of the many build tools out there, including Grunt, Gulp, and Brunch. Build tools are used to automate tasks, such as compiling Sass, minifying JS files, and compressing images. I have given both Grunt and Gulp a chance at proving themselves. They both have their pros and cons, but since starting at Happy Medium, Grunt has definitely taken the lead after using it on a day-to-day basis. Grunt has a much larger community, which in return, means that more plugins are created for it. If you don't currently use a build tool, I highly suggest giving them all a try and finding out which works best for you; they will completely change your workflow. Build tools with a GUI: CodeKit (Mac) & Prepros (Windows)

BROWSERSYNC

BrowserSync is another great tool for front end development. Again, I'm sure you are familiar with how tedious it can be when working with CSS and JS. For example, you make a change to your stylesheet, save the changes, and then have to go back and refresh your browser window so the changes will appear. There is no need for that - let BrowserSync help you out. A few things you get with BrowserSync:

File syncing - the browser will automatically update when you make changes to your files
Remote Inspection - Inspect a browser on any device, remotely
URL Tunneling - Share your local sites with everyone
Interaction Sync - Any interactions you perform (click, scroll, etc...), are mirrored between your browsers

BrowserSync has a CLI or you can integrate it into your workflow with Grunt or Gulp. If you combine BrowserSync and Grunt a typical workflow might look something like this.

Open the terminal, navigate to your project directory, and run $ grunt bs. This will start the BrowserSync task, which will watch for changes made to your project files.
When you make a change to a Sass file, Grunt will see the change, run that task to compile your Sass files, and then BrowserSync will update your browser accordingly.

WP-CLI

If you are a WordPress developer, WP-CLI is a must have. WP-CLI is, you guessed it, a command line tool for performing WordPress tasks. Commands range from scaffolding a new plugin to flushing the rewrite rules, if it's something you can do in the admin area, it can probably be done with the CLI. If you want to fully harness the power of WP-CLI, you could write a Bash script to help you set up a new project with just a few commands. I've actually been working on my own setup script that you can check it out on Github.

Honorable Mentions

Sass - CSS preprocessor
Bower - A package manager for the web
NPM - Node Package Manager
Homebrew - The missing package manager for OS X
Capistrano - Remote server automation and deployment tool

At the end of the day, it doesn't really matter what you use to help you get the job done. Just remember to always keep improving the way you do things and that it's likely you can change the way you do something each day to be more efficient. Have you heard of all these applications and tools before? What applications and tools do you use that help you be more efficient? Have a workflow you think I could use? I'm always looking for new ways to automate and save time. Leave your comments below!

Sorting Arrays by Key Value

Thu, 09 Apr 2015 00:00:00 +0000

I can’t remember where this came in handy, but I know I needed it at some point. This snippet does exactly what it says, sorts a JavaScript array by the supplied key value.