Google Mobilegeddon

On Apr 21, 2015 Google will update it’s search algorithm to score sites that are mobile friendly higher in search results than those that are not. The aim of course is to spur site owners to update their sites to include a mobile version. Updating a site is straightforward but in many cases doing so may require complete rebuilds. I highly suggest looking into using bootstrap to create a web responsive site that is both a desktop and a mobile version in one with no need to create a separate mobile site.

If you’d like to check if your site is ready, try using google’s mobile friendly test.

If your site is not ready:
GoogleMobilegeddon_NotMobileFriendly

If your site is ready:
GoogleMobilegeddon_MobileFriendly

What front-end web framework to choose, Angular, Ember, React?

I’ve been looking into what front-end development framework to use for future web work and thus far, the contenders include AngularJs, EmberJS and ReactJs. As I dig in more on my research, I’ve decided it best to collect my findings here while. In addition, I’ve also created a Flipboard magazine to collect related articles.

In an ideal world, I would love to learn one more front-end development framework that allows me to do both mobile and native mobile apps. For native apps, I’m looking to learn Swift and/or PhoneGap or build iPhone apps with Javascript in WebView

Great side-by-side comparison of Angular, Ember and React:

Great Quora Posts:
Facebook’s React vs AngularJS: A Closer Look
Is React killing Angular?
Should I choose React over Angular? Why?

Links:
AngularJS vs. Backbone.js vs. Ember.js

Flipboard Magazines:

View my Flipboard Magazine.
View my Flipboard Magazine.

Alternative to JQuery Templates

After searching for options on how to develop in JavaScript with templates and finding only “custom” solutions, I decided to see if I could build my own. Turns out, there is no need to build anything since JQuery already allows for a “template” solution. Essentially, all we have to do is have a “template” in a hidden div which we can read via JQuery and either search/replace values or find elements and inject HTML or append items.

Below is my solution to templates, using only JQuery.

A Simple Social Media Share Example

Below is a simple social media share example on how to create social media share links. In this example, we’ll be creating share links using simple html anchors (no javascript needed) and sharing text, a url and an image url.

A few tips on the share links:

  • For the Facebook share link, make sure to get a Facebook App Id by registering an app w/ https://developers.facebook.com/ and add your site’s url to get an app_id for use in the share link.
  • Escape # (%23), @ (%40) and other special characters contained within value pairs of the share link (see links below)

The image we’ll be sharing: (This could be your logo or marketing graphic)

simpleshare

Working Example: (Click on links below)

The share link url’s from the working example:

http://twitter.com/home/?status=A Simple Social Media Share %23Example %40yesi79 http://yesi79.com/?p=561


https://www.facebook.com/dialog/feed?app_id=235356709923469&link=http://yesi79.com/?p=561&picture=http://yesi79.com/wp-content/uploads/2014/07/simpleshare.png&redirect_uri=http://yesi79.com/?p=561&name=A Simple Social Media Share %23Example&caption=My %23Caption&description=My %23Description

http://pinterest.com/pin/create/button/?media=http://yesi79.com/wp-content/uploads/2014/07/simpleshare.png&url=http://yesi79.com/?p=561&description=A Simple Social Media Share %23Example http://yesi79.com/?p=561

https://www.linkedin.com/cws/share?url=http://yesi79.com/?p=561

Twitter Cards: (If anyone shares your url)

If you would like an image to show up when user’s share your url within the tweet, make sure you have the proper twitter card meta tags on your page. You can use twitter’s neat twitter card validator to create the proper meta tags you’ll need and request to have your site registered (add your meta tags to your page, then test and validate your url, during the test process a link will show up asking if you’d like to register your site for twitter cards). To see a twitter photo card in action, click on the tweet link above and share this page; then view your tweet within the twitter iphone app.

Here are the meta tags you’ll need:

<meta name=”twitter:card” content=”photo”>
<meta name=”twitter:site” content=”yesi79″>
<meta name=”twitter:creator” content=”yesi79″>
<meta name=”twitter:title” content=”A Simple Social Media Share #Example @yesi79 http://yesi79.com/?p=561″>
<meta name=”twitter:image:src” content=”http://yesi79.com/wp-content/uploads/2014/07/simpleshare.png”>
<meta name=”twitter:domain” content=”http://yesi79.com/?p=561″>
<!– Optional –>
<meta name=”twitter:app:name:iphone” content=””>
<meta name=”twitter:app:name:ipad” content=””>
<meta name=”twitter:app:name:googleplay” content=””>
<meta name=”twitter:app:url:iphone” content=””>
<meta name=”twitter:app:url:ipad” content=””>
<meta name=”twitter:app:url:googleplay” content=””>
<meta name=”twitter:app:id:iphone” content=””>
<meta name=”twitter:app:id:ipad” content=””>
<meta name=”twitter:app:id:googleplay” content=””>