Sunday, March 23, 2014

A couple of weeks ago, I had some internet connection issues with my ISP providers equipment. To resolve the issues -I had to make an appointment - and that meant being at home to wait for them to show up to fix the equipment -without a working internet connection.

 I tried the YouTube App on my phone for the first time. I saw a 2013 CSSConfUS  talk by Pamela Fox titled "When Bootstrap Attacks" , where she talked about the work she  did on the Coursera web site(apparently she is now at Kahn Academy).


 It was a half hour presentation on upgrading  the Coursera site from mixed versions of Bootstrap to a single version across a mixed code base - old and new. The work to upgrade to one version was made difficult because of the Bootstrap class names were in the HTML, the CSS and the JavaScript code - and the older code was PHP which would have that all mixed with SQL Statements also in the mix - so identifying just the bootstrap classes within the entire code base was not  easy.    The Coursera sites new Architecture uses BackboneJS, and Jade (requires NodeJS)  for templating and Stylus for CSS (a CSS Preprocessor Library similar to Less and SASS)

 

Finding things by name in the source code base was problematic, and would have been easier if there were a namespaces in the CSS.

She said that Bootstrap has an open issue in their backlog to Prefix their classes - but that they have not made it a priority. She suggests having your own classes that Extend the BootStrap classes using SASS (even though she really is using Stylus).

 

She also recommended that you publish your own style guide documents for your team to use and not use the Bootstrap docs. She suggested moving away from using the Bootstrap JavaScript and using their own; also not using the Styling CSS Classes in their JavaScript -they could use a JavaScript targeted CSS class (adding a  js suffix on the end) - so that the separation of style and functionality can remove the impacts on the JavaScript dependency to the CSS Class names. With HTML5 you could use Data Attributes to hook into things instead of using the CSS Classes. Keeping Styling and functionality concerns separate - reinforced the Separation of Concerns for these promotes better maintainability.


Pamela Fox also mentioned that she also started to introduce testing to their site -" if the front end does anything at all - you need to test it" - Mocha , Chai, JsDom and Selenium were used to start getting testing done on her site.  (Needle uses Selenium + Nose using python - to do screen shot comparisons from a good state screen shot when pixel  layout can impact functionality if not all of a set of data is visible due to CSS Changes-she has not actually used it) It is best to start this test development early so that you have plenty of tests. They have only reached a 2% coverage so far (as of 2013 talk).

 

You need to test that your separation of these concerns effort has not broken something and by lessening the dependencies you have a much better overall maintainability with test coverage automation will ease future maintenance - so if you plan on using Bootstrap or any other CSS Framework - keep the idea of separation of concerns in mind so that you do not trap yourself into a maintenance issue corner. That talk was a good followup on my look at Durandals use of Bootstrap.

Sunday, March 23, 2014 10:10:49 PM (Eastern Standard Time, UTC-05:00)
 Tuesday, February 25, 2014

The last month has been very busy. So, unfortunately I have not been able to do much research on BootStrap as I would have liked. Bootstrap is a good framework for getting workable HTML with CSS for a set of controls for a web UI that is very usable. The risk is that you could have a broken UI if they change the tags and CSS, on a later version. An advantage of using this framework is that you have a good basis to start from; you could bring in a true designer to re-skin your website/application by just updating the CSS.

Bootstrap as a combination of JavaScript, HTML with classes for CSS to style makes for a very powerful basic site.

CSS can be challenging and the use of a basic framework for a layout can be a time saver.

I hope to get some time to look into the use of FontAwesome and Bootstrap together.

Tuesday, February 25, 2014 10:44:47 PM (Eastern Standard Time, UTC-05:00)
 Thursday, January 16, 2014
Well, right off the bat, those initial Starter Kit issues I saw with Durandal, turn out to be the 2.01 changes were released just as Bootstrap 3.0 came out - which seems to have broken some parts - and the use within Durandal of the old FontAwesome is not compatible with Bootstrap 3. The  Durandal-Google-Group during the first two weeks of January had this info - so I will probably need to look into the Bootstrap 3 and FontAwesome pieces first in my exploration.

Thursday, January 16, 2014 9:58:53 PM (Eastern Standard Time, UTC-05:00)
 Tuesday, January 14, 2014
DurandalJS JavaScript Framework for Learning in 2014 - is a first post for 2014. I hope to use the framework for learning more about JavaScript, and Single-Page-Application approaches, and tools around the JavaScript community that are also used in the framework. JavaScript application Architecture, use of BootStrap, and Fontawesome, some NodeJS, and even some TypeScript - while using RequireJS, KnockoutJS, and jQuery. Overall it should be a good learning tool to exercise some tools that I have not experimented with. This post is how I came to decide on this framework.
Tuesday, January 14, 2014 6:12:55 PM (Eastern Standard Time, UTC-05:00)
 Thursday, September 12, 2013
Plugging into the developer Community. How a twitter feed led to a ton of other great information, and why it is important to be connected to the developer community.
Thursday, September 12, 2013 2:56:16 AM (Eastern Standard Time, UTC-05:00)
 Thursday, February 21, 2013
I was pleased to hear, in multiple podcasts, and blogposts, that Visual Studio 2012 will be getting an update that will allow for using Git respositories as well as TFS VC (Team Foundation Server Version Control).
http://www.hanselman.com/blog/GitSupportForVisualStudioGitTFSAndVSPutIntoContext.aspx


Thursday, February 21, 2013 11:57:29 PM (Eastern Standard Time, UTC-05:00)
 Wednesday, October 10, 2012

Today I wanted to go  through some jQuery samples - that were stored locally on my computer. I opened them with Internet explorer and the ActiveX warning popups were getting really annoying to try out these samples from my disk.

 

I wanted to just open up the local system HTML files that were showing off the jQuery examples without that pesky ActiveX warnings from IE.  Then I remembered that I had a copy of the Chrome browser on my machine - and found  that you can drag and drop files onto the Chrome browser to view  those files (No file> open menu-item needed).

 

After opening the file in Chrome - the jQuery did not seem to want to function - and yet, no error messages in the UI was displaying. So - in Chrome browser, the Ctrl+Shift+I  keystrokes will open up the developer tools - and  then clicking that  non-functioning link reveals  there in the console the error message about "Access-Control-Allow-Origin" not being set in the headers. This error was a new one to me - apparently one of the HTML5 changes.


The Access-Control-Allow-Origin - is supposed to be a header that is sent back to the browser from a server that allows it to access files that are not from the same domain.  This is based on the Cross Origin Resource Sharing (CORS) spec from the W3.org.


HTML5 is not just one specification -  it is a collection of specifications. This is one that I was not really aware of until hitting this error.


When you realize that data for mobile phones, tablets and browsers, that  get applications written with HTML5 as the platform in mind, this header and techniques to use it - become very important for developers to be aware of today.

 

 The HTML5Rocks website has a very nice tutorial that explores how developers need to be looking at the usage of CORS in the ability to get cross domain access of data. There is an excellent link in the tutorial, to the CanIUse.com site, that specifically shows what browsers support the HTML5 CORS spec today; the CanIUse.com is a great site for seeing what HTML5 specifications are enabled in todays modern browsers.


That research was all the result of seeing an error in the Chrome Browser. The situation that brought up the error however is a specific situation, that is using the browser without a server - so you would not have the headers being sent when opening a local file.

In researching how to get around it, I found the answer - which was restated very well in  a post on StackOverflow.com had a pointer on how to do this.


Bottom line for local development - with Chrome and jQuery is to be sure you add the following parameter to your shortcut for starting up the Chrome browser.


--allow-file-access-from-files

Wednesday, October 10, 2012 8:12:36 PM (Eastern Standard Time, UTC-05:00)