YouTube Thumbnail Image URLs

120x90 (has black bars)

https://img.youtube.com/vi/YOUTUBEVIDEOID/default.jpg

480x360 (has black bars)

https://img.youtube.com/vi/YOUTUBEVIDEOID/hqdefault.jpg

320x180

https://img.youtube.com/vi/YOUTUBEVIDEOID/mqdefault.jpg

640x480 (has black bars)

https://img.youtube.com/vi/YOUTUBEVIDEOID/sddefault.jpg

1920x1080

https://img.youtube.com/vi/YOUTUBEVIDEOID/maxresdefault.jpg

Adding a responsive YouTube video in a Foundation Reveal modal

The Foundation framework has a modal plugin called Reveal. It works pretty well and can be combined with their other plugin flex-video in order to create a responsive embedded video in the modal.

In order have the video autoplay when the modal is opened, you need to add the iframe src dynamically using javascript. Initially, set the src of the iframe to the youtube.com embed URL without the video id; if it's blank it will simply load your website in the iframe.

The trigger has a few Foundation-specific attributes to make the modal work. The "data-reveal-id" attribute tells the trigger which modal to open. That modal will have a matching id. Also, make sure to add the YouTube video ID as a "data-video-id" attribute to the trigger, as we will call on it later in the javascript code.

<!-- Trigger to Open Modal -->
<div id="btnPlayVideo" data-reveal-id="myModal" data-video-id="QH2-TGUlwu4"></div>

<!-- Video Modal -->  
<div aria-hidden="true" aria-labelledby="modalTitle" class="reveal-modal" data-reveal="" id="myModal" role="dialog">
    <div class="flex-video">
        <iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/" width="420"></iframe>
    </div>
    <a aria-label="Close" class="close-reveal-modal" href="https://www.blogger.com/null">×</a>
</div>"

In your javascript, add the code to update the iframe src when the trigger is clicked. You will also need to add code to reset the iframe src. This will make the video stop playing when the modal window is closed.

// Video Modal
$('#btnPlayVideo).click(function(){
   var videosrc = '//www.youtube.com/embed/' + $(this).attr('data-video-id') + '?autoplay=1';       
   $('#myModal iframe').attr('src', videosrc).attr('data-src',videosrc);
});

// clear iframe on close to kill video
$(document).on('close.fndtn.reveal', '[data-reveal]', function(){
 $('#myModal iframe').attr('src', '//www.youtube.com/embed/');
});

Accessing Telerik RadComboBoxes via jQuery

Yes yes, I know, Telerik is terrible and it creates an incredible amount of just unnecessary markup and the controls don't work very well in the wild, even though the demos seem so easy and simple!

But sometimes you just need to use a RadComboBox because you need a multi-dropdown list with checkboxes inside, and you don't want to roll your own. Then you need to use jQuery to manually open them in some cases, because you have a non-mobile-friendly old version of Telerik that you can't update for fear of breaking multiple other sites that all use the same assemblies. You suddenly understand why some corporations still run Windows 7 even though Microsoft is trying as hard as it can to disavow it and IE. It's just too hard, time-consuming, and expensive. And you just need it done.

After trying unsuccessfully to get the danged dropdowns to open by writing a bit of JS that inexplicably find the dropdowns non-existent, and getting a lot of "null" returns for said dropdowns, you finally stumble upon developer googling gold.

Telerik has its own jQuery library, which enables you to access and manipulate their controls via javascript. What the frig?

First, add the references to the jQuery library on your page:

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" >
   <Scripts>
       <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
       <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
   </Scripts>
</telerik:RadScriptManager> 

Now, lets say you have the following RadComboBox:

<telerik:RadComboBox runat="server" ID="rcbEveryoneLikesOptions" AutoPostBack="True"></telerik:RadComboBox>

To get it via jQuery, use this syntax:

var rcbEveryoneLikesOptions = $find("<%=rcbEveryoneLikesOptions.ClientID %>");

Then you can do fun things with it like dynamically open it:

rcbEveryoneLikesOptions.showDropDown();




You can find all the other allowable events and more detailed info here:
Using jQuery with Telerik
RadComboBox Object jQuery fun

Deleting endlessly nested node_modules directories on Windows

If you've ever tried to delete an npm project on Windows, you've probably had this error window pop up. Trying various things like Shift-Del to permanently delete, or using 7Zip to delete, or using the command prompt rmdir command just doesn't work. Argh!

Windows just can't handle these incredibly long pathnames for nested node_modules folders. Fortunately since the problem is an npm issue, there is an npm solution.

The best one I've found is rimraf. It's an npm package that is designed to delete directories. If you haven't used npm before, don't fret. You do need to use the command prompt, but if you type in the following commands it should be straightforward.

Install the npm rimraf package globally on your computer. The "-g" global ensures that you can run rimraf from any directory.

npm install rimraf -g

Then open a command window in the parent directory of the directory you want to wipe off the face of the earth.

Type in the following and you should be free of the nested terror!

rimraf node_modules

Celebrate.

Regex simplification tool

Regex strings are useful when validating form inputs-- making sure people enter in their names and phone numbers correctly when filling out forms. However, in its existing syntax, it can be quite a headache to implement. I confess that when I need a regex string, I just google whatever I'm looking for, copy, paste, and if it works I forget about it.

Here's a typical regex string:

/^(?:[0-9]|[a-z]|[\._%\+-])+(?:@)(?:[0-9]|[a-z]|[\.-])+(?:\.)[a-z]{2,}$/i

Not easily readable, right? Here's where SRL (Simple Regex Language) wants to save you time. This tool uses more human-friendly syntax to generate the regex string for you. You can use their online generator, or install their tool for your site.

Here is one example of an SRL string, which is quicker to compute:

begin with any of (digit, letter, one of "._%+-") once or more,
literally "@",
any of (digit, letter, one of ".-") once or more,
literally ".",
letter at least 2 times,
must end, case insensitive

I haven't tried it out yet, but next time I need a regex I will!

Forcing IE10 to render IE9 due to Telerik incompatibilities

We use a lot of Telerik RadGrids and such to run AJAX for smoother UX on form submits. However one of our clients reported a strange issue when using IE10. Absolutely nothing would happen on clicking Submit. It worked on any version other than IE10, even IE9.

After much hair-pulling and googling, it turns out that the 2010 version of Telerik was released before IE10 existed. With newer versions of Telerik it is of course IE10 compatible, but for older Telerik versions some things don't work.

I didn't want to go through the hassle of upgrading Telerik and risk breaking any assemblies, so I needed a quick hacky workaround. What I ended up finding was that you could "fix" this issue by forcing IE10 to load using IE9 Document Mode.

I loaded both a meta tag and a header to tell IE10 to emulate IE9. So far it works, altho it's not the best long-term solution.

// force IE10 to load like IE9
var isIe10 = Request.UserAgent.ToString().IndexOf("MSIE 10.0") > -1;

if (isIe10)
{
    // add meta
    HtmlMeta meta = new HtmlMeta();
    meta.HttpEquiv = "X-UA-Compatible";
    meta.Content = "IE=EmulateIE9";

    // add header
    Response.AddHeader("X-UA-Compatible", "IE=EmulateIE9");
}
    else
{
}

Oft-used Velocity.js methods

Scroll to an element

$element.velocity("scroll", { duration: 600, easing: "easeInSine"});

Stop existing velocity animations before running (de-queue)

$element.velocity("stop").velocity(...);

Adjust height

$element.velocity({ height: '400px' });

Adjust transform

$element.velocity({ translateY: '-100%' });

Fade in element

$element.velocity({ opacity: 1 }, { display: "block" });

Fade in element w/ a delay

$element.velocity({ opacity: 1 }, { display: "block", delay: 400 });

Fade out element

$element.velocity({ opacity: 0 }, { display: "none" });

Notes on Node.js using Express.js

To install Express for the first time:

npm install -g express-generator

Install Express files in a directory

express [PROJECTNAME]

Then install package.json after checking it has what you want

npm install

To start Node.js using Express on Windows cmd:

set DEBUG=[SERVERNAMEHERE]:* & node index.js

Installing SSL on Microsoft Azure VM IIS

Install the cert on IIS
https://www.digicert.com/ssl-certificate-installation-microsoft-iis-8.htm

If you go through these steps successfully but the certificate you just created disappears, you will need to import the private key. This happens if you created the certificate request on a different computer.

Export the private key from the originating computer, then import it to the target server
https://www.digicert.com/ssl-support/pfx-import-export-iis-7.htm

Add a new endpoint for HTTPS on Azure. If you do not do this, you will get a "webpage not available" error when trying to load the website via https.
http://stackoverflow.com/questions/31965713/how-i-add-new-endpoints-to-my-vm-on-new-azure-portal-preview

If you want to redirect all traffic to https, you will need to add an entry in your Web.config. Under the <system.webserver><rewrite><rules>, create a new <rule>:

<rule name="https-redirect" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAny">
<add input="{HTTPS}" pattern="off" ignoreCase="true" />
</conditions>
<action type="Redirect"  url="https://www.99restaurants.com/{R:1}" redirectType="Permanent" />
</rule>

Helpful Linux SSH Commands

Change Owner/Group Recursively(into subfolders and files):

chown -R user:group directoryorfilename

Change Permissions Recursively:
***CAUTION: this has in the past deleted the entire contents of a folder when used with a directory name

chmod -R XXX DirectoryOrFilename

Get All Users: 

getent passwd

Get All Groups: 

getent group

Run commands as a superuser (if getting "Cannot run with sudo"):

(command) --allow-root

List current (working) directory:

pwd

Get file size of 1st level of folders in root directory:

ls

List contents of directory:

du -h --max-depth=1 /

Get size and avail space on drive

df -h

Get file size of each folder:

du -sh *

List files in order by size

ls -lh -S

MySQL Related Commands

Check mysql status:

/etc/init.d/mysql status

Restart mysql:

sudo service mysql restart

Export database to sql file:

mysqldump -u [uname] -p database_name > filename.sql

Restore database from sql file:

mysql -u username -p database_name < file.sql

Access MySQL shell from linux commandline:

mysql -u root -p

Once in mysql, you can use these commands

List databases:

SHOW DATABASES;

List users:

SELECT User FROM mysql.user;

Create a new user with remote access enabled:

GRANT ALL ON DatabaseName.* TO UserName@’1.2.3.4’ IDENTIFIED BY ‘PasswordHere’;

Nano Commands

Copy a line (This can be used multiple times to add lines to the buffer):

Alt-^ (Alt-Shift-6)

Paste buffer content

Ctrl-U

Go to bottom of file

Ctrl-W + Ctrl-V

Goals for 2016

Around this time each year I have to set my goals at work. Trying to formulate what my goals are is making me think of what my own personal goals as a coder are. In general, I want to use my abilities, skills, and talents to make the world a better place. In addition, I've noticed that I learn by just jumping in and trying things, as well as reading books and basically sucking up all the information I can about a subject. My hope is to use both the experiential and educational approaches to gain more knowledge and accomplish my goals.

Personal Goals

Create some kind of game or fun app
Whether it's a virtual pet app, a puzzle game, or functional app like mobile sticky notes. I've always been interested in creating games or apps. Maybe it was reading 3-2-1 Contact magazine growing up and looking at the BASIC games that they published and you could copy onto your computer. I remember borrowing a BASIC book from the public library and creating a very very simple text game about a koala.

Get involved with the coding community
I haven't really connected with coders outside my office very much. I have gone to the past two WordCamp Boston events, which have been awesome. I did go to one Meetup last year and it was really cool to chat with other programmers and see what they work on/in. I love the Github community and how everyone lets you get all up in their code and see how it was built and add their suggestions. I'd love to go to more events and conferences and maybe even contribute to a Github repo!

Learn foundational programming concepts
As a non-computer science major (I went for photography instead), most of my skills have been learned on the job. It hasn't been easy, but it's been incredibly rewarding. I'd liken the experience to learning a new language by dropping myself off in another country and quickly figuring out how to get the job done in each situation. It's worked out great, but I can sense the gap in my knowledge when it comes to how certain things are structured or how websites work in a broad sense. I've started making an Amazon list of books that deal with different aspects of computer programming, from coding philosophy to practical career advice. So far it's been pretty eye-opening, and I'm hoping it will help me have a more complete picture of how programming works.

Get more freelance and business experience
I did my first freelance project this past year, installing and customizing a Wordpress theme for a non-profit. Getting to see the business side of things was a new challenge for me, and I did a lot of Googling about skills like writing a good SOW, communicating with the client, and the all-important ability of getting paid. It was a great learning experience and the client was very happy with the end product. I also see the need of learning how business and marketing works. While I won't be looking for an MBA, I am looking into books that can teach me some basic business skills.

Professional Goals (as an employee)

Learn a front-end framework
I've learned a lot of front-end stuff this past year, and definitely feel more comfortable with basic responsive design, JS and working with SCSS and Grunt. I'd like to dive deeper into this area and learn more about popular frameworks like Angular.js or Node.js. I honestly don't even really know what they do exactly, so I definitely would like to get more knowledgeable in this area.

Continue contributing to scoping
This past year I've helped out more with estimating dev hours for upcoming projects. I'd like to continue doing that, as well as trying to be watchful for red flags and being more proactive in calling out potential problems in timelines or hours.

Present at Heads Up or other meeting
I presented on a new responsive website build for the first time at one of the monthly all-company meetings and I think it went well-- got good feedback and I enjoyed it. I'd like to try it again.

Wordpress Migration

When migrating Wordpress between servers, usually when moving from a staging to production database for the first time, I'll follow these steps:

• Install a fresh version of Wordpress on the production server
• Move wp-content folders via FTP: uploads, themes, plugins (if desired)
• Export the MySQL database from the staging MySQL server, rename hostnames
• Import the MySQL database to the production

In general this works pretty well. However I've never been able to get the media library files to successfully load on the new install. Since I uploaded all the uploads folders, the paths to the JPGs work. But in the Media Library they all show up w/o thumbnails. 

After much searching I found a plugin that reattaches the thumbnails in the new install. Tried it out and it works like a charm!

Wordpress Force Generate Thumbnails