Pinboard: bookmarks for michaelfox tagged 'design'

Front-end Maintainability with Sass and Style Guides | Engine Yard Ruby on Rails Blog

At Engine Yard, the User Experience team works frequently on the front-end (HTML & CSS) of our application, AppCloud. It’s also common that our Ruby developers write front-end code as well. When the UX team began realigning the AppCloud UI, it involved refactoring the HTML & CSS for better efficiency. We also created a style guide to document the new front-end architecture. We’re sharing the methods we’ve used and how it’s helped us to work more efficiently on the AppCloud UI.

compass css inspiration sass scss design styleguide
march 2011 by michaelfox

copy to mine

Dependency injection - Wikipedia, the free encyclopedia

Dependency injection (DI) in object-oriented computer programming is a technique that indicates to a part of a program which other parts it can use, i.e. to supply an external dependency – a reference – to a software component. In technical terms, it is a design pattern that separates behavior from dependency resolution, thus decoupling highly dependent components.
Developers of software strive to reduce dependencies between components for various reasons. This leads to a new problem, though: How can a component know all the other components it needs to fulfill its purpose?
The traditional approach was to hard-code the dependency. As soon as the database driver was necessary, the component would execute a piece of code that would load a specific driver, configure it, and call the necessary methods to interact with the database. If a second database must be supported, this piece of code would have to be modified or, even worse, copied and modified (violating the DRY principle).
The dependency injection offers a solution. Instead of hard-coding the dependencies, a component just lists the necessary services and a DI framework supplies these. At runtime, an independent component will load and configure the database driver and offer a standard interface to interact with the database. Again, the details have been moved from the original component to a set of new, small, database-specific components, reducing the complexity of them all. In DI terms, these new components are called "service components", as they render a service (database access) for one or more other components.
Dependency injection is a specific form of inversion of control, where the concern being inverted is the process of obtaining the needed dependency. The term was first coined by Martin Fowler to describe the mechanism more clearly.[1]

architecture design development patterns programming bestpractices
march 2011 by michaelfox

copy to mine

100+ free HTML email templates | Campaign Monitor

For too long HTML email has been the ugly step-child of the web. It's time for a change, so we teamed up with some seriously talented designers to bring their skills to the world of HTML email.

Every template has been thoroughly tested in more than 20 of the most popular email clients like Outlook 2010, Gmail, Lotus Notes, Apple Mail, the iPhone, and more. They're ready to roll and are completely free.

design email html newsletter templates resources inspiration via:campaignmonitor
december 2010 by michaelfox

copy to mine

altfontprev - Project Hosting on Google Code

AltFontPrev is a JavaScript bookmarklet that allows you to preview how any website would look if a particular font was not available or a different font chosen. Each font used to style elements on the page is listed under its selector and, when clicked, is moved from being a fall-back to being the primary font.

As well as choosing a font from the existing CSS declarations, you can type a custom font to override everything. Hopefully this will help you choose alternative fonts when perfecting your site’s typography.

fonts javascript typography debugging design ux tools testing development snippets bookmarklets
november 2010 by michaelfox

copy to mine

Ultimate Guide to Website Wireframing

Most designers wireframe their designs in one way or another, even if it just involves them making quick sketches on the back of some scratch paper. Wireframing is an important part of the design process, especially for more complex projects.

Wireframes can come in handy when you’re communicating with clients, as it allows them to visualize your ideas more easily than when you just describe them verbally.

This guide covers what you need to know about website wireframes to get started.

design development ui webdesign wireframe planning tools interface ux tutorial bestpractices templates inspiration prototype wireframes wireframing reference webdev resources
november 2010 by michaelfox

copy to mine

Highlight Microformats with CSS | The Hickensian | Hicksdesign

Those that use Firefox with the Tails extension, read no further. This is not for you. You have it given to you on a plate, you don’t know how lucky you are. This is for those of us using Camino, Safari or Omniweb.

After I mocked up an image of how Microformats detection might work in Safari, I started looking at the tools there were available. While there wasn’t anything that handled detection, Tantek did release his bookmarklets to allow hCard and hCalendar information to be exported from a page. Nothing in the region of Tails where you could view a list and choose which contacts/events you wanted, but it worked. This just left some way of handling detection, until I came across Chris Casciano’s script for NetNewsWire to Extract Microformats. It was a simple solution too – use css to style .vcard and .vevent classes differently.

So I’ve knocked up one of my own as a starting point. Here it is in action on Adactio, a rich harvest of microformats to be highlighted:

Example of the highlight microformats css in action

Here’s the file to download: expose-mf.css

It may work better with some designs than others. So far, I’ve not come

css design microformats webstandards semanticweb http semantic uri url canonical href link semantics rdf reference architecture webdev seo data w3c metadata development web snippets
october 2010 by michaelfox

copy to mine

About me « Lea Verou

My name is Lea Verou (actually, in official papers it’s Michaelia Komvouti-Verou, but who can bare to use such a long name in everyday life?) and I’m a front-end web developer currently living in Greece. I am the co-owner of a small company named Fresset Ltd. At the same time, I study Computer Science in Athens University of Economics and Business. I am passionate about JavaScript and CSS3, so this blog is mostly devoted to them. You can email me at me＠leaverou․me (don’t copy/paste the email, it won’t work. Note to self: Must add contact form). Please note however that I am too busy to accept web design/development projects for clients at the time, so if you wanted to contact me about one, don’t bother (unless it’s something quick and interesting I guess).
View my CV
About the blog style:

This was my first second attempt of creating a WordPress theme. Given that it’s a personal project, I promised myself not to pay much attention to the Evil browser (we all know which), especially older versions of it (*cough* 6 *cough*). This theme is heavily based on experimental CSS3 properties, so it will look better in more CSS3-supporting browsers (modern versions of Firefox, Safari, Chrome or Opera). I did devote some time to make it look OK in other browsers but given that this is my personal blog, I wanted it’s design to be fun for me, and browser incompatibilities aren’t much fun, as you probably know already. :P

bloggers bookmarks blogs css css3 design frontend ui ux
october 2010 by michaelfox

copy to mine

A Simple Guide to Five Normal Forms in Relational Database Theory

The normal forms defined in relational database theory represent guidelines for record design. The guidelines corresponding to first through fifth normal forms are presented here, in terms that do not require an understanding of relational theory. The design guidelines are meaningful even if one is not using a relational database system. We present the guidelines without referring to the concepts of the relational model in order to emphasize their generality, and also to make them easier to understand. Our presentation conveys an intuitive sense of the intended constraints on record design, although in its informality it may be imprecise in some technical details. A comprehensive treatment of the subject is provided by Date [4].

The normalization rules are designed to prevent update anomalies and data inconsistencies. With respect to performance tradeoffs, these guidelines are biased toward the assumption that all non-key fields will be updated frequently. They tend to penalize retrieval, since data which may have been retrievable from one record in an unnormalized design may have to be retrieved from several records in the normalized form. There is no obligation to fully normalize all records when actual performance requirements are taken into account.

database design normalization theory reference mysql
september 2010 by michaelfox

copy to mine