How Classical Music Helps Me Code Better

I recently had a rockin’ coding stint where I was completely “in the zone” and coding up a storm in a way I haven’t done in some time.

Don’t get me wrong, I code a lot on the regular (work and open source projects, etc.) but doing so while completely focused with no distractions of any kind… this doesn’t happen very often anymore and I have to say, it was glorious.

During this code run I was able to get so much more done because I could just focus on the task at hand and as a result, the code I produced was better, requiring much less tweaking and/or rewriting.

That’s awesome but how did you do it?

Great question. The secret (for me and maybe you) turns out to be dramatic classical music. I’m talking DRAMATIC classical music such as the battle soundtracks out of Lord of the Rings (these tracks are especially effective for me).

When I code while listening to this type of music, the code just seems to flow out of me because I’m suddenly coding with a higher purpose amidst an epic backdrop of danger and adventure. I can’t help but focus on the code and nothing else cuz the music makes it seems as if my life now depends on it. Ok it may be not be that dramatic but it’s still a pretty awesome feeling. Amazing how music can affect us so.

It sounds kooky, I know, but try it before you knock it.

Am I crazy? I might be, but you can’t say anything about it until you’ve tried it. Who knows? It may just suprise you how much you get done with the drums of Mordor’s army pounding in the background.

If you would like to try it out I’ve got a playlist ready to go with epic classical battle music on Spotify: Battle – Classical. Definitely build your own playlist of your preferred music but for those who want a quick taste, this playlist is a good place to start.

Happy coding. ūü§ď

When you debug, don’t forget to check your data

Oh the time I could have saved if I had just thought to check my data.

During my last coding stint on the PhpD3Lib project, I ran into a ridiculously frustrating bug that made a single bar in the dual bar graph taller than the max number on the left axis of the graph. What gives?!

Some context:

For this dual axis bar graph update, I had to re-write the original graph generating code to use v4 of D3.js (instead of v3). Naturally, when the bar height issue showed up after these changes, I was pretty sure the new code was the culprit. I literally spent hours going over my code line by line and re-writing it again and again.

The code was fine, the data had the bug.

Then lo and behold, I discovered (by complete accident btw) that the bug was actually being caused by a format issue in the .tsv data file the example was using. I hadn’t even thought to check if the data was coming through as expected.

Check your data!

So, to wrap up, save yourself some time and verify that your data is coming through correctly before doing a bunch of recoding to fix a bug. ūüėČūüĎć

Php-d3-lib Development Update v1

It has been some time since I provided any kind of anything for my open source php-d3-lib project so I wanted to take some time to update you on where it is at today and where I would like it to go in the future.

My original vision for the php-d3-lib project was to provide an easy to use PHP class for generating d3.js charts and graphs.  This vision still stands and I aim to add more chart and graph types as well as more complex implementations of existing chart types in v1.

Going forward, I’ll focus my development efforts on bringing additional chart and graph functionality into the class, cleaning up the core functionality and making it easier to both extend the class and implement new features in it.

Unfortunately, development so far has been very slow due to my work / family schedule but I am hoping to be able to dedicate more time to this project in the coming months.  I really think this project has some use because as a PHP dev who loves what d3.js can do for charting and graphing, it just makes sense to have a PHP class to handle all the d3.js heavy lifting.  Just feed it data, tell it what type of graph you want and boom, the graph is generated and ready to go.  This kind of rapid development and deployment of graphs and charts is my goal for this project.

If you would like to participate in the php-d3-lib project, you can find it on Github.  Feel free to fork it or submit changes / updates via pull request.  The current dev branch is v1.  This project is still pretty early stage but as it grows, it will hopefully provide greater and greater use to PHP devs.  If you would like to see it in action, I have examples of a simple bar chart and simple pie chart.

Thank you for your time.  Please feel free to leave a comment or share it and help spread the word about this project.

Vide: Full Size Background Video made “Easy as hell” – no joke

No seriously. ¬†Implementing background video for containers (including “body”) is made¬†“easy as hell” (just as described) with the Vide jquery plugin.

The code repo and instructions are located on GitHub but I am going to go through a little tutorial for you anyways, just cuz I want to.

Oh, let me get this out of the way really quick: I did not write this script and I am not guaranteeing anything from it in anyway whatsoever. ¬†I am big fan of the script and it worked very well for me so I wrote this up to help others discover it’s awesomeness as well.

**For cross browser implementation and best results be sure to have your video in several forms such as “.mp4”, “.webm” within your “videos” folder. ¬†Name all of your different video files and your poster (if you have one) in your video folder with the same name i.e. video.mp4, video.webm, video.jpg, etc. so they all get picked up¬†easily by the script.**

** This is a jQuery plugin so be sure to have jQuery loaded prior to loading this script**

Here are the steps to use it:

1. Download the jquery.vide.js file from GitHub or via Bower:

bower install vide

2. Include the .js file in your header:

<script type="text/javascript" src="path/to/js/jquery.vide.js?ver=4.7.1"></script>

3. Include the div with the vide data tag containing the url to your video file name (in this the video filename¬†is “cogs” and it is located in my video directory):

<div class="big_video_box" data-vide-bg="path/to/video/cogs" ></div>

4. Style your video div (in this case “div.big_video_box”) as needed.

5. Add content to your video div to have the content appear in front of the video.

That’s it. ¬†Easy as hell… no doubt about it.

To learn more about this sweet script you can visit VodkaBears github page (at this point, the script is no longer being maintained so if you want to do something about that, make a PR and go at it).

In the meantime, feel free to give it try and let me know what your experience with it was in the comments.

Have a great day and thanks for reading.

 

Desk.com : Creating a Multi-Tiered Support Portal in a Single Tiered System

When I first got approached about this Desk.com project (and I was shown the desired designs and outcomes), the first thing I did was research whether Desk.com allows for a multi-tiered support portal which supports sub-categories.  This way we could have  Feature Categories within Product Categories and make everyones lives easier, both development wise and for the user.  This was a big part of the design for the portal and a big help for visitors since products could have specific features in need of support too.

You can imagine my shock when I learned that you can’t do this type of thing within their system without a mass amount of¬†hoop jumping (you can read about it here). ¬†Even then, it doesn’t really work the way we wanted it to. ¬†And all we wanted a way to have sub-categories for our articles for easier grouping overall. ¬†Alas, this was not to be. ¬†At least not in their available setup. ¬†Enter the workaround…

So even though they don’t support sub-categories, their template system does support conditional statements and quite a few different things you can put in them such as:

If visitor is on Category A page show this.  If visitor is on Category B page, show that.

Based on the above simple premise, you can now show different content based on whatever the category is, including direct links to which ever “sub”-categories you want, as long as you know the name of the category. ¬†Thus, in the backend, you can setup a bunch of “Sub Categories” (in quotes because they would be regular categories to the system) for Category A and then in the front end, using the above conditionals you can do this:

If visitor is on Category A page, list sub-category links

If visitor is on “Sub-Category” page, show all articles for that category

Now keep in mind, in order to list the sub-category links, you have to manually put them¬†into the template (within the conditional) since Desk.com doesn’t support sub-categories by default. But, as clunky as this is, it gets the job done in a system which doesn’t support sub-categories natively.

Have you used this method before? ¬†Is there a better way than manually setting up the top level categories to link to the “sub-categories”? ¬†Let me know what you think in the comments.