Archive for the ‘css’ Category

30 Jan

Tech Tip: Websites on Github with Jekyll

Posted by ssmusoke in content management systems, css, git, html, innovation, mobile computing, opensource, responsive design, social media, software development lifecycle, styx technology group, technology, tips and tricks, web development. Tagged: , , .

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

9 Apr

HTML Web Toolkits – Twitter Bootstrap

Posted by ssmusoke in chrome, css, html, opensource, responsive design, software development lifecycle, tips and tricks, twitter-bootstrap, web development. Tagged: , , , .

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 

19 Oct

Chosen – JQuery Love for HTML Select Fields

Posted by ssmusoke in css, html, opensource, software development lifecycle, tips and tricks, web development. Tagged: , .

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.

20 May

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

Posted by ssmusoke in chrome, css, firefox, html, opensource, web development. Tagged: , , .

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

18 Nov

Google Need for “Page” Speed – The Web Developer’s Arsenal

Posted by ssmusoke in css, database, firefox, mysql, php, web development.

Google the king of search has made the speed of websites and page loading a key actor in ranking. This coupled with the need to use 3rd party frameworks for front end development, like JQuery, MooTools, Scriptalicious, Yahoo YUI, to support the multitiude of browsers has a larger burden web developers.

In true fashion however, the release of the Page Speed addons for both Firefox and Apache, http://code.google.com/speed/page-speed/download.html, somewhat simplify this process.

We have developed a custom web application for a client, and it seemed that the pages were loading very slowly and performance was not acceptable. The approach that we are using to improve performance is three fold:

1. User Interface focused on browser improvements

– GZip all resources – using an Apache .htacess file

– Force caching of resources – expire all resources in the future, and require public cache (images, css) and private browser caching (javascript files)

– Minify CSS and Javascript files, and also combine each type into a single file to reduce the HTTP requests to load the page using Minify (http://code.google.com/p/minify/)

– Minify HTML contents when the page is loaded

2. Business Logic Enhancements

– Add an SQL lite cache to Doctrine resultsets and queries

– Reduce the number of components which are regenerated at the server back-end

3. Database Enhancements

– Use the smallest possible column types for each table – this is diffcult in some cases since the requirements are being identified as the application is being used

– Query performance – the tables have to be kept in 3rd normal form, therefore reporting performance will be affected. As the reports grow more complex, we will keep reviewing this

This is a continuous process so we keep measuring at each point, however each step leads us further into the depths of tuning and performance

The need for speed is now, the question is how far are u willing to go?

« Older Entries