Designchuchi Blog

DC Template Manager

2009-03-11T17:03:14Z

ExpressionEngine offers the possibility to save templates from the database as files. The biggest advantage of this approach is being able to edit the templates in your favourite editor. Unfortunately, to date there is no built-in mechanism in ExpressionEngine that allows you to perform bulk-operations in order to synchronize your files with the database. DC Template Manager offers a convenient way of moving the contents of many templates between the database and the filesystem simultaneously.

Download DC Template Manager 1.0.1

Overview

The Template Manager module offers functions for bulk-updating templates either in the database based on the filesystem versions or vice versa. The following list shows what operation you can perform on multiple templates and what they do in detail:

Files => Database: This saves the content of the template files (saved in the file-system) back to the database. Before overwriting the contents in the database, a new revision with that content is created. This ensures that no data in the database is overwritten without a backup. The module also checks whether the version saved as a file differs from your current version in the database and only synchronizes templates that have differences.
Database => Files: This function is identical with the Save As File function in the template editor — except that you can perform it on as many templates as you like simultaneously.
Delete All Saved Files: This function deletes all templates from the file-system that were saved as files. The setting Save As File is set to no for the selected templates.

Screenshots

{screenshots}

Installation

Download the DC Template Manager module.
Unpack the archive contents to your Desktop or to a location of your choice on your hard-drive.
Copy the system/modules/dc_template_manager folder to your system/modules directory.
Copy the language/english/lang.dc_template_manager.php file to your system/language/english directory (or duplicate and modify for any other language).
Copy the themes/dc_template_manager directory to your themes directory on your server. This usually resides in /themes.
Optionally you can also install the extension in this addon. The extension currently offers no additional functionality, but if you have installed the LG Addon Updater extension it can call home and check for updates of the DC Template Manager module.

Copy the extensions/ext.dc_template_manager.php to your system/extensions directory.

Feedback

This module / extension combo has been tested to work with ExpressionEngine 1.6.6 and higher. Many of the important template handling functions were taken and adapted from the EE codebase. Should you encounter a bug with a lower EE version, please let us know. However, we encourage you to update your ExpressionEngine installation for your own sake.

Changelog

0.9.1

Added bulk-update functionality to synchronize file-bases template changes with the templates in the database.
First private beta (testing release).

0.9.2

Added themes folder and icons.
Added template managing functionality to the interface (template overview).
Added bulk-saving as file capabilities.
Added CHANGELOG.

0.9.3

Added bulk-delete template files function.
Renamed module from "Updater" to "Manager".

0.9.4

Fixed a bug where during files > DB sync template data differences would not be shown to the user for revision.
Fixed a bug where wrong template data was saved during files sync in revisions.

0.9.5

Added extension as a module combo.

0.9.6

Fixed an extension hook bug where this extension would ignore preceding extensions accessing the same hook.
Added LG Addon Updater support to the template manager extension.

1.0.0

Added donation button.
Fixed wording in some error messages.
First public release.

DC Feedback Boxes

2008-10-30T19:15:43Z

Most website today are interactive – transfer of information is not only one-way but two-way. User are interacting with content: adding, editing and deleting stuff. A common concept these websites (should) have is user feedback for interactive actions. This sort of user feedback is most of the times realized with different colored boxes somewhere near the content that is manipulated. We created some standard XHTML feedback boxes with some custom icons – if you like them, use them.

Download DC Feedback Boxes 1.0

In the following image you can see the included icons:

Usage

What? You need a How To? Okay. It's simple: Just include the CSS file in your HTML document and write the following:

<div class="feedback info">Some feedback information</div>

This would then display a blue information box. For a validation error box use:

<div class="feedback validation-error">
    <ul>
        <li>Some error in the form</li>
        <li>And another one</li>
    </ul>
</div>

You get the idea. The following classes are available for you to use:

info
success
error
warning
validation-error

Included in the download is an example XHTML page with all feedback boxes, a CSS file, the icons in PNG format in three different sizes plus the Adobe Fireworks source files of the icons. If you have any questions or wishes or recommendation leave a comment. You can distribute, remix, tweak, and build upon the files.

DC Feedback Boxes are licensed under a Creative Commons Attribution 3.0 Unported License.

DC FreeForm GeoIP Extension

2008-10-30T10:46:54Z

Fresh from the coding factory comes a new, handy extension. Ever wondered where a visitor who just filled out a FreeForm on your ExpressionEngine website came from? Now you can stop wondering and start spying!

Download DC FreeForm GeoIP Extension 1.0.3

Overview

If you've ever come across the challenge to create a form with more than the default contact form fields in EE, chances are very good you know Solspaces's FreeForm already. For all of you who don't this would be the ideal time to have a look at the FreeForm product website as well as the documentation page of this EE module.

In Short: with FreeForm you can build completely customized forms, managing the posted entries and user or administrator emails all from ExpressionEngine's control panel.

What FreeForm does not support out of the box is providing information about where the visitor who just filled out your form comes from or what his IP address is. Sure, you can define an IP field in FreeForm and a hidden input field in your form that will pass the IP through the form so that you can include it in your admin emails. With this extension, you have the possibility to either automatically append not only the IP address of your visitor, but also the location data belonging to that IP address.

You can also use the {ip_location_data} in those admin email templates you want to have location data included while turning of the automatically append feature.

Currently, this extension uses the free geolocate API from http://www.hostip.info to retrieve the location data for an IP address. However, we've added a hook for developers to be able to use another service if they wish.

Requirements

You need to have the Solspace Freeform ~~2.6.6~~ 2.7.1 installed, this extension won't work with any older version of FreeForm.
As of this writing, Solspace does not provide the appropriate hooks for changing the contents of the email being sent to the admin in their latest FreeForm release. Solspace has however released a bug fix for this, you'll need to grab the mod.freeform.php file from this post and overwrite the one from the official release.
CURL for PHP enabled

Installation

Download DC FreeForm GeoIP Extension.
Unpack the archive contents to your Desktop or to a location of your choice on your hard-drive.
Copy the extensions/ext.dc_freeform_geoip.php file to your /system/extensions directory.
Copy the language/english/lang.dc_freeform_geoip.php file to your /system/language/english directory (or duplicate and modify for any other language).

Activation & Settings

This extension does not have any special activation requirements (except for the requirements in order for it to run). Follow these steps to activate the extension in your EE installation:

Log in to your EE control panel
Go to System Administration > Utilities > Extensions Manager and enable extensions if not enabled already
Enable DC FreeForm GeoIP extension

Currently, there are two settings for this extension:

Automatically append IP Location Data to notyfication emails: When set to yes, the ip location data will automatically be appended to the admin notification emails. When this is set to no, you can control where in the emails the location data shoulda appear by placing {ip_location_data} somewhere in your email template(s).
Check for updates : When set to yes, the extension will automatically check for updates. You need to have Leevi Graham's LG Addon Updater extension installed and enabled for this.

Developers

This extension provides a hook for other extensions to change the way how the location data for an IP is obtained and what is returned. The usage is very straight forward, all you need to do is implement the dc_freeform_geocode_ip hook in your extension and return whatever should either be appended to an email or replaced withing the {ip_location_data} tag in your admin email template.

We've provided a sample extension that uses this hook. Please not that if you have several extensions using the dc_freeform_geocode_ip hook, data from the last extension processed (according to the priority of the hook) will be used, but having more than one extension that delivers the location data probably does not make any sense anyway.

Download DC FreeForm GeoIP Extension Sample

Feedback

This extension has been tested to work with Expressionengine 1.6.4 and 1.6.5 and should be compatible with EE 1.4.0 or greater and most modern browsers. If you find a bug or have another feature request for this, post a comment about it here and we will be more than glad to fix or consider it.

Changelog

1.0.0

Initial internal release

1.0.1

Some minor bug fixes
Rewrites of private functions

1.0.2

Added support for LG Addon Updater

1.0.3

Added CURL parsing of ip data from http://www.hostip.info
First public release

Constraints, Creativity and Webdesign

2008-08-06T08:17:28Z

In many heads, constraints, of any sort, are still viewed as the great enemies of creativity and fantasy. I wish to show that the contrary is the case, that constraints are a vital part of creativity and that they ultimately lead to better design. This concept is not only true in web design, but everywhere where creativity plays a role.

Defining a New Style

Let’s make a little excursion. The time is the so called golden era of Rap: the end of the 1980’s, beginning of the 1990’s. The setting: New York.

In 1987 the company E-mu Systems brought the SP-1200 to the market: a device that was drum-machine and sampler in one. One of the major advantages of the SP-1200 was that one could construct most parts of a song directly on the device. Because of this, studio cost could be reduced dramatically and artist had much more control over their sound because many or even all parts of a song could now be realized without the help of studio engineers. The downside was however that the device came with many constraints: it only had a resolution of 22 KHz and a sampling rate of 12 Bits. Also, it only had memory to store about 10 seconds of samples. Music producers who wanted to use the SP-1200 had to get very creative to overcome these constraints. And they did. To overcome the problem with the 10 seconds sample time, for example, 33 1/3 RPM samples were recorded with 45 RPM and additional with a higher pitch, then they were played with a much slower speed on the SP-1200 thus artificially prolonging total sample time. This and other constraints of the device and, more importantly; how people dealt with them, lead to the famous New Yorker Hip Hop sound of the golden era. The crunchy digitized drums, choppy segmented samples, and murky filtered baselines, which defined a whole new style, were the result of creativity triumphing over constraints.

Artist and Web Designer

How can this effect of constraints, that they challenge to find creative solutions, be leveraged? Let’s look at another example:

Imagine an artist. He wants to create something, he wants to expresses something. What this is, he doesn’t know exactly, he can’t express it in any form yet. He has total freedom in every aspect of his creation: he could create a sculpture, he could write a book, a song, he could paint. Since he has no constraints, except his feeling of what he wants to express, he will need many trials. He will fail, start new and try again. He first has to find out what this feeling is exactly. If he doesn’t set strong constraints for himself, the birth of this work will be painful and take a long time. In the end he might have created the greatest work of art ever, but the process of getting there will have been very rough.

Now imagine this artist as a web designer. He now has a client and deadlines to deal with. If he continues to work the way he did before, the project is doomed to fail. There might be a website in the end, but there will be frustration on both sides—his and the clients.

The Client is not the Enemy

How can a web designer avoid scenarios like this? How can he avoid staring at a blank canvas, trying to find out what to do? He sets constraints for his projects. Having constraints requires him to be creative in dealing with them. He has to come up with a solution which satisfies all of them. The beautiful thing is: he doesn’t even have to set constraints himself; he has a client who can provide them.

Remember: the client is not the enemy. He maybe has no idea about design and the web, yes, but that’s the web designer’s job anyway. He should embrace the client and ask him to give clear defined constraints. This process will help not only the web designer, but also the client: to find out what he really wants and to retrieve requirements for his site he maybe hasn’t thought of. This in turn avoids that too much additional requirements will turn up in a later phase of the project, where costs for implementation are mostly much higher.

Content is King

One of the most important constraints a designer can get from his client is content. Content has to come first. Before he starts, the designer should have talked to his client about what content he wants on his site. This may seem like a trivial fact, but there are still many clients and web designers who look at design as something separated from content. In their heads, the process of creating a website is the following: first we create a design then we just fill in content - done. This can only work by luck. With precise information concerning content, the web designer receives important constraints regarding the layout of the site. He knows what the layout has to be capable of. A simple example: the client wants photographs above the text on every page, except on some special pages. So the layout has to be flexible enough that both variants will look good and don’t break anything.

Project Phases and Constraints

Other examples of constraints for the layout a web designer should inform a client about and agree with him on are constraints concerning screen size (developing for 800*600 or 1024*768 pixels or higher), placement and size of advertisement, should the layout be centered in the browser or left-aligned, etc. These constraints give the web designer clues on how to set up a grid for the site. The grid will then be another constraint, which he can use to further layout the site. With a grid and content information he can create wireframes, which are in turn constraints for the next phase and so on.

This process of designing helps both the client and the web designer. The web designer has a certain amount of steps he has to go through and he can check with the client on all these steps if he is still on track. If the client just gets confronted with a finished design of his site, the chance of him really liking it is purely luck, and chances are very low: if he didn’t give at least some sort of constructive input, he will not feel to have been involved enough, it will not feel as if the site represents him enough. That is also the case, when a client tells a designer to do “whatever he wants”. Clients should be involved as early and as much as possible.

Other constraints which should be considered on every project and should influence design decisions are: usability, accessibility, cross-browser compliance and industry standards

Leveraging Constraints

As we have seen, constraints, in the right form, are creative opportunities. If you are stuck in a design process, check for constraints; they can give support and new orientation and ultimately spark creativity when dealing with these limitations. Dealing with constraints creatively will lead to innovation.

Let me finish by quoting two people, an existential psychologist and a professor of religious studies, working in fields not really related to web design, nevertheless with a similar message:

Creativity arises out of the tension between spontaneity and limitations, the latter (like the river banks) forcing the spontaneity into the various forms which are essential to the work of art or poem.
– Rollo May

It is possible for there to be a dance with life, a creative response to its intrinsic limits and challenges
– Sharon Welch

Inspiration, Sources and More Information:
The Dirty Heartbeat of the Golden Age [villagevoice.com]
Constraints and Creativity [teehanlax.com]

DC Required Category Extension

2008-06-03T14:30:44Z

Oops we did it again! Once stared, you might think you cannot stop it—only one day after we published our first extension for Expressionengine we came up with the second one. What's in it for you this time? An extension which allows you to define which weblogs must have at least one category assigned when submitting new entries.

Download DC Required Category 1.0.5

Overview

In Expressionengine, as in most of the CMS on the market, you can tag your entries with custom categories, you can define a default category for new entries but what you cannot do (as of this writing in EE 1.6.3) is to make the categories field required. Based on one and another post in the Expressionengine forums, we decided that this is not only useful for our clients, but also for other EE users out there.

With this extension, there's a setting for every weblog which specifies whether categories are required or not for posts in that weblog. If a user tries to post or edit a weblog entry which in a weblog being set to require a category association, an error is triggered and shown to the user at the begining of the plublish form.

The extension has now officially been accepted by the Expressionengine development team and featured in the EE extension repository.

Screenshots

{screenshots}

Installation

Download Required Category Extension.
Unpack the archive contents to your Desktop or to a location of your choice on your hard-drive.
Copy the extensions/ext.dc_required_category.php file to your /system/extensions directory.
Copy the language/english/lang.dc_required_category.php file to your /system/language/english directory (or duplicate and modify for any other language).

Activation & Settings

This extension does not have any special activation requirements. Follow these steps to activate Required Category in your EE installation:

Log in to your EE control panel
Go to System Administration > Utilities > Extensions Manager and enable extensions if not enabled already
Enable Required Category extension

The settings for this extension reside in the weblog preferences for each weblog Weblog Administration › Weblog Management › Edit Weblog

Posts in this weblog require at least one category?: sets categories as required for this weblog. Valid values are Yes or No, default value is No
Maximum number of categories: defines a maximum for categories count. Default value is 0 (No Limit)
Number of categories has to equal the maximum: the category count has to equal the maximum. Valid values are Yes or No, default value is No

Feedback

This extension has been tested to work with Expressionengine 1.6.3 and should be compatible with EE 1.4.2 or greater and most modern browsers. If you find a bug or have another feature proposal for this, post a comment about it here and we will be more than glad to fix or consider it. There is also a discussion on the ExpressionEngine forum going on with regard to this extension.

Changelog

1.0.0

Initial release.

1.0.1

Fixed offset bug when using "Update & Finished" in weblog administration.

1.0.2

Added support for SAEF.

1.0.3

Added features to make limit category to one entry.
Refactored the way how settings are stored and checked.

1.0.4

Added category maximum feature.
Added exact category number feature.
Improved packaging by using README & CHANGELOG files

1.0.5

Added support for LG Addon Updater extension.
Fixed a small bug where obsolete (duplicate) error messages were shown.

URL Field Extension for Expressionengine

2008-06-02T12:04:44Z

Not so long after moving our old website to Expressionengine during the relaunch on May 1st, the big brain engineers at Designchuchi came up with their first EE extension. Fresh from our coding factory comes the URL field extension for EE. Read up on what it does and how you install it.

Download URL Field Extension 1.0.5

Overview

After reading this post over on the Expressionengine forums we decided to give this a try! The idea was to create a custom field to facilitate the entering of external links in weblog posts.

The features of this extension are very simple and straight forward. You can add a custom weblog field with type "URL Field". This field is being displayed on the edit entry form as a textfield with a small icon on the right-hand side. Clicking on this small icon first checks if the URL is empty or if the http:// protocol is missing and triggers a javascript error in that case. Furthermore, if the URL format is valid, it opens a new window with the entered URL so that editors can double-check it before posting.

The extension has now officially been accepted by the Expressionengine development team and featured in the EE extension repository.

Installation

Download URL Field Extension
Upack the archive contents to your Desktop or to a location of your choice on your hard-drive
Copy the extensions/ext.dc_url_field.php file to your /system/extensions directory
Copy the language/english/lang.dc_url_field.php file to your /system/language/english directory
Copy the images/icons/link_go.png file to your images /images/icons directory (you will probably have to create the icons directory).

Activation & Settings

This extension does not have any special activation requirements. Follow these steps to activate URL Field in your EE installation:

Log in to your EE control panel
Go to System Administration > Utilities > Extensions Manager and enable extensions if not enabled already
Enable URL Field extension

Since version 1.0.1 you can use two settings for your URL Field extension:

URL Field Width: sets the width of the field on the publish page. Valid values are either px or %, default value is 300px
Path to Icon: path to the small icon shown on the side of the URL field, has to be relative to your EE installation, default value is /images/icons/link_go.png. You can specify any custom icon you want here.

Feedback

Changelog

1.0.0

Initial release

1.0.1

Added settings for text-field width.
Added settings for custom icon.

1.0.2

Code cleanup.

1.0.3

Fixed default icon path bug.
Performance optimization, only one database call for all URL Fields. This probably won't have any big impact on the usual EE installation, but in installation where we have many (and we mean many) URL Fields, there should be a performance benefit.

1.0.4

Added a simple Regex validator instead of just checking the http:// at the begining of an URL.
Fixed bug that was introduced with EE 1.6.5 where custom fields with formatting set to NULL would have 'xhtml' formatting by default. Fixed this by enabling the formatting menu when creating this custom url field.

1.0.5

Fixed bug where formatting setting for the field would be ignored for new entries. http://expressionengine.com/forums/viewthread/96291/

Update your Readers!

2008-05-24T13:47:19Z

Are you guys still working on this? The answer is simple: yes, we are. We're constantly trying to make our site better, that's why we decided to burn it all—well, not exactly burn, but sort of.

Burn them all!

We're moving from four separate and similar feeds to just one—to rule them all. So what changed? We used to have four feeds in two different formats, namely RSS and Atom with summaries and full posts for each one of those two. We're not going to argue which format we prefer over the other and why but we feel, that most of today's feed readers can cope with both them—RSS and Atom. This is why we're going to have only one feed for our blog in the future, one feed, but with more features.

Using the FeedBurner services, we're able to serve just one feed compatible with most readers, providing you a much simpler feed URL, additional features like email subscriptions, web services pinging, easy tagging with social bookmarking websites and others. So for now and hopefully forever, please use the new feed URL below to subscribe to our blog feed.

http://feeds.feedburner.com/designchuchi

Does it all work?

It should, but you know how unpredictable computers sometimes can be nowadays, even if it's mostly our fault. If something is not working as it should, post a comment about it and we will put our big brain engineers on it right away, and now have a nice weekend!

We have been featured!

2008-05-17T09:22:13Z

It's been over two weeks now since we relaunched our website and we've received great feedback so far. Many thanks to all of you who gave us the input!

Showcase Sites

Yes, we made it—again! We did not only make it through the joyful (but sometimes also painful) process of redesigning and relaunching our website, but we also scored some entries in various CSS showcase websites on some of which we even we're picked by the editors. Considering the fact that during the last years so many showcase websites sprang up like mushrooms, here's a short list of those we took notice of featuring us.

Have you spotted us?

Have you seen our website being featured somewhere else on the web? Do you have any feedback for us? Post a comment about it, now we're off to have some lunch.

Follow us on Twitter

2008-05-07T07:19:00Z

Sometimes we have to say something and if we do, you now can be there without missing it! Become a follower on Twitter now!

We'll likely be using this also for our blog and project updates in the future or, in case of emergencies, to send out our distress calls.

About Twitter

Twitter is a free social networking and micro-blogging service allowing you to send updates to you account either through their website, instant messaging service, your mobile phone or one of many standalone applications.

Messages sent are displayed on your homepage and can be retrieved by others either using instant messaging, SMS, email, RSS or also through a software application.

May 1st Reboot

2008-05-01T12:13:00Z

It's May 1st and like every year since 2000 this means it's time to reboot! Well, almost every year. Nobody knows what happened in 2003. Our guess: aliens, tired of probing cows and other paranoid people, were on the lookout for new subjects to abduct and probably took an interest in the next species up the food chain: web designers.

Anyhoo, what is this reboot you ask? Let's ask the mighty pink website:

May 1st Reboot is an international relaunch of web sites by authors and creatives working within the field of Web Design. As a collective event it makes a manifest demonstration of the very idea of community. It is, quite simply, an indeterminate group of designers subscribing to one event in order to publicize their work at one specific time across any number of different locations. And it is in that sense that it is most interesting to us, and by extension to those who are, or will be, involved with the world of Web Design.

Designchuchi and about 100 other websites thought that this is a good idea and rebooted with new designs and layouts at exactly 14.00 GMT today. What you see right now, is the result of our participation in this global event.

We tried to make this website as widely usable as possible — this means also backwards compatible with the best line of browsers ever. So if you happen to surf this website and find some bugs, please don't hesitate to tell us right away and we will be happy to fix them.

Now excuse us, we are off to check out all the other new web sites!

A Long Way To Go

2008-04-30T15:08:00Z

It's been a while since we finished the last new version of our website back in September 2005. Back then, we were still handcrafting the entire website from scratch — going from the idea through layout to the complete, dynamic website. So what changed since then? There's only one good answer to this question: a lot!

Version 1

Version one was built completely from scratch. Not only because it was fun and at that time, being a computer science students was not funny enough, but also for the learning effect to be as big as possible, you have to build it from scratch — at least something, at least once — and by from scratch we mean using the Coffee API, built together with a friend from the university, for all the PHP code, some text editor you're familiar with for the HTML and CSS and a bunch of graphical tools for all the adhesive tapes we needed to keep our content from falling apart.

As instructional such a process might be, in the end it also needs to be rewarding and luckily for us, it was! Not only were we listed on the most of the well known CSS galleries, received an award and great feedback, but we were also able win many new clients and even score an extensive report in a book on webdesign published in Japan (more on this in a separate blog post soon).

For all techies among you, the source code of Designchuchi v1 can be accessed through SVN on Houston [Unfortunately we did miss the 200th revision by one].

A long way to go

In 2005 Prince Charles married Camilla, the global warming started to become a scientific fact and an unresolved problem, later "we" became Time's Person of the year 2006 and Federer was leading the world of sports. So what changed since the year 2005? Well, Prince Charles is still married to Camilla, the global warming is still an unresolved problem getting bigger and bigger every year, Federer is still wining his tournaments and Vladimir Putin took over the Time's Person of the Year — and we changed.

We changed the way we do our websites, we evolved and with us our products. We took a long time before coming up with this new website. Why? Because we wanted it to be good, we wanted it to be at least as good as our last but with more features. We wanted to have a platform we could use to publish things we learned and give it back to you.

Outlook

Is there more? Well yes, there definitely is! We built this page twice, using one of our favorite systems, Drupal and Expressionengine, one time and another. Yes, we're a design company and we're on the chase for clients but we also want to give something back — that's why you can look forward to read some interesting articles about those two systems, how we used them to build this site, why we chose EE over Drupal for this project but not others, what custom modules we wrote for Drupal in our projects and why we're looking forward to have our master degrees.