Archive

filtered by HTML tag

The Wayback Machine

We have outsourced the cognitive load of our collective memories to the Internet Archive’s Wayback Machine. I am thankful that they exist. My memory is not what it used to be. Even then, my memory has been terrible.

Graphic design has been a way to preserve knowledge in a format that I can more easily retrieve later. If I had to rely only on my brain, my memory would have failed me long ago.

Read the full article

Sites

Websites in various stages of design, development, and production

Codepen

Read the full article

Rendering the Symphony admin with XSLT

@kanduvisla opened an issue about the possibility of rendering the Symphony admin pages with XSLT.

Symphony 3 had been developed to make this possible.

Read the full article

Preprocessors for HTML

Tools for Front End Design

CSS preprocessors are all the rage these days. Chris Coyier is musing about them. Stephen Hay uses them in his Responsive Design Workflow. The very popular front end design frameworks, Twitter’s Bootstrap and Zurb’s Foundation, use LESS and SASS, respectively.

Read the full article

OmniGraffle XML to HTML

There are times when people will use a tool with a graphical user interface (GUI) such as OmniGraffle that provides an easy way to create an illustration of a complex structure such as a site map for a website. The output can be a file such as a PDF. It turns out that this PDF file does not contain text that can be selected, copied and pasted. For anyone wanting to reuse this data, this might mean having to recreate the structure by retyping it.

Thankfully, OmniGraffle includes the ability to export an XML file. The structure that is described by the diagram is exactly what one would want to recreate it in HTML.

Read the full article

CSS Weekly Bar Charts

We were tasked with the challenge of building a site that could get people in the mind of improving their health. With the subject of wellness in mind, we would build a site that would enable participants to bring together teams of people who could encourage each other to focus on improving each other’s lives through specific challenges. One challenge would be a step challenge.

In the development of the application, I came up with a layout that incorporated views of an individual’s progress over a certain number of days and weeks. When I was dreaming up how the data should be visualized, I looked up examples of CSS bar charts, and Eric Meyer’s CSS Vertical Bar Charts showed up in the search results. Well, that gave me some confidence to mockup a solution that could rely primarily on some already documented methods to represent bar graphs with CSS.

Read the full article

Experimental

The reason for this site is my lack of organization as far my ability to remember all the projects that I have on the go. I am the Absent-Minded Designer.

So, in an effort to keep up to date on the latest developments and to evangelize the merits of Symphony and XSLT to my colleagues at Domain7 and the Web Standards / Open Source development community, I will be trying to keep an ongoing log of my work, experiments and discoveries. Let’s see how long this experiment lasts.

Read the full article

XSLT Static Site Generator

For a project where our agency was contracted to design and deliver HTML, CSS and JavaScript to the client, I created a static site generator as a means of quickly prototyping web page layouts as static HTML files, while still being able to maintain all the features of the layout that we intended to deliver to the client, such as current classes on selected navigation items.

The best way to deliver quality code to the client was to rely on a W3C standard for templating: XSLT. Rather than have to manually edit pages across the entire set of layouts, I was able to run a series of commands on the command line to generate the pages for the site. Because these commands rely on xsltproc, which is already available out of the box in any UNIX-based system, including Mac and Linux, it was a great way to use HTML preprocessing in our front end development process.

Read the full article