tag:blogger.com,1999:blog-31558377767617388862024-03-18T03:46:01.959-04:00Flex Force"These aren't the Flex developers you are looking for..."Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.comBlogger168125tag:blogger.com,1999:blog-3155837776761738886.post-17161117125443590302013-06-24T11:09:00.001-04:002013-06-24T11:09:48.252-04:00jQuery support in Dreamweaver CC<span style="font-family: Verdana,sans-serif;"><a href="http://jquery.com/">jQuery</a> is one of the most used JavaScript libraries out there and the latest version of Dreamweaver, called Dreamweaver CC has enhanced its support of the library. You can see a demo video of the new features <a href="http://tv.adobe.com/watch/creative-cloud-for-web/enhanced-jquery-support/">here</a>. Not only have they added support for jQuery UI Widget (Dialogs, Accordions, Menu, etc...), but it also adds support for jQuery Mobile, so that you can quickly built HTML5 application that will run on a variety of devices. You can learn more about Dreamweaver CC <a href="https://www.adobe.com/ca/products/dreamweaver.html">here</a>.</span>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com2tag:blogger.com,1999:blog-3155837776761738886.post-39933467436440173532013-05-22T08:41:00.000-04:002013-05-22T08:41:28.862-04:00CVS interaction in Intellij could be better<span style="font-family: Verdana,sans-serif;">I've been using Intellij at the office for the pass few months and it does have certain features that set it apart from Eclipse. The differences are not much, but I do appreciate them, with the most notable one being how it works with properties/branding files; the fact that it tells you which properties are no longer in use is great to easily perform some clean-up.</span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<span style="font-family: Verdana,sans-serif;">But e</span><span style="font-family: Verdana,sans-serif;"><span style="font-family: Verdana,sans-serif;">nough</span> about the good stuff, onto my complaint :) One thing that I think needs improvement in Intellij is how it works with repositories. Viewing incoming and outgoing changes is not as easy as it could be. Outgoing changes is not so bad, you have the "Changes" panel that shows you what needs to be committed, and to view incoming changes you need to go thru the "CVS > Check Directory Status" menu. I would prefer a single view to see both at the same time. Finally once you see all the files, you have to select each one and do CTRL+D on the keyboard to view the changes. This seems unnecessary and should be more easily available.</span><br />
<br />
<span style="font-family: Verdana,sans-serif;">And I'd like to note that we use CVS at the office and not the latest and greatest Git repository system, so not sure if that plays any role or not. I just find that in Eclipse this is easy, you select "Team > Synchronize" and voila! You have one view showing you all the outgoing/incoming changes and you can easily commit outgoing changes and accept incoming changes and finally deal with any conflicts if that is necessary.</span>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com58tag:blogger.com,1999:blog-3155837776761738886.post-31390226314662298552013-04-19T20:50:00.000-04:002013-04-19T20:50:24.619-04:00Flex had great documentation<span style="font-family: Verdana,sans-serif;">These days I do a lot of HTML5 programming and on the server-side the technology I mostly </span><span style="font-family: Verdana,sans-serif;"><span style="font-family: Verdana,sans-serif;">use </span>is the Spring Framework. Using the Spring Framework I often have questions or need to look up answers to specific hurdles I might encounter as I code and I typically turn to the online documentation. Unfortunately I have found that the online Spring documentation is not the best. Often the sections of the documentation describing a specific feature are brief or provide no concrete example. For such a widely used framework, this is disappointing. I thus often find myself simply googling my question and finding the answer that I need in that manner.</span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<span style="font-family: Verdana,sans-serif;">This reminded me of course of the good old days of Flex development where I would go directly to the online documentation and find what I needed right then and there. The documentation was complete, it had a great amount of detail on each and every feature of the framework and had great examples for each component thus making it easy to understand how things work or how to get started creating an application.</span>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com64tag:blogger.com,1999:blog-3155837776761738886.post-74860712640285612152013-02-14T19:19:00.002-05:002013-02-14T19:19:12.357-05:00New Apache Flex web site<span style="font-family: Verdana,sans-serif;">Now that Flex is a top level project at Apache, the enterprise level framework get a nice shiny new <a href="http://flex.apache.org/index.html">web site</a>. Great looking web site, easy to navigate, with access to lots of documentation and links to the rest of the community. So if you are just starting with Flex or been a user for many years already, go check it out!</span>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com53tag:blogger.com,1999:blog-3155837776761738886.post-64982005578586068092012-12-27T21:22:00.001-05:002012-12-27T21:22:35.526-05:00A little inspiration from a fellow Greek<span style="font-family: Verdana,sans-serif;">Just ran across this short <a href="http://vimeo.com/28719784">video</a> which is basically an interview with Less Rain founder Vasillios Alexiou a fellow Greek ... enjoy :)</span>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com50tag:blogger.com,1999:blog-3155837776761738886.post-16589927265873537712012-12-27T20:04:00.000-05:002012-12-27T20:04:51.315-05:00Flex lives!<span style="font-family: Verdana,sans-serif;">We haven't heard much Flex news lately but as of this month Apache took Flex out of incubation and made it a top-level project! <a href="http://incubator.apache.org/flex/">Apache Flex</a> now has also reached version 4.9 and contains the following changes:</span><br />
<ul>
<li><span style="font-family: Verdana,sans-serif;">New localizations for Australian, British, Canadian, Greek, Switzerland (German) and Portuguese</span></li>
<li><span style="font-family: Verdana,sans-serif;">The SDK natively supports the Flash Player versions 10.2 through 11.5. Previous versions were locked to a single version.</span></li>
<li><span style="font-family: Verdana,sans-serif;">Better support for Vectors, including new VectorList and VectorCollection classes.</span></li>
<li><span style="font-family: Verdana,sans-serif;">Inclusion of the new PostalCodeFormatter and PostalCodeValidator components for more consistent internationalization.</span></li>
<li><span style="font-family: Verdana,sans-serif;">The TLF (Text Frame Framework) was updated to version 3.0.33, and is now baked in the SDK. No need to download it separately.</span></li>
<li><span style="font-family: Verdana,sans-serif;">Support for Java 7 for compiling the SDK.</span></li>
</ul>
<span style="font-family: Verdana,sans-serif;">Also Spark versions of the following components are coming in a future version: Alert, ColorPicker, HDividerGroup, VDividerGroup, Menu, MenuBar, and ProgressBar.</span>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com25tag:blogger.com,1999:blog-3155837776761738886.post-41544563385106477652012-12-27T19:36:00.001-05:002012-12-27T19:36:10.494-05:00Turn OFF register_globals in PHP<span style="font-family: Verdana,sans-serif;">Having now used two different hosting companies for PHP web site hosting, I would like to quick describe the configuration issue that have occured with both hosting companies. They both set PHP's <span style="font-family: "Courier New",Courier,monospace;">register_globals</span> configuration variable to On, which can have undesirable effects on your application and make you easily second guess why your application is behaving in a certain way.</span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<span style="font-family: Verdana,sans-serif;">When <span style="font-family: "Courier New",Courier,monospace;">register_globals</span> is set to On, this means that your variables are registered globally and available on every page. So if you declare a variable called <span style="font-family: "Courier New",Courier,monospace;">$userCount</span> and assign it some value in a page called <span style="font-family: "Courier New",Courier,monospace;">script1.php</span> and then have another variable with the same name (<span style="font-family: "Courier New",Courier,monospace;">$userCount</span>) but with a different meaning on another page (say <span style="font-family: "Courier New",Courier,monospace;">script2.php</span>), it will initially take the value assigned when <span style="font-family: "Courier New",Courier,monospace;">script1.php</span> was executed!</span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<span style="font-family: Verdana,sans-serif;">So let's say <span style="font-family: "Courier New",Courier,monospace;">script1.php</span> performed the following assignment:</span><br />
<br />
<span style="font-family: "Courier New",Courier,monospace;">$userCount = 5;</span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<span style="font-family: Verdana,sans-serif;">When <span style="font-family: "Courier New",Courier,monospace;">script2.php</span> executes, if it also has a variable called <span style="font-family: "Courier New",Courier,monospace;">$userCount</span>, its initial value will be 5! Very confusing!</span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<span style="font-family: Verdana,sans-serif;">So take my advice, if you can configure PHP yourself on your web hosting site, then set <span style="font-family: "Courier New",Courier,monospace;">register_globals</span> to <b>Off</b>, or ask your web hosting company to do this for you. </span><br />
<br />
<span style="font-family: Verdana,sans-serif;">Also note that the <span style="font-family: "Courier New",Courier,monospace;">register_globals</span> configuration variable has been removed as of PHP version 5.4.</span>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com2tag:blogger.com,1999:blog-3155837776761738886.post-39403161953778283982012-10-30T20:18:00.002-04:002012-10-30T20:18:34.285-04:00Adobe's Create the Web Tour - Montreal Edition<span style="font-family: Verdana,sans-serif;">Adobe is passing by Montreal on Thursday December 6th, 2012 for the <i>"Create the Web Tour"</i>. At this event you will get a chance to see the various <a href="http://html.adobe.com/edge/">Adobe Edge Tools</a> in action and also how to create mobile apps using HTML, JavaScript and CSS using PhoneGap.</span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<span style="font-family: Verdana,sans-serif;">So all really cool stuff and if you want to attend follow this <a href="http://www.eventbrite.ca/event/2477855332/?ref=enivtefor001&invite=MjY0ODgyMy9hbmdlbG9uZTE5NzU1NUBnbWFpbC5jb20vMA%3D%3D&utm_source=eb_email&utm_medium=email&utm_campaign=inviteformalv2&utm_term=attend&ref=enivtefor001&ebtv=C">link</a> to register, there is still places available.</span>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com3tag:blogger.com,1999:blog-3155837776761738886.post-11987613071316401492012-10-21T21:21:00.001-04:002012-10-21T21:21:45.394-04:00Brackets is now Adobe Edge Code<span style="font-family: Verdana,sans-serif;">I recently wrote about Adobe's foray into creating an HTML/CSS/JavaScript code editor called <a href="http://jimmyflex.blogspot.ca/2012/06/brakets-code-editor.html">Brackets</a>. Since then Adobe has created the <a href="http://html.adobe.com/edge/">Adobe Edge Tools and Services</a> platform, which contains a suite of tools to help developers build better web applications and as such, Brackets has become <a href="http://html.adobe.com/edge/">Adobe Edge Code</a> within this suite. The difference between the two is that Adobe Edge Code integrates with other Edge tools such as <i>Edge Web Fonts</i> and <i>PhoneGap Build</i>; while Brackets remains the open source version of the code editor. The open-source Brackets <a href="https://github.com/adobe/brackets">web site</a> is still maintained on GitHub.</span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<span style="font-family: Verdana,sans-serif;">You can currently download the preview of Adobe Edge Code from the web site to give it a try if you are interested. I wrote about some the features in a previous post <a href="http://jimmyflex.blogspot.ca/2012/06/brakets-code-editor.html">here</a>. Also, if you want to see the editor in action, there is great demo video that can be found on YouTube right <a href="http://www.youtube.com/watch?v=2V8v6gwrZiM&feature=youtu.be">here</a>.</span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<span style="font-family: Verdana,sans-serif;">Enjoy!</span>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com2tag:blogger.com,1999:blog-3155837776761738886.post-64604398254718929412012-10-21T21:05:00.004-04:002012-10-21T21:05:29.388-04:00HTML5 / CSS / Javascript documentation<span style="font-family: Verdana,sans-serif;">One of the best tools we have at hand when developing is online documentation. Online documentation is available for many programming languages such as Java, PHP, Ruby and can also be found for application frameworks such as jQuery and Spring. </span><br />
<br />
<span style="font-family: Verdana,sans-serif;">For HTML, CSS and JavaScript, I typically go to the <a href="http://www.w3schools.com/default.asp">W3Schools</a> web site to look something up and it has been a great resource for many years. Recently however, Adobe put forth a community drivin <a href="http://docs.webplatform.org/wiki/Main_Page">Web Platform Docs</a> wiki site for all related web technologies. Although the site is currently in alpha form, it seems to have gotten off to a very good start. So I suggest you head on over there to take a look and contribute if you can :)</span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<span style="font-family: Verdana,sans-serif;">Other sites that I typically go to for such information is <a href="http://caniuse.com/">caniuse.com</a> and the <a href="http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29">HTML5 comparison of layout engines</a>.</span>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com1tag:blogger.com,1999:blog-3155837776761738886.post-51986475934382726562012-10-09T00:10:00.001-04:002012-10-09T00:16:04.933-04:00Getting responsive design to work<span style="font-family: Verdana,sans-serif;">I was recently working on a web site and wanted to make it work across several mobile devices. In my case I was testing on an iPhone 4, Android Tablet and an Android phone. So no big deal, I created three different CSS files to cover the range of devices, namely phones, tablets and PC. The low level details are that you create the different CSS files and then specify which one to use based on the screen size using CSS media queries, like so:</span><br />
<br />
<span style="font-family: "Courier New",Courier,monospace;"><link rel="stylesheet" media="all and (max-width: 320px)" href="site-max320.css"/></span><br />
<span style="font-family: "Courier New",Courier,monospace;"><link rel="stylesheet" media="all and (min-width: 361px) and (max-width: 800px)" href="selene-max800.css"/></span><br />
<span style="font-family: "Courier New",Courier,monospace;"><link rel="stylesheet" media="all and (min-width: 801px)" href="selene.css"/></span><br />
<br />
<span style="font-family: Verdana,sans-serif;">However, once I started testing on the phone and tablet something wasn't working right. It was like the mobile browsers were ignoring the media queries; they were auto-zooming out to display the web site in its entirety, which was not what I wanted. After some googling, I discovered that you have to tell the browsers scale the content to the width of the screen, this way the media queries will be taken into effect. To accomplish this, you have to put the viewport meta data tag in the head of your HTML document, like so:</span><br />
<br />
<span style="font-family: "Courier New",Courier,monospace;"><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/></span> <br />
<br />
<span style="font-family: Verdana,sans-serif;">Once I added this meta data tag, it all worked as expected :) A more detailed explanation about this meta data tag can be found <a href="https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag">here</a>.</span>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com1tag:blogger.com,1999:blog-3155837776761738886.post-46195227887303999392012-08-29T19:56:00.004-04:002012-08-29T19:56:45.005-04:00Firefox 15 is great for development<span style="font-family: Verdana,sans-serif;">Firefox 15 was just released this week and I have been using it since the beta began and as far as I am concerned it is the best browser for development purposes. Let me highlight a couple of reasons why.</span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<b><span style="font-family: Verdana,sans-serif;">Working with CSS</span></b><br />
<span style="font-family: Verdana,sans-serif;">A lot of times when developing a web site or web application, getting the "look" just right requires quite the effort. Up to now one of the best tools for working with CSS in Firefox was <a href="http://getfirebug.com/">Firebug</a>. However with the latest Firefox, you can just right-click on any element on a page and select "Inspect Element (<u>Q</u>)" and you get to see all the properties of the element and adjust them on the fly and see what effect your changes. Now this has been there for a while, but with version 15, in the bottom-right corner, you now get visual tool showing you the overall size of the element and the size of each of its properties (borders, padding and margins). Quite useful, here is a sample:</span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-M7UvgcMJOq8/UD6p1VvGOCI/AAAAAAAAACg/MMd52w_Q1Ag/s1600/ff15-1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="288" src="http://2.bp.blogspot.com/-M7UvgcMJOq8/UD6p1VvGOCI/AAAAAAAAACg/MMd52w_Q1Ag/s320/ff15-1.JPG" width="320" /></a></div>
<span style="font-family: Verdana,sans-serif;"><br /></span>
<span style="font-family: Verdana,sans-serif;"><br /></span>
<b><span style="font-family: Verdana,sans-serif;">Testing for Mobile</span></b><br />
<span style="font-family: Verdana,sans-serif;">As we go along in 2012 and beyond, a good portion of work will require us to make sure a site is mobile-ready. So if you are doing Responsive Design (using CSS Media Queries), you can now test your design in Firefox 15 without the need of having various physical devices. Simply navigate to the site and select from the Firefox menu, "Web Developer > Responsive Design View" and you will be able to see how your site looks based on some predefined screen resolutions that are available.</span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ZfupU2xL2XI/UD6sF9j-GvI/AAAAAAAAACo/CE_DgQk5T24/s1600/ff15-2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-ZfupU2xL2XI/UD6sF9j-GvI/AAAAAAAAACo/CE_DgQk5T24/s320/ff15-2.JPG" width="264" /></a></div>
<br />
<span style="font-family: Verdana,sans-serif;"></span><br />
<br />
<br />
<br />
<span style="font-family: Verdana,sans-serif;">So happy developing using Firefox 15!</span><br />
Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com7tag:blogger.com,1999:blog-3155837776761738886.post-15479743998291767202012-08-24T20:43:00.004-04:002012-08-24T20:43:52.533-04:00Adobe Inspire<span style="font-family: Verdana,sans-serif;">Once upon a time, Adobe used to have something called the Edge Newsletter, which was renamed earlier this month to <a href="http://www.adobe.com/inspire.html">Inspire Magazine</a>. Its actually a nice little web site, with some interesting articles about Fluid Grid Layouts in Dreamweaver 6 (on my to-do list), a post about web standards, web site design with Fireworks 6 and so on and so forth. So I recommend you head over there and check things out, you might find something interesting to read about!</span>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com21tag:blogger.com,1999:blog-3155837776761738886.post-30938391634696919812012-08-21T22:15:00.000-04:002012-08-21T22:15:13.020-04:00PHP Namespaces<span style="font-family: Verdana,sans-serif;">I've been working on a PHP project lately and when I started working on it, I remember thinking to myself that there must be the equivalent to Java packages in this language. Otherwise loading/including/referencing classes from another class can be a bit of nightmare. There is the common PHP <a href="http://php.net/manual/en/language.oop5.autoload.php">autoload</a> pattern, but I find this is not enough and so I kept on digging and eventually ... success! Since PHP 5.3 there is the concept of <a href="http://www.php.net/manual/en/language.namespaces.php">PHP Namespaces</a>, similar to Java packages which is very helpful in creating re-usable code. Basically in your class declaration, start it off with putting your namespace definition before anything else, like so:</span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<span style="color: #b45f06;"><span style="font-family: "Courier New",Courier,monospace;"></span></span><br />
<span style="color: #b45f06;"><span style="font-family: "Courier New",Courier,monospace;">namespace acme\utils;</span></span><br />
<br />
<span style="color: #b45f06;"><span style="font-family: "Courier New",Courier,monospace;">class User {</span></span><br />
<span style="color: #b45f06;"><span style="font-family: "Courier New",Courier,monospace;">...</span></span><br />
<span style="color: #b45f06;"><span style="font-family: "Courier New",Courier,monospace;">} </span></span><br />
<span style="font-family: Verdana,sans-serif;"><span style="color: #b45f06;"><span style="font-family: "Courier New",Courier,monospace;">?> </span></span></span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<span style="font-family: Verdana,sans-serif;">And then you can re-use your class from another class or PHP file, like so:</span><br />
<br />
<span style="color: #b45f06;"><span style="font-family: "Courier New",Courier,monospace;"></span></span><br />
<span style="color: #b45f06;"><span style="font-family: "Courier New",Courier,monospace;">namespace acme\business;</span></span><br />
<br />
<span style="color: #b45f06;"><span style="font-family: "Courier New",Courier,monospace;">use acme\utils\User; </span></span><br />
<br />
<span style="color: #b45f06;"><span style="font-family: "Courier New",Courier,monospace;">class ProcessCommand {</span></span><br />
<span style="color: #b45f06;"><span style="font-family: "Courier New",Courier,monospace;">...</span></span><br />
<span style="color: #b45f06;"><span style="font-family: "Courier New",Courier,monospace;">$user = new User(); </span></span><br />
<span style="color: #b45f06;"><span style="font-family: "Courier New",Courier,monospace;">...</span></span><br />
<span style="color: #b45f06;"><span style="font-family: "Courier New",Courier,monospace;">} </span></span><br />
<span style="font-family: Verdana,sans-serif;"><span style="color: #b45f06;"><span style="font-family: "Courier New",Courier,monospace;">?></span></span> </span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<span style="font-family: Verdana,sans-serif;">Hope that helps and happy PHP coding!</span>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com2tag:blogger.com,1999:blog-3155837776761738886.post-45288520590608646532012-08-21T21:40:00.000-04:002012-08-21T21:40:11.312-04:00Learn to build<span style="font-family: Verdana,sans-serif;">There are a lot of technologies out there these days to work in: Flex, PHP, HTML, CSS, JavaScript, Ruby, the list goes on and on. And each one of them has their place in the grand scheme of things, each with its own strengths and weaknesses, each with its own particularities and each one has its appeal.</span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<span style="font-family: Verdana,sans-serif;">At some point in time, you will have to use one technology or another to get a job done, be it either by your own choice or because it is a requirement. And the technology of choice might not be one that you have used before. So what are you to do? Grab a book of course and starting reading. I've done that many times in the past. Another way is to read online tutorials and yes I've done this many times before as well. But honestly, the best way to learn is to ... build something! Ain't nothing like writing the lines of code yourself and seeing the results </span><span style="font-family: Verdana,sans-serif;"><span style="font-family: Verdana,sans-serif;">unfold </span>right before your eyes. Really its the best way to learn, I can't stress that enough. It's the best way to learn the little hidden details of a language (or just a technology or framework for that matter) and to put what you have been reading into practice and really get a good grasp on things. You don't have to build anything complicated, just a simple contact manager will do, just enough so that you can really understand how something works.</span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<span style="font-family: Verdana,sans-serif;">So like my blog post title says, "Learn to build", or more like "build something" to "learn" :)</span>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com1tag:blogger.com,1999:blog-3155837776761738886.post-59300769829894996892012-06-28T08:32:00.001-04:002012-06-28T08:32:25.888-04:00Brakets, the code editor<div style="font-family: Verdana,sans-serif;">
I've been doing a lot of HTML/JS/CSS development in the last year and most of this work has been done in Eclipse. Now Eclipse is good for this type of development, but with many 3rd party JavaScript libraries out there, it is hard to find good support for these libraries in IDEs.</div>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
So I am always trying to find a better HTML/JS/CSS code editor, having used Dreamweaver, Sublime Text and WebStorm over the past year, and now we have Brackets.</div>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
<a href="http://brackets.io/">Brackets</a> is an HTML/JS/CSS code editor, developed, interestingly enough in HTML/JS/CSS :) And it's goal is to be an editor focused on HTML/JS/CSS development. Right now, the currently available download could be considered beta 1 (or perhaps not even that) and offers very little. It does have two interesting features however. First, it connects with your browser, so as you edit your file(s) and the browser will auto-refresh to show you what your changes look like. Secondly, if you highlight say a Javascript function call or a CSS class and hit CTRL+E, you will get what's called "Quick Editing". Quick Editing, allows the related piece of code from another file to appear in an overlay in the current file so you can make changes right away and save them. Saves you the hassle of having to go open a file and look for related piece of code.</div>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
Apart from that, Brackets doesn't offer much, for now. There is no code auto-completion of any kind, as this editor is still in its infancy. And hopefully at some point, it will have 3rd party library support as well. You can actually recommend features or vote for exiting ones <a href="https://trello.com/board/brackets/4f90a6d98f77505d7940ce88">here</a>. But it will be growing from week to week, so I recommend, checking it out from time to time, or even contributing to the project if you can!</div>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com0tag:blogger.com,1999:blog-3155837776761738886.post-18949788949727807982012-05-18T09:48:00.001-04:002012-05-18T09:48:01.242-04:00ColdFusion 10 features<span style="font-family: Verdana, sans-serif;">ColdFusion 10, the next major release of the Adobe Programming language is almost ready for prime time and they have recently released some articles to explain all the new features the language will support.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;">The next version has greatly improved support for HTML5 related technologies, such as web sockets, next it now generates charts using JavaScript (instead of Flash - but this is still a fallback mode if needed) and it also adds support for closures. You can look at the videos <a href="http://tv.adobe.com/watch/adc-presents/whats-new-in-coldfusion-10/">here</a> and <a href="http://tv.adobe.com/watch/adc-presents/unique-builtin-html5-support-in-coldfusion-10/">here</a> for some quick demos.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;">Finally, a change under the hood has been made to make ColdFusion more mainstream, it now uses the Apache Tomcat Web Server, instead of antiquated JRun Server, which it had been using for many years now. A short video regarding ColdFusion and Java changes can be viewed <a href="http://tv.adobe.com/watch/adc-presents/java-and-coldfusion-10/">here</a>.</span>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com1tag:blogger.com,1999:blog-3155837776761738886.post-79289041831488228402012-03-20T19:54:00.003-04:002012-03-20T19:54:40.830-04:00Page caching and the HTML5 onPageShow window event<div style="font-family: Verdana,sans-serif;">
Just last week I was confronted with a problem that occurred only in Firefox. This is rare, since Firefox is very good at implementing HTML/CSS/JavaScript standards. Basically what I had was a report criteria page being displayed to a user and then once he hit the submit button, we pop-up a JavaScript overlay saying "Processing...". Thing is, if the user hits the browser's "Back" button (yes that horrible button), the overlay was remaining, even thought in the window onLoad event we were telling the overlay to unload itself.</div>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
I believe the problem starting with a recent version of Firefox where the browser implemented page caching. Subsequently, when the "Back" button is hit, the page is loaded from the cache and the onLoad event is not fired again. So our code to unload the overlay was not being executed. </div>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
The solution as I found it, is that in this scenario, Firefox is firing the onPageShow event, giving us a chance to do our clean up work. So we basically added the following line of code in the window onLoad event handler:</div>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<pre id="line1"><span style="font-size: small;"><span style="font-family: "Courier New",Courier,monospace;">$(window).bind( "pageshow", function() { $.unblockUI(); } );</span></span> </pre>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
We still left the old code there so that it works for other browsers and older versions of Firefox. </div>
<span><span style="font-size: small;"> </span></span>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com3tag:blogger.com,1999:blog-3155837776761738886.post-33588244556680018312012-03-20T19:32:00.005-04:002012-03-20T19:33:18.030-04:00More info on Adobe Shadow<div style="font-family: Verdana,sans-serif;">
In my last post I spoke about Adobe Shadow, their new tool for test web applications on various mobile devices concurrently. Since then, Adobe has posted a couple of short videos displaying the capabilities of Adobe Shadow. So what are you waiting for, click on the links below to check them out!</div>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<ul>
<li style="font-family: Verdana,sans-serif;"><a href="http://tv.adobe.com/watch/adc-presents/introducing-adobe-shadow/">Shadow Intro</a></li>
<li><a href="http://tv.adobe.com/watch/adc-presents/remote-inspection-with-adobe-shadow/" style="font-family: Verdana,sans-serif;">Remote Inspection</a></li>
</ul>
<br />
<ul>
</ul>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com0tag:blogger.com,1999:blog-3155837776761738886.post-15108976589778891932012-03-11T16:31:00.004-04:002012-03-11T16:31:38.093-04:00Adobe releases Shadow beta<div style="font-family: Verdana,sans-serif;">
In this mobile crazy world we work and live in today, as web application developers one of the hardest things to do is testing. With all the various devices and all the various screen sizes, testing your web application to make sure it looks and works properly in various permutations can be a difficult thing.</div>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
Enter <a href="http://labs.adobe.com/technologies/shadow/">Adobe Shadow</a>, an inspection and preview tool. Here is how it works. You link a device (phone, tablet) to your main computer and then as you browse your web site on your main computer, the same web site automatically appears on your linked device(s). Furthermore you can remotely inspect the DOM and CSS from the web browser of the device, make on-the-fly changes and see them take effect in real-time. This is a great way to do testing across different devices and get your web application just right. Check out the quick tutorial <a href="http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow">video</a> to learn more!</div>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com0tag:blogger.com,1999:blog-3155837776761738886.post-73345327742810560582012-02-28T20:36:00.001-05:002012-02-28T20:36:04.815-05:00Using Flex SDK with Intellij<div style="font-family: Verdana,sans-serif;">
A long time ago, I use to use JetBrain's <a href="http://www.jetbrains.com/idea/">Intellij</a> IDE for all my Java development. But since then I have mostly used Eclipse to do so. But with all my HTML/JavaScript/CSS development lately I have been looking for a good IDE for such development so I am considering going back to Intellij in the neat future.</div>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
And actually, Intellij has supported Flex very well for long time, so that's a good thing as well. And now that Adobe has donated Flex to Apache, you might be inclined to download the open source <a href="http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK">SDK</a> and play with it. And if you are thinking of doing so, there is a very nice demo of how to do so right <a href="http://quetwo.com/2012/02/27/compiling-the-apache-flex-sdk-with-intellij/">here</a>.</div>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com1tag:blogger.com,1999:blog-3155837776761738886.post-21935854575529828042012-02-25T15:34:00.001-05:002012-02-25T15:34:34.196-05:00HTML5 Local Storage vs Session Storage<div style="font-family: Verdana,sans-serif;">
Some new features in HTML5 are really useful, like Web Storage, but you have to make sure you understand how it works and make sure you use it in the correct scenarios. There are actually two ways that HTML 5 Web Storage works: local and session storage. I ended causing some end-user confusion by using local storage all the time, so here is breakdown of how both work and when they should be used.</div>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
<b>Local Storage</b></div>
<div style="font-family: Verdana,sans-serif;">
When using window.localStorage, the data associated to this object will never expire. So long as you don't uninstall your browser (or forcefully delete the data), the data held within this object will remain forever.</div>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
So a good example of using localStorage is when you have a web application where you create data and want to remember the last country selected, so the user doesn't always have to re-select it. So write your JavaScript code to remember the last country used and then retrieve it the next time the user comes to the page to preset the last selected country.</div>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
<b>Session Storage</b></div>
<div style="font-family: Verdana,sans-serif;">
When using window.sessionStorage, this data will only be retained for a browser session. Meaning that once the user closes the browser instance, the data is gone.</div>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
This is useful when you have a search page and want to always retain and show the last criteria entered by the user. But once the user closes the browser, you want the data to be gone, so when he or she re-enters your application the next time, they start with a fresh page.</div>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com2tag:blogger.com,1999:blog-3155837776761738886.post-14970811127661818102012-02-25T15:12:00.001-05:002012-02-25T15:12:07.663-05:00New Apache Flex Logo<div style="font-family: Verdana,sans-serif;">
With Apache now taking over the Flex SDK, one of the first order of business was to get a logo for the project. They did creating a contest and allowing people to submit their own creations. Well as of January 26th (yes I know I am late in posting this), a winning logo was voted upon and you see it <a href="http://www.fusecollective.com/apache-flex/apache-flex-fusecollective_v2.jpg">here</a> or in animated fashion <a href="http://vimeo.com/37364265">here</a>.</div>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
I think the logo is nice and I am eager to see how the future pans out with all the changes being made this year. Anyways, time will tell, in the meantime you can visit the official Apache Flex website <a href="http://incubator.apache.org/flex/">here</a>.</div>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com0tag:blogger.com,1999:blog-3155837776761738886.post-6072180201626483272012-02-10T21:39:00.002-05:002012-02-10T21:39:19.667-05:00Editing CSS on the fly in Firefox 11<div style="font-family: Verdana,sans-serif;">
As a developer, designing the look and feel of an HTML site using CSS can be a tedious task. Trying to get the dimensions of components or the colors of elements just right, can surely take its time. Thankfully over time, on-the-fly editing of CSS styles has been added to browsers and this is a great help. If you use Firefox or Chrome, you know what I am referring too, where you can right-click on an element on a page and then select "Inspect Element" using the context menu allows you to see all associated styles, make changes and see the effects of those changes directly on the page. </div>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
There is one complaint I have with this on-the-fly editing method and that is that the UI used to make the changes is too small and can be a pain to work with sometimes. However with the upcoming <a href="http://www.mozilla.org/en-US/firefox/beta/">Firefox 11</a> release, there has been a new feature added, called the <i>Style Editor</i>. You can access the Style Editor by hitting SHIFT-F7. What it does is display a floating window (see below), that allows you to access all the CSS files associated with the currently displayed page and then make changes on the fly. So nothing new there, but it's more akin to working in your favorite editor and even allows you to save the CSS to a file. It also provides Import functionality, which allows you to quickly load different CSS files and see the effect they would have on how your page looks.</div>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-mwqCz24ZLNo/TzXT-v9ENrI/AAAAAAAAAB0/Kt8Gw18bAi4/s1600/StyleEditor.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="154" src="http://2.bp.blogspot.com/-mwqCz24ZLNo/TzXT-v9ENrI/AAAAAAAAAB0/Kt8Gw18bAi4/s320/StyleEditor.PNG" width="320" /></a></div>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
I believe this to be a great development tool going forward, so get the Firefox and give it a try!</div>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com1tag:blogger.com,1999:blog-3155837776761738886.post-48268289402895833282012-01-26T22:49:00.001-05:002012-01-26T22:49:10.622-05:00Two great books to study JavaScript<span style="font-family: Verdana, sans-serif;">Since I've been concentrating mostly on Flex development since 2004 and have been getting back to JavaScript development in the last year, I thought it would be a good idea to get a couple of books to refresh my skills. Thus I've listed below two books which I've picked up recently to this effect:</span><br />
<br />
<ul>
<li><a href="http://www.amazon.ca/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752/ref=sr_1_5?ie=UTF8&qid=1327635676&sr=8-5"><span style="font-family: Verdana, sans-serif;">JavaScript Patterns</span></a></li>
<li><span style="font-family: Verdana, sans-serif;"><a href="http://www.amazon.ca/High-Performance-JavaScript-Nicholas-Zakas/dp/059680279X/ref=pd_sim_b_6">High Performance JavaScript</a></span></li>
</ul>
<div>
<span style="font-family: Verdana, sans-serif;">I've just started reading the second book and I must say both books are well written and are worth the dollars I spent. Both are for intermediate to advanced level and you sure do learn some little nuances of the language that go the extra step to help a developer write the most efficient JavaScript code. So go check them out and become and better developer!</span></div>Dimitrios "Jimmy" Gianninashttp://www.blogger.com/profile/07799512042728286815noreply@blogger.com1