Archive for the ‘twitter-bootstrap’ Category

Ruby on Rails for the PHP Web Developer – The Journey

For my frequent readers, you may assume that I have run crazy … now Ruby on Rails with all the PHP experience that you have got! Well I am shocked as well, but its a necessary step in my growth as all of us have to move out of our comfort zones at some time. Well I am going to be moving to an organization that uses Ruby on Rails as their language tool of choice as a project manager. So yes I have to learn a new tool, leveraging my experience to manage agile projects, so the geek in me has to understand the tool chain to enable me have better dialogue with the business analysts and developers.

So I am starting out on a new path, but as I was taught (brainwashed actually) the best way to learn a new tool is to use it. So I am trying to build a not so super secret software solution to solve a business problem I keep running into as a way of getting into the guts of this tool.

Ruby on Rails (ROR) is tough to get running on Windows as it was more a *nix development tool chain but I am taking up the challenge to get it to work with lots of Google searches and the ever present StackOverflow (now its my chance to ask questions). The environment is as follows:

  1. IDE – started with RubyMine for Jetbrains (http://www.jetbrains.com/ruby/) with a 30 day evaluation, then I will see what happens next
  2. Rails Installer by Engine Yard (http://railsinstaller.org/) – the smoothest way to get Rails up and running. The strange thing is that I am using Ruby 1.8.7 as that’s the version being used by an opensource project I would like to contribute to … so well why not stay behind and do some good while I am at it
  3. Ruby on Rails Tutorial (http://ruby.railstutorial.org) by Micheal Hartl free online resouce
  4. Stack Overflow (http://stackoverflow.com) – Q&A site most of the issues that I face have already been solved
  5. Git – needed a private repo so ended up at BitBucket (http://bitbucket.org) by Altassian. Having little knowledge of Git too, and having a lot of problems setting it up I downloaded SourceTree (http://www.sourcetreeapp.com)
  6. Ruby Gems – pre-built functionality

Now in the process of moving the dev environment to a Mac … However after trying to install the different pieces alone, I was advised to use Home Brew (http://mxcl.github.io/homebrew/) following the instructions at http://bit.ly/114X2x1

Part II coming up soon ….

My first Symfony 2 Web Application – The Journey – Installation

Happy New Year, 2013, its finally here … Well in 2012, I should say I had Symfony 2 envy, almost akin to a high school crush, so after suffering in silence for so long I have finally decided to jump in with both feet.

I am developing a simple website which is esentially a set of utilities for my home country Uganda, and the idea is that I can learn a bit more advanced PHP but also opensource it later to use as a teaching tool for other local developers (oh yes, I want to share my knowledge too). This will also give me the chance to see if I still got it in me because I do not touch code in my day job, akin to Neo in the matrix hacker by night.

So what I have I used, well an evaluation copy of Zend Studio 9 (used to use an older version at my work place), Symfony 2 (latest distribution), Twitter Bootstrap, JQuery, Git (I am using a private Bitbucket repo) and well an open Google tab. My first words are wow!! Alot has changed in the world of PHP since I last used it, Composer, Less, Sass which requires Ruby … But hey here goes

BTW I am running all this through a WAMP (http://www.wampserver.com/en/) install again the fastest I could get things to work, you could use XAMPP too but I have never done so. I am using PHP 5.3.13 with MySQL 5.5 on Windows 7 64bit. One question I may receive: As a newbie why are you going for the whole enchilada (Symfony2, Composer, Bootstrap Integration etc) – since this is a clean break I am trying to also get an understanding of the different tools that have been developed, how to use them and what they mean for the “average” web developer to answer the question – are they worth it?

  1. So first step was installing composer, which I did following the instructions here http://getcomposer.org/doc/01-basic-usage.md after which I installed it globally so that I could call it anywhere following the instructions in the answer http://stackoverflow.com/questions/12059397/is-there-any-way-to-install-composer-globally-on-windows  
  2. Next was to install Git using Git for Windows (http://msysgit.github.com/) needed even for local staging
  3. Being a git newbie, I could not get things to work properly to create the project I followed the workflow below: (I stand to be educated on a better workflow)
    • Created a new Git project on Bitbucket
    • Created a new PHP project from Git within Zend Studio – which gets everything configured well
    • Downloaded the Symfony 2 standard edition and copied the files into the new project
    • Followed the instructions here to commit it …
  4. Integrated Twitter Bootstrap using the Mopa Bootrap Bundle ( https://github.com/phiamo/MopaBootstrapBundle) however this required me to install Ruby for the LESS integration using Ruby gems while I initially run into a couple of problems with the installation of mopa/composer-bridge it was probably a connection issue. Also note the following:
    • Running the composer update command requires a console with administrator privileges to be able to create the symbolic links
    • The lessc.bat file in the Ruby install folder needs to be updated to use absolute paths to ruby.exe other than the relative paths in the file
    • Well after a lot of troubleshooting I found out that the ruby gem for Less was depreacted so I ended up using LessPHP (PHP compiler for less in pure PHP) following the instructions at http://isometriks.com/using-less-with-symfony2

Now the initial installation is done, I have my Symfony2 project running with Twitter Bootstrap integrated, it has been about 10 hours of work, but totally worth it as a learning experience

HTML Web Toolkits – Twitter Bootstrap

Well it seems like I have been doing a rip and replace of most of the “homegrown” components that we are using in our environments as we gear up for the new year. The latest to fall to the axe is our HTML + CSS + widget collection that has been growing over the years which was a collection of code from different places:

  1. reset.css by Tantek Celik (http://www.cssreset.com/scripts/undohtml-css-tantek-celik/) – to provide a base for initial browser compatibility
  2. Multiple column layouts from the Dynamic Drive (http://www.dynamicdrive.com/style/layouts/category/C9/
  3. JQuery and JQuery UI widgets – here and there 
  4. Input Button and Link styles inspired by Particle Tree (http://particletree.com/features/rediscovering-the-button-element/)

Well like all web development shops, you pick your poison and stick with it, but with the troubles we have been having with different IE versions, I set out to find out whether we had to go through all the pain of tweaking each project, or whether we could re-use existing solutions. Well my search led me to Twitter Bootrap (http://twitter.github.com/bootstrap/index.html) which was at version 1.4 at the time, and 2.x was in beta and HTML5 Boilerplate (http://html5boilerplate.com/) both of which seemed to be great starting points.

However Bootstrap won out, in the end, because it provided a responsive UI for different screen sizes, pre-built basic elements which we use a lot, buttons, forms, tables, dialogs, message alerts which were easily setup. Okay JQuery UI has great widgets but they are a pain to setup configure and use, the code for a dialog is ~20 lines with CSS, etc, very powerful but no everybody needs a V-8 engine.

First on the agenda was to understand the grid layouts, okay I have heard about 960 and Blueprint grids, but I never understood how they worked, but wow!!! This is amazing, all I need to do is add a few pre-defined grid classes and you can get 2 column, 3 column layouts, our home grown frameworks would never do this … I liked it, coming from an engineering background and lots of database work I think rows, columns and relationships, and the grid well, had me at Hello World 🙂 

The built with bootstrap site (http://builtwithbootstrap.com/) provides a great starting point to see what is possible and available. We decided to use a free theme for a project we are starting and its working for us. 

As we walk this journey, the next challenge is how to handle the tables vs table-less designs for forms. Please drop me a line and let me know what your take either here or on my Stack Overflow question at http://stackoverflow.com/questions/10072991/responsive-html-page-design-pc-tablet-smartphone-with-table-or-table-less-fo 

%d bloggers like this: