Category Archives: HTML5

What have I been doing lately

This post is in regards to what I’ve been playing with or thinking about playing with in no particular order:

  1. Learning Haskell
  2. Postgrest is written in Haskell which is a server based application that exposes Postgres Schema as Rest Service.  It support oAuth security, CRUD, stored procedures and querying)
  3. Leaning Elm
  4. Visual Studio Code
  5. Visual Studio 2015 cross platform support for iOS, Android, Clang, etc
  6. Compiling C++ or anything to optimized Javascript.
  7. C++ Certification (I know C and Java so this should be easy)
  8. Google
  9. Progress Web Apps
  10. Firebase
  11. Game Maker / Enigma Development Environment
  12. Heroku 
  13. Hackaton / Hackdays
  14. IOT (ActiveMQ, Mosquitto message broker)

-br

Google Location Geolocation API

Working with 3rd party data I’m finding that most of the GEO data (Latitude and Longitude) are missing or incorrect.  Thankfully the Address and City data is usually correct,

My maps display will now need to include a check for lat and lng.  If it is unavailable then I will need to call the Google Geocoding API using javascript.

 

This is the code I need to add and call from my address location function:

function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

 

Bootstrap templates and tools

My on going learnings of Bootstrap has lead me to discover a few useful sites and tools:

  1. The original getBootstrap.com of course.
  2. I discovered startBootstrap.com the other day while I was trying to figure out margin settings for the thumb nail gallery I’ve been working.  Having looked at the templates and seeing some of the cool plugins (wow.js, animate.js, FitTxt.js) has me kicking myself for not discovering it sooner.  The good thing that my next project will definitely leverage the templates provided on this site.  It’s a MIT license so modifying it and using it in other open source and commercial projects should not be a problem.
  3. Pingendo Bootstrap Prototyping app.  It is available on Linux, Mac and Windows.  I was able to load up one of the more popular startbootstrap templates without any issues.  Just a warning that it is somewhat resource intensives.  I’m running Linux Mint 64 on a Dual Core and 6 Gig of memory and running Pingendo does seem to impact overall system performance.
  4. If your using Jade templating engine for developing you sites I found jade2html.org very useful for converting these bootstrap html to jade template.

-br

WebGL and HTML5

I’m having a look at some of the 2D and 3D Javascript Gaming SDK.  You make ask why, well I noticed that GitHub is offering a contest.  It is a really interesting contest given that your not design and writing a new game from scratch but rather enhancing an already existing game on Github.  Having entained the idea of getting into writing HTML5 2D or 3D game I was thinking this would be and excellence side project.  It has everything in regards to motivating me (April 13th deadline).  I have already found the game I would like to branch in Github so that it runs better.

Looking at IDE that’s supports Javascript development the Intel XDK looks like a good choice for Mobile HTML5 2D design / development / packaging / deployment.   It is a little slow to start-up on my Elementary OS / 2GB Celeron processor.  It has a lot of templates for some of the more popular Javascript 2D game frameworks like Phaser, Pixi.js and a Three.js 3D WebGL 3D example.

-br

 

 

 

 

PlayN

Well I was introduced to a interesting write once game technology solution using j2se and then deploy to HTML5, android, flash, iOS and OSX by Google called PlayN (PlayN). I really like all of the difference options.

-br

Native VS HTML

I have been thinking a lot lately about Native vs HTML5 and what is the best approach.  As indicated in previous articles I would be more concerned about the Web API you are providing first rather then Native  or Web.  It really depends on the application you are creating.

If it is fairly basic and simple displays then all web may be the best solutions.  If you want a store present then at minimum you will need to do the hybrid approach (Phonegap) approach.  If your require a lot of the Native features for accessing camera, voice, complicated then then I think the Native approach should be considered.   

Another reason to consider Native over Hybrid is device support.  If you are developing native you are developing for a specific platform / OS.  This means you won’t get any surprise unlike developing web based.  Different platform / OS have different browser implementations some even for Browser and Embedded Browser.  This in turn makes supporting web based applications very difficult.

I found a very interesting iPad Web Development Site.  You have emulators, iPad web development tools etc.  It is amazing how much information is out there for beginners and experienced iOS developers and designers.

Of course when it comes to development for Native iOS application the selections list becomes a little smaller.  What else do you need but xcode4, interface builder, simulator and actual test iOS devices.   Some design templates, wire frame tool kits would also be very useful for both types of development.

-br

 

 

 

Restfulful Technology Stack

I was checking out Dave Ramsey Web Site the other day and became very interested in what technology they where using.  Dave Ramsey the radio show host who helps people get out of debt and get back on track with saving for the future has a technology team.  It appears to be some serious stuff going on with this company.  The thing that was of interest to me is their technology stack. Technology stacks like this are very important when developing web (HTML5, Javascript, CSS) or native (iOS, Android, BB?) client side applications.  I think the key thing to keep in mind is that the technology stack should not define client side technology requirements.  This is the great thing about having a Restful technology stack, your not tied to any specific client side technology.

-br

 

CanIUse Browser Support

Interesting link I can across today:

http://caniuse.com/

It has a detail index of all of the CSS, HTML5, JS API, SVG and Other support.  Clicking on an item shows you how well it is supported in the major desktop and mobile browsers.  Selecting the Table tab allows you to do a detials comparison of selected browsers.  Of course selecting HTML5+ iOS6+Android 4.2+BB10 shows some very interesting results.  I’m not surprised, given my experience that Android has the least amount of HTML5 support.  If I included BB 7.1 then that would not be the case but we don’t want to go there.

-br

 

HTML5, iFrame Sandbox Security

The recent rise DDoS attacks are using hosting companies to deliver these attacks. Apparently hackers have been exploiting popular hosted content management applications like WordPress, iFrames specifically. If you create an iFrame and reference another site then you are trusting that this site is free of malware, cross site forgery, cross site scripting, clickjacking etc.

HTML5 offers a new security feature called sandboxing. You have 5 options:

Blank – Enforces all sandboxes restrictions

allow-same-orgin – All pages must be from the same site.

allow-top-navigation – Allows the iFrame content to navigate from the containing document.

allow-forms – Allows forms submission

allow-scripts – Allow script execution

<iframe sandbox src="frame1.html"></iframe>
<iframe sandbox="allow-forms allow-same-origin" src="frame1.html"></iframe>

 

Again it is important to keep in mind that if the browser does not support HTML5 then this attribute will be ignored. Having said that there are javascript libraries (Modernizr) that will allow the sandbox option to function.

-br