Author: Aaron Belchamber

Senior Cloud Software Engineer and 25+ years experienced video production, video editing and 3D animation services for a variety of global clients including local video production here in Jacksonville, Florida.

GeoTagging HTML pages, and even geotagging outside of earth, now that’s thinking ahead

05/14/2016 Aaron Belchamber No Comments

I was looking up the newest microformats for the latest SEO tips, specifically geo location, since geo location helps search engines with a particular content relevance score, mainly an organization or structure’s location.  Helpful info, it’s probably becoming even more relevant for search localization.

Obviously, if you are in Rapid City, SD looking for a donut shop, it’s much easier to discover the best donut shop there, Jerry’s Cakes and Donuts (by the way, Jerry’s, your website is truly awful!) as opposed to some other donut shop like that place called Dunkin Donuts, that for some strange reason doesn’t have a location in Rapid City South Dakota, nor anywhere in South Dakota for that matter.

I’m shelling out a lot of free advice in this post, but gee, Dunkin’s do you think maybe there’s a market for people who like coffee and donuts in South Dakota?!  You might want to do some market research there.

Here’s the gist about meta geotags from Wiki:

ICBM method

This info is from the Wiiki page: ICBM address

The GeoURL[9] standard requires the ICBM tag[10] method which is used to geotag standard web pages in HTML format:

<meta name="ICBM" content="50.167958, -97.133185">

The similar Geo Tag format allows the addition of placename and region tags:

<meta name="geo.position" content="30.167958;-87.133185">
<meta name="geo.placename" content="ABC Rural Municipality, Sample, Canada">
<meta name="geo.region" content="ca-mb">

RDF feeds

The RDF method is defined by W3 Group and presents the information in RDF tags:[11]

<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"> <geo:Point> <geo:lat>35.701</geo:lat> <geo:long>22.552</geo:long> </geo:Point> </rdf:RDF>

Microformat

According to the latest microformat documentation, the Geo microformat allows coordinates within HyperText Markup Language pages to be marked up in such a way that they can be “discovered”.  An example of such HTML tags looks like this in your page body:

<span class="geo">
<span class="latitude">50.167958</span>
<span class="longitude">-97.133185</span>
</span>

and it will likely display on screen like this:

50.167958; -97.133185

 

I was surprised to see HTML 5 doesn’t already incorporate data-longitude and data-latitude as an attribute now, but that would be too clean and easy, nothing like a bunch of really smart web people making things more complicated than they need to be (which isn’t very smart, I’d like to point out.)

Also, I found out that there is a proposal to extend Geo to cover other bodies, such as Venus and the Moon.  Now that’s planning ahead.  I only hope we get how to properly geotag all of earth properly first.

The Wiki page also cites Flickr as an example of providing geographic data for any geotagged photo in any of the formats mentioned above.  I only found out from a co-worker weeks ago that Flickr’s still around.


AMP: Accelerated Mobile Pages basic information and resources

04/23/2016 Aaron Belchamber No Comments

A quick shout out to Chad Lio who brought AMP to my attention about three months ago.  The web is moving so fast, there’s so much innovation and evolution going on, how do companies, web departments, and web developers keep up and prioritize?!  Really, you can’t keep up with it all, but you can learn enough to make an informed decision to figure out where best to allocate one’s time and resources.

After all, you can’t manage new web projects and initiatives if you don’t understand what impact they will have on your website traffic and bottom line.  In the end, that’s what it’s all about.  Still, a while back, I read some articles about AMP and wasn’t quite sure what to make of it.  One thing’s certain, when Google decides to get into the mix, we best all pay attention.

I encourage business owners and web developers to explore the information about AMP and come to your own conclusions.  Sooner or later, we will all have to implement it on our sites.

My own experience with AMP so far

As a business systems architect, one of my other careers is an open source PHP web developer here in Jacksonville.  When it comes to the web, you can’t afford to be idle, you have to constantly be curious, learn and experiment.  So I came to the conclusion that it’s usually a good idea to be an early adapter of these things if for no other reason than to prepare to implement and understand its limitations, among other issues we may encounter.  It makes sense for a business systems architect to know the solutions and issues a company may face before the owner asks.  Who wants to look ill-informed?

Sure enough, what I’ve learned so far is that AMP isn’t yet fully mature — but accelerating mobile pages?!  That sounds like a great idea to me, especially when page load directly speeds affect your website’s SERPs!

So simple in WordPress, but limited

So, the first thing I did was notice that Automattic, the makers of WordPress already has a plug-in, so I tried it out.  It works great, you just activate it, but it doesn’t support AMP for pages or categories yet.  Another more effective plug-in I tried was Page Frog, it created AMP pages seamlessly.

To check your website, if you have a Google Webmaster account, it’s a little hard to find the AMP validation tool.  Here’s a quick link to just pasting in your website domain to validate it for AMP.

My conclusion about AMP

My conclusion is that you should phase AMP into your websites, there are still unknowns about how it interacts with certain themes that may interfere with certain Javascript and theming elements you might otherwise expect to be delivered to mobile that may be excluded or error out.  PROCEED WITH CAUTION with AMP for now.  Try the WP AMP plug-in if you have WordPress and for non-CMS pages, start working in the AMP markup, it’s really not a lot of extra code and it can reduce load on your site at no extra charge!


Pre-Compiled CSS: LESS & SASS — Just learn them both, they’re easy

04/21/2016 Aaron Belchamber No Comments

Bootstrap left LESS and went to SASS when you upgrade from version 3.0 to version 4.0.  If you just know LESS, it’s not a big deal, really, to learn SASS.  They’re both pretty similar and end up producing the same results:  cleaner and easier to scale and use CSS.

There are a lot of tutorials about LESS and SASS, you shouldn’t be too concerned.  If you’re not a command-line guy, there are utilities and software to save your .less, .sass and .scss files into .css in the same place you expect them to be.  Also, it’s not recommended using the server listener utility to pre-compile your CSS from these source files on the production server because it’s processes that, like Symfony’s Assetic where assets get compiled and packaged in dev, belong only in the dev environment.  So by the time you are ready to push your LESS and SASS live, it’s simply part of your code deployment to the live site, not a big deal.

Here are some excellent links and tutorials that helped me understand LESS, SASS and their main differences.  In the end, they’re just pseudo languages designed to create more consistent and clean CSS.

Video about LESS, pre-compiled CSS

Here are some useful links and downloads for learning more about LESS

http://designshack.net/articles/css/using-less-js-to-simplify-your-css3

http://winless.org/ – this is the free software to create LESS in Windows

Koala: A useful editor for LESS, SASS and more

I suggest also trying Koala:  A free, multi-purpose CSS pre-compiler editor

Other useful LESS and SASS resources

http://tutorialzine.com/2016/01/learn-sass-in-15-minutes/

http://sass-lang.com/documentation/Sass/Script/Functions.html

http://www.webdesignerdepot.com/2013/11/the-beginners-guide-to-sass/

http://callmenick.com/post/an-introduction-to-sass-scss

http://www.zingdesign.com/less-vs-sass-its-time-to-switch-to-sass/

http://www.hongkiat.com/blog/sass-vs-less/

Using Compass and SASS together

http://www.zingdesign.com/the-sass-and-compass-tutorial-for-absolute-beginners/

Last comments about SASS and LESS

It’s sometimes overwhelming, just trying to keep up with the fast-paced changes and new emerging tools and libraries out there.  SASS and LESS are quite similar and produce the same results in the end.  I am favoring SASS because of how it is trending and also how the design is a little less cumbersome.

By “design” I’m referring to the language syntax and structure, it’s a little easier to create more with less, but not with LESS, SASS.

Okay, I was trying to be a little “cutesy” above, but it is true.  SASS is winning the CSS pre-compiler competition and competition is exactly what this is, which is a great thing for the web, web developers and all users of the Internet because competition like this is what will make the Internet better.  From here, more tools, methods and languages will likely emerge in the future, perhaps just replacing CSS with something more programmatic, flexible and efficient.  Keeping your design directives separate from your code is a good thing, but these design directives really need to be modernized.

 


Git resources: Git explained by humans, for humans

04/17/2016 Aaron Belchamber No Comments

Good Git structure overview

Structuring your Git upfront can save you a lot of headaches with you and your team later.  Here’s an overview of a great article to help you get your team back to the basics and set a new baseline from which to start relying on Git more effectively as a team.

Git pull rebase explained by humans, for humans

Here are a couple of posts explaining pulling with rebase and the difference between merging and rebasing.  You may want to read them a few times and try them out on your on repositories to get the hand of the best time to rebase and merge.

http://gitready.com/advanced/2009/02/11/pull-with-rebase.html

https://www.atlassian.com/git/tutorials/merging-vs-rebasing/

Git Submodules explanations

http://julienrenaux.fr/2014/08/05/how-to-use-git-submodules-to-facilitate-your-development-routine/

https://confluence.atlassian.com/sourcetreekb/adding-a-submodule-subtree-with-sourcetree-785332086.html?continue=https%3A%2F%2Fconfluence.atlassian.com%2Fsourcetreekb%2Fadding-a-submodule-subtree-with-sourcetree-785332086.html&application=cac

Video:

https://www.youtube.com/watch?v=sabx_jxdzTQ&nohtml5=False

Git pruning branches explanation

Learn more about pruning your Git branches.  Here’s another good article here.

Git push

If Git couldn’t be more confusing with forcing a push, try this “safer” one:

git --force-with-lease

Here’s an explanation about “forcing with a lease” which sounds more like an early 20th century slum-lord tactic than something a web developer would have to do with their code repositories.

To remove any file matching  a wildcard, since many git command lines don’t support wildcards like the command line:

Where “error_log” is the file name or part of the file name:

find . -name error_log | xargs git rm -r

Reverse and Stage Hunks

I couldn’t resist, after all, Source Tree has been helpful for many developers maintain and find their way around multiple projects with multiple repositories because it can be confusing if you are just using Git on the command line.  You may be too cool to not use Git on the command line, you have to keep up your street cred, but this just helps you see the forest and the trees faster than typing a bunch of git on the command line.  I have better things to do.

Atlassian provides a lot of help on there, site, click here to learn about “hunks” and you’ll also learn why Git is still growing and has a lot of room for improvement.


Want to learn more about Puppet from Puppet Labs?

03/21/2016 Aaron Belchamber No Comments

Even with smaller companies, I don’t think it hurts to look into automating more server admin and web development processes.  Puppet is one of those DevOps tools that keeps popping up.   I’m definitely going to learn more about it so here’s a link to a free e-book, “Essential Steps to Mapping Your DevOps Journey” on Puppet Labs’ website.  I figured that was a good place to start.

“Managing infrastructure as code” is a recurring theme on their website and materials that makes a lot of sense.  I look forward to learning more about Puppet!