Archive for the ‘html’ Category

Tech Tip: Websites on Github with Jekyll

We have been facing a challenge on how to manage the Styx Technology Group corporate website without having dedicated resources to host, deal with security, updates and maintenance. Having been in the website business for over a decade at the turn of Y2K,  having an easily maintainable solution was key for the long haul.

Enter GitHub pages (https://help.github.com/categories/github-pages-basics/), of course any decent software developer and team are using some form of version control, but the beauty is that it allows projects, users and organisations to have self hosted sites that are managed through a repository.  That in combination with Jekyll (http://jekyllrb.com/) supports content management without a database.

To further speed up our development process, we leveraged existing themes for the website look and feel that were close to our need, while keeping the site design very simple so that we focused on solving the problem at hand.

It was suddenly music to our ears as the team did not have to leave their IDEs (random plug for Jetbrains IDE tool suite that we have standardized upon)  in order to make updates to the website. Just create a new markdown document, verify and push … And bam!! the updates are done, version controlled and all, no more hassles with database configurations …

Need help getting your website up and running in such a fashion do shoot us an email at consulting at styxtechgroup dot com and we shall be happy to help and engage…. Have a great weekend

Advertisement

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 

State of PHP Feb 2012 – Symfony 2, Zend Framework 2, IDE Support, MySQL

There is just too much going on so I thought I should put these thoughts down so that I do not lose my mind from the excitement and anticipation that comes from things moving very fast and innovation being spured at a pace which is mind boggling.

PHP

In my opinion the stabilization of PHP 5.3 which introduced namespaces (similar to Java Packages) was the first shot across the bow, and I expect 5.4 with traits to bring even more reusability. However our hosting providers are slow to upgrade most are still running PHP 5.2, without general availability for 5.3 just starting to appear

Frameworks

There are two main frameworks in the bull pen Symfony 2 (http://symfony.com/) and Zend Framework 2 (http://zendframework.com/) currently in beta. However they are as different as can be. While Symfony 2 has been refactored from a full blown framework to a bunch of core reusable components, its moving towards ZF2, in that its not trying to be all MVC, forms etc, but is rather a set of building blocks to provide web application framework. So good is it that Fabien Potencier the lead developer has a series on how to build your own framework on top of Symfony at http://bit.ly/zVLi7X

ZF2 on the other hand is a bunch of reusable components which you can mix and match with other frameworks which also provides an MVC, ORM etc.

If you have been in the Java world, Symfony is more like Spring Source () while Zend Framework is Apache Jakarta (http://jakarta.apache.org/)

Interesting tweet that sums it all up:
Every time a developer complains about php, the #Symfony2 community creates another great, namespaced, decoupled and reusable component

IDE Support

Zend Studio 9 was let loose at ZendCon, Oracle released Netbeans 7 (which supports ZF1, and Symfony), Eclipse PDT is chugging along, PHP Storm from Jetbrains creating  a storm with others  Vim, Notepad++, Sublime Text basically all you need to do is pick your poison.

Communities

Github (http://www.github.com) is the new Facebook and LinkedIn for developers, where all the action is happening for all the major PHP communities, you had better be there. Forking and making changes is as easy as a button press. I am yet to push my first commit to a project but I am getting there.

MySQL

The best know web database is getting losta love from Oracle, and also the community led by Percona, SkySQL, Monty DB, and many others. Where it seemed lost with lost of FUD during the $1bn Sun takeover by Oracle, it seems to just be gaining steam (at least from my viewpoint as a consumer, developer and user). Now at 5.5, with 5.6 starting to appear over the horizon …

While there is a barrage of NoSQL solutions, Hadoop leading the charge, MySQL provides a NoSQL interface via HandlerSocket (https://github.com/ahiguti/HandlerSocket-Plugin-for-MySQL) and MySQL Cluster (http://www.mysql.com/products/cluster/)

Supporting Infrastructure

This is where all the fun happens, who is using the language and what are the trends. Here is a snapshot:

  1. Content Management Systems – WordPress is getting lots of love, while Joomla now at 2.5 supports databases other than MySQL. Drupal is adopting Symfony 2 as its core framework while Magento runs off a modified ZF1 kernel, while XOOPS (http://xoops.org) is being rewritten to use ZF1 or two
  2. Template Engines – an area where battles are found won, and lost. Smarty now at 3.0 (www.smarty.net), has to battle Twig (http://twig.sensiolabs.org)  which is surging due to its usage in Symfony 2
  3. Web services – JSON, XML, AjaX, Rest Interfaces are no longer buzz words they are the norm with native support being baked into PHP
  4. Object Relational Mappers (ORMS) are one of the core developer architectural choices, in PHP we have ZF Table (Table Gateway), Doctrine 1 (Active Record), Doctrine 2 (Data Mapper), Propel (not used) in addition to plain old PDO all of which provide rich choices. Interesting is that Doctrine 2 provides an mapping for MongoDB which shows its versatility similar to Hibernate for Java
  5. Continuous Integration – with Hudson and Jenkins, and now Travis which is also hooked into Github provides a great way to continuously monitor the quality of your development
  6. Quality Control – PHP Unit has always been there but now we have mess detectors, and other metrics (do not make sense of them yet), but whatever you want to measure there is probably a tool for it.
  7. UI Toolkits – JQuery took the world by storm with JQuery UI providing a set of theme-able components, but we have HTML5 boiler plate and Twitter Bootstrap which are simplifying the cross browser issues we developers face.
  8. Performance – always a PHP problem but it has improved through 5.3 to 5.4, and other techniques like OP Caches are becoming more maintream, Memcache is pre-built into Apache …

Exciting times to be a PHP web developer oopsss we are not web developers we are Software Mechanics (http://www.brandonsavage.net/the-mechanics-of-code/)

Chosen – JQuery Love for HTML Select Fields

If you develop applications with HTML select fields you know that anything longer than 10 options is a recipie for customer complaints, and usability nightmares, well the guys of Harvest (http://www.getharvest.com) provide Chosen a way to make select fields more useable, searcheable with even a Facebook like select for multiple options. This is also used in their timesheet and invoicing software.

You do not need to change your application, just:

a) Include their Javascript file

b) Add add a “chzn-select” class to your select fields

c) Call $(“.chzn-select”).chosen(); to initialize and you are good to go.

My Take – Top 10 Reasons Why Firefox is still Better than Chrome for Web Development

This my take on the topic started at http://tinyurl.com/3fhw7hb from personal experience.

My reasons are below:

1. Firebug – the defacto standard for web development troubleshooting, along with plugins like Google Page Speed, FirePHP, etc

2. Web Developer- another great extension, allows use of lines, clearing cache, disabling Javascript and cookies etc.

3. Other plugins –

4. Firefox 4 is almost at par with Chrome on speed and memory usage, so there is not much difference

5. Easier installation – I can control where I install Firefox not chrome, and I can also have different versions of Firefox, older versions as well as betas and bleeding edge nightlies

6. Profiles – one for development, a clean one for testing, a loaded one for day to day work, almost like virtualization

7. Brief – RSS feed reading extension, the best that there is

8. Configuration – almost the same as Chrome so no advantage here

9. Better memory usage in Firefox 4 which is almost at par with Chrome

10. Its been around longer so I have more experience with it

%d bloggers like this: