Posts Tagged ‘web development’

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

Uganda Web Developer Workshops: Rotary Style – Idea looking for Partners and Direction

This is an idea that has been growing in my mind, and I seem to finally have a handle on it. I have been a professional PHP web developer for the last 12 years, and have gone through the learning and transition cycles from learning a new language from Visual Basic 6 and MS Access to Java/JSP/Servlets to PHP, and developing in the language from direct database access using mysql_query through a custom developed database class into Zend Framework for 2 years with Doctrine 1 and 2 ORMs.

My biggest challenge has to do with the fact that there are no places to go and talk code, PHP/Javascript/Database in Uganda, along with the experiences and challenges facing web development with “need-to-have” practices like:

  1. Refactoring
  2. MVC design for web applications
  3. Version control – branching, merging, version tagging and management
  4. Testing – unit and functional testing, load testing
  5. API development (okay this is pushing the enveloper)
  6. Continuous integration, code quality metrics – complexity, modular development, cyclomatic complexity
  7. Team Style development – PSR 0 and PSR 1 compatibility
  8. Frameworks – Symfony, Zend Framework, Kohana, JQuery, Twitter Bootstrap
  9. Advanced CSS and HTML 5 – style guides, browser targetting, mobile development

I am also looking at doing this Rotary style, 1 hour developer meetings once in 2 weeks, then later once a week, same night, same location.

The bottom line is that we develop the quality of the available pool of web developers by growing a community, having role models, to also put a brighter face on the industry, improve perceptions and make it clear that this is an area that has professional practices. It is a win-win for all involved

Any ideas who has done this before, what were your challenges and trials, who would like to partner on this?

The Poor Man’s Job Queue

Not all software development projects are treated the same, some have access to modern tech Virtual Private Servers (VPS), Zend Server (http://www.zend.com/products/server/), Memcached, Gearman and all the other goodies I can only dream of. You have a box with LAMP, and you cannot install anything else.

This is an example of how we got around a limitation, using available tools. Problem: I have a list of tasks to execute within my application, however I need to ensure that the tasks are executed and completed, but some are more important than others, and the execution may slow down the performance of the box we are running on. Well in this case we were loading 6 different types of XML files which were FTPed into a location on the box regularly, every 35 minutes and had to be loaded in a specific order. This was further complicated by the fact that we had to reload historical data in case of issues (1 weeks worth of uploads ~ 2100 files) without interrupting the current loading processes.

The approach used the following components:

a) Job Queue – based on the Zend Server Job Queue but simplified for our needs (see data model of tables below)

Job Queue Data Model

Job Queue Data Model

b) Queue Loader Script – loads the jobs into the job queue by scanning the location containing the files to be loaded and adds the files to the queue (since the queue is a database table, duplicates are discarded without errors) This keeps this file simple and honest

c) Job Executor Script – reads a message from a queue, reads the message body which contains the file name to be processed, could be made more complex

d) Queue Loader Cron Job – calls the Queue Loader Script to add new files to the queue

e) Job Executor Cron Job – calls the job executor script. This job has no effect if a lock file exists, and is not expired which means the script is valid and running. However if the lock file is expired, it means that the process crashed, so the lock file is deleted, a new process is started with a lock file. Basically this keeps the job executor script running indefinitely as long as there are messages to process. 

Please feel free to leave a comment on what your experiences are with similar problems. 

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 

Doctrine2 Day 3 – Proxies, Associations, Relationships

Well if you are following this series, then by know you are aware that we have the validators setup, and we are almost ready to go. Well not quite so. I ran into an issue with proxies and class loaders which took a while to resolve, but what I did was:

a) Changed the Zend Framework-Doctrine2 integration to the Bisna integration (https://github.com/guilhermeblanco/ZendFramework1-Doctrine2) – note the additional configurations before

b) Learnt that DO NOT SAVE ANY MODELS IN SESSION OR CACHES due to Proxy auto loading issues

c) Develop unit tests for the model validations and saving as you go along because they will save you as you shift things around . I am currently trying to save an association to the database but due to the tests that I have running I can test out the different association mappings without issues because I track the changes using my unit tests.

Now onto relationships, well what I found was a follows:

  1. I have been having a tough time dealing with relationships from Doctrine 1 which autoloaded relationships, however with with the Doctrine2 data mapper, you have to auto load the associations your self
  2. In Doctrine 2, you cannot define the foreign key column and relationship as this creates problems for the ORM mapper, so since I need to access the foreign key value for example personid, and the related object person, my approach has been as follows:
    • Added a person instance and relationship mapping to the person as per the Doctrine
    • Add a setter setPersonID() which loads the Person from the database using the provided ID and sets it to the person relationship provided
    • Added a getter getPersonID() which obtains the id of the person for use on the screen
  3. As recommended avoid bi-directional relationships where possible, try to keep them as uni-directional as possible.

Next I will be implementing a nested hierarchical structure using the tree nested set implementation at http://www.gediminasm.org/

%d bloggers like this: