Slowly diving into Physics and Mathematics

I was always interested in science and especially in physics for almost as long as I can remember. And I always used to read articles and a lot of books about it.

But I always strayed away from going into the mathematics of it. But that has changed since last autumn.

I started reading a lot of physics books, that not just describe things in terms of text descriptions but also in mathematical formulas.

And I am slowly getting a teeny-tiny glimpse of the depth, the mathematical reasoning and the connection(s) between mathematics and our physical reality.

It is only a very first small step – but I get a deep satisfaction from learning and thinking about it.

The interesting thing for me is, that the impulse for me to do it, is the same one, that motivates me to design or to write code:

Aesthetics — The deep feeling of a connection to beauty and (by all complexity) to simplicity.

Leonard Susskind and "The theoretical minimum" series

For starters, I am reading the "Theoretical Minimum" books series by Leonard Susskind.

I don't remember wearing out books like this. It's not that I read everything once and be done with it — I read everything over and over again, working through it, getting a little bit of better understanding every time.

There are three books of the series (as of now):

• Classical Mechanics
  
• Quantum Mechanics
  
• Special Relativity and Classical Field Theory
  

These books are based on courses that Leonard Susskind gave in Stanford for "normal" people. You can find all these courses on Youtube for your own viewing pleasure. And there are a lot more and deeper courses than the books.

These are not easy by any means, but Leonard Susskind makes them very engaging, interesting, often funny and very human. In his own words: He's trying to make it as simple as possible but not simpler.

And I appreciate the pragmatic way he tries to teach physics to us non-physicists.

Roger Penrose

The other books I am working through are by Roger Penrose. One especially:

• The Road to Reality
  

He's a very deep thinker, a much dryer character than Susskind and has a much more mathematically formal way of presenting things. (He is also much more english.)

A lot he writes about is very much further down the road from what I am able to understand at the moment. But it's a very worthwhile challenge, trying to wrap your head around.

And what I also find interesting: He has a very geometrical thinking mind and illustrates a lot of mathematical ideas through illustrations.

I think his deep connection between visual thinking and mathematics is just beautiful!

Frank Wilczek, Physics and Beauty

A third book that fits into the category aesthetics and physics is A Beautiful Question: Finding Nature's Deep Design by the Nobel laureate Frank Wilczek. I actually read it already in 2018 and this is not mathematical.

But it is about the connection between physics and beauty and maybe it will get you hooked too, to take a deeper look into what lies at the base of our universe.

Physics is amazing! ;-)

Additional reading recommendations

If you don't have the time to read books or watch Youtube lectures, but you are nonetheless interested in science:

I warmly recommend to read the quantamagazine.

Angular Prototype

For some years we consult PSI together with Hesse Design regarding their styles for graphical user interfaces. The classical PSI applications are based on Java, that have a PSI specific styling.

But in the future many more of the application will move to mobile user clients and to webbrowsers, so we had to update the styleguide for the touch and mobile use cases.

To help with the design we developed a new mobile prototype (based on Angular), that works for mobile applications and is also accessible on desktop and tablet user clients, that is optimized for touch:

The PSI Angular Prototype

Light and Dark Themes

Like the desktop applications, there is a light and a dark theme that are optimized for their specific use cases.

With the optimization for touch, we also modernized the styles of the components and their usability and added new components for specific use cases.

To simplify development and style changes all the style sources for JavaFX, for HTML and for the Angular Prototype got synchronized into one SASS source tree.

An example for form components in the light theme

An example for form components in the dark theme

Tables and tabular data

A second important optimization of this project is how to display tables and tabular data for a very varied number of use cases.

There are many different combinations possible:

• The Selection Column helps you to select specific data records to apply actions to them (see screenshot).
  
• The Drag&Drop Column allows you to sort data records by drag and drop.
  
• The Details Column helps you to see details of a data record without leaving the table.
  
• The Action Column lets you apply a specific action to a data record.
  
• The Detail Summary helps you to show data records which would not fit inside a horizontal table on small devices (see screenshot). Tables switch automatically between detail summary and table view based on screen size.
  

Scrollable List Component

The Scrollable List is a custom component that lets you easily scan an big number of data records by touch and to show their details, without the need to open them manually.

The styling for this component is a list of cards, that move over one another and can be used with a flip of a finger.

PSI Mobile Prototype and Styleguide

Finally!

It was a long time coming and we relaunched the Website of singer Efrat Alony:

The Main Website with a Blog

Part of the concept was to have specific mini pages per project.

Especially since Efrat Alony's musical projects sound very different from one another, which seems to lead to cognitive dissonances for some listeners.

She always reinvents herself!

And so will her websites... ;-)

Händel Fast Forward / Project page for Efrat Alony that brings Händel into the 21st century

Project page for the duo of Efrat Alony with Suanne Paul on the cello

The Electro trio of Efrat Alony, Oliver Leicht and Frank Wingold

Efrat Alony's "pop" album: Dismantling Dreams

Alony Relaunch

The new version is here!

We are proud to present the next version of depage-cms.

Some of the new Features

• Enhanced Dashboard
  
• Complete revamp of the Edit Interface
  
• Completely overhauled text editor
  
• New Project shortcuts to quickly add new news- or blog posts
  
• Revamped file library
  
• New editor for color schemes
  
• Enhanced preview to automatically show currently edited language
  
• Enhanced preview to highlight the currently selected document property
  

And last but not least:

There is a new online user manual.

depage-cms v2.0 released

ScriptDock sets Sail

ScriptDock is a social network for screenwriters.

The dig­i­tal age is tak­ing nar­ra­tive cul­ture to the next level. Script­Dock of­fers screen­writ­ers an chance to col­lec­tive tackle com­mon ob­sta­cles. 

In or­der to tap into the di­ver­sity of ideas and well de­vel­oped scripts, script­Dock is ded­i­cated to con­nect­ing writ­ers and in­dus­try mem­bers. 

ScriptDock offers a haven for screenwriters to present themselves, collaborate, network, and to market their work.

The social network for screenwriters

Paula and me founded ScriptDock from two different perspectives with with a common goal.

Paula as a screenwriter and myself as a designer, developer and film lover.

The Question:

How can we use the in­ter­net for writ­ers to con­nect with each other, as well as to pre­sent scripts in good shape to in­dus­try pro­fes­sion­als? 

We would like to of­fer ScriptDock as a plat­tform ded­i­cated to this pur­pose. 

Paula Redlefsen and Frank Hellenkamp

We are happy to welcome you aboard!

The best architects award is one of the most prestigious distinctions for architecture

So it needs a website with a design that is easy, open and does not get in the way of the works that get presented.

Architecture front and center!

the best architects award is one of the most prestigious distinctions for architecture

Submission process

Part of the implementation is also a new submission process, where the architects can submit their works completely online including images and charts that will be screened by the jury.

And the best of the best will be presented online and in these beautiful books that get designed and produced by zinnobergruen.

best architects award relaunch

The umbrella asso­ci­a­tions of the Ger­man Social Insur­ance (DSV) have come together because of their com­mon Euro­pean pol­icy inter­ests to form the “Ger­man Social Insur­ance – Work­ing Group Europe e.V.”

We had the honor to implement their website and to service and administer it with our content management system.

Website for umbrella asso­ci­a­tions of the Ger­man Social Insur­ance (DSV) that have come together because of their com­mon Euro­pean pol­icy inter­ests

Some of special features

• Custom Newsletter generator based on articles posted
  
• Integration of the magazine "Themenletter ed*"
  
• Custom Twitter integration
  
• New full text search
  
• Privacy conscious data handling
  

Launching dsv-europa.de

Using and enhancing (almost) the same development environment for years

VIM for winners

I was surprised when I started my old PowerBook G4 (still on the Mac OS X Tiger) and realised for how long I use (not the same) but a very similar setup for my development environment:

• Mac OS X (now MacOS) plus Linux for Hosting and Services
  
• QuickSilver (now OpenSource)
  
• tmux (and before screen) and of course
  
• vim
  

I basically still use OS X with a similar file structure (I always transferred all data to new machines).

I have a Virtual Machine on Gentoo Linux, which is an very old install from around 2004, which first run on bare metal and which I upgraded perpetually throughout the years. Now it is running in VMware Fusion under A MacOS host and an Mac Mini.

And I am also running a Debian Virtual Machine, to simulate my usual hosting environment, which runs exactly the same software.

And when I startup the old Mac OS X on the PowerBook G4, most of my custom Keyboard shortcuts work the same way, I use them daily:

• Ctrl-Alt-C -> open Terminal App
  
• Ctrl-Alt-V -> open MacVim
  
• Ctrl-Alt-F -> open the development Web Browser
  
• Ctrl-Alt-S -> open the normal Web Browser
  
• Ctrl-Alt-M -> open the Mail Program (Apple Mail or better Thunderbird)
  
• Ctrl-Alt-N -> Write a new Email
  
• Ctrl-Alt-I -> open Calendar
  
• Ctrl-Alt-Y -> open iTunes
  
• Ctrl-Alt-X -> open Finder with the Home directory
  

• Command-Alt-1 - Command-Alt-9 -> Switch between workspaces
  

I always used to hide the dock, and now (since it is possible on Mac OS X 10.11) I also hide the menu bar, because I rarely use it.

This is a setup which makes me very productive, the workflow very predictible (because I can depend on muscle memory) and very very fast.

I also use LiveReload for years.

There are also always new things (various small enhancements of my vim workflow) or some big changes like using docker for testing and hosting all online services.

We'll see what the next 15 years bring

Will I still be using vim (which is older than I am) - probably yes.

And will still be using Linux and Docker containers? Linux - I am sure, Docker - who knows, but I am sure one or the other container solution will stay with us for a long time.

depage-forms: validation of html5 forms (Part II)

Validation of HTML form data

Thanks to the new HTML Standard and the WHATWG Group it is easier than before to have Browsers show standard errors when a user does not provide valid data inside an input element. Unfortunately this only works in newer Browsers, and not in older ones (e.g. Internet Explorer 8).

To make it easier for developers, depage-forms provides an way easy way to add validation to forms that works in all three different places at the same time:

on the server

in the browser, based on the new html standard

in the browser, based on javascript

This is a part of the ongoing series about depage-forms

depage-forms: html5 forms made easy (Part I)

depage-forms: validation of html5 forms (Part II)

depage-forms: subdividing forms into steps and step-navigation (Part III) / Coming soon

depage-forms: subclassing htmlform (Part IV) / Coming soon

Standard Input Elements

Documentation

Fork us/Source-Code

There are various standard input elements that are part of the HTML standard and will be validated by the browser. E.g. input[type=email] and input[type=url]. Other input elements are presented with a different user interface or as native controls like input[type=number], input[type=range] or input[type=date].

depage-forms uses these inputs but extends and enhances the behaviour in various places.

Required Fields

The most simple case for validation happens when an input is required:

/*
 * The most simple validation: 
 * Setting 'required' so that a user has to input *something*
 */
$form->addText('username', array(
    'label' => 'User name', 
    'required' => true,
));
$form->addBoolean('accept', array(
    'label' => 'Accept terms and conditions.', 
    'required' => true,
));

Validation based on type

depage-forms also validates based in the input-type. And you can provide an optional error-message that will be displayed, in case the user does not provide valid data.

/*
 * Validation based on type:
 * The user has to provide a valid email/url for these
 * fields. If the reuqired flag is not set, the user
 * can leave the field empty, but when he fills in 
 * something, it has to be a valid email/url.
 */
$form->addEmail('email', array(
    'label' => 'Email address',
    'required' => true,
    'errorMessage' => "Please enter a valid Email",
));
$form->addUrl('website', array(
    'label' => 'Website',
    'required' => true,
    'errorMessage' => "Please enter a valid Website address",
));

Validating number with min/max values

For numbers there is the special case of minimum and maximum numbers:

/*
 * Number input element:
 * By default, min, max, step values aren't set 
 * (Depend on browser, step is usually 1). 
 * Returns float value.
 */
$form->addNumber('Number', array(
    'min'   => 0,
    'max'   => 10,
    'step'  => 2,
));

/*
 * Range input element:
 * Same as number input element but with a slider interface.
 */
$form->addRange('Range', array(
    'min'   => 0,
    'max'   => 10,
));

Validation based on regular expressions

The next way to validate values are regular expressions. These inputs will be validated on the server and also in newer browsers that understand the pattern-attribute.

/*
 * The validator pattern has to match the complete string (HTML5 spec). Here
 * are some examples:
 */
$form->addText('singleLetter', array(
    'label' => 'Single letter', 
    'required' => true, 
    'validator' => '/[a-zA-Z]/',
));
$form->addText('lettersAndNumbers', array(
    'label' =>'One ore more letters or numbers', 
    'required' => true,
    'validator' => '/[a-zA-Z0-9]+/',
));

Validation with closures

Instead of validation with a regular expression, you may also provide a closure function to validate the input value. The closure function will only be validated on the server, not on the client.

/*
 * adds a closure validator:
 * attach a function to the input.
 * In this case you must enter "2" oder a string
 * containing "yes" to pass validation.
 */
$form->addText('closure', array(
    'label' => 'closure validated', 
    'required' => true,
    'validator' => function($value) {
        if ($value == 2) {
            return true;
        } else {
            return strpos($value, "yes") !== false;
        }
    },
));

Difference to the HTML standard

There is one important case where depage-forms behaves differently from simple html-inputs: Checkboxes.

In HTML5 if a checkbox is required, every required checkbox in a set has to be checked to validate. In depage-form the boolean field works the same way. If it is required, you have to check it.

But if you use the input-multiple with the checkbox skin, the user only has to check one checkbox of a set to pass validation (analogous to the radio-buttons/input-single).

Javascript Validation

For Browsers that don't support the direct validation of input fields or to display the error-messages directly, we can activate the validation with javascript. We have to include jQuery, the jquery-tools and the effects.js into the html-code.

Here a full example:

<?php
/*
 * Load the library...
 */
require_once('../../htmlform.php');

/*
 * Create the example form 'jsExample'
 */
$form = new depage\htmlform\htmlform('jsExample');

/*
 * Add the various input elements to the form by calling the '"add" + element
 * type' method.
 */
$form->addText('username', array('label' => 'User name', 'required' => true));
$form->addEmail('email', array('label' => 'Email address'));
$form->addBoolean('accept', array('label' => 'Accept terms and conditions.', 'required' => true));

/*
 * The validator pattern has to match the complete string (HTML5 spec). Here
 * are some examples:
 */
$form->addText('singleLetter', array('label' => 'Single letter', 'required' => true, 'validator' => '/[a-zA-Z]/'));
$form->addText('letters', array('label' =>'One ore more letters', 'required' => true, 'validator' => '/[a-zA-Z]+/'));

/*
 * The process method is essential to the functionality of the form. It serves
 * various purposes:
 *  - it validates submitted data if there is any
 *  - it redirects to the success page if all the data is valid
 *  - it stores the data in the session and redirects to the form to circumvent
 *    the form resubmission problem
 */
$form->process();

/*
 * Finally, if the form is valid, dump the data (for demonstration). If it's
 * not valid (or if it hasn't been submitted yet) display the form.
 */
if ($form->validate()) {
    /*
     * Success, do something useful with the data and clear the session.
     * The getValues method returns an array of the form element values.
     */
    echo('<a href="">back</a>');
    echo('<pre>');
    var_dump($form->getValues());
    echo('</pre>');

    $form->clearSession();
} else {
    /*
     * Load the necessary scripts. jQuery, jQuery Tools and the depage-forms
     * customization.
     */
?>
<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="../../lib/css/depage-forms.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="../../lib/js/jquery.tools.min.js"></script>
    <script src="../../lib/js/effect.min.js"></script>
</head>
<body>
<?php
    /*
     * Display the form.
     */
    echo ($form);
?>
</body>
<?php
}

The validation is executed on blur by default, which means everytime you leave a specific input element. The user may only submit the form after entering valid data for all fields.

Here's the live-example:

<iframe class="example" src="https://docs.depage.net/depage-forms/Docs/examples/js-validation.php" seamless="seamless" style="height: 45em;"></iframe>

http://docs.depage.net/depage-forms/documentation/html/js-validation_8php-example.html

More complex validation with dependencies

More complex validations with dependencies between different input fiels are possible, but should be done with subclassing the htmlform. These will be a topic for another post.

Next Steps

In the next posts about depage-forms we will introduce some extended features like:

subdividing forms into steps and step-navigation

subclassing htmlform

Getting things done without getting the word out

Work

It has been a very long time since I managed to publish an article here. And it's not because there wouldn't be anything to talk about. But we are working a lot, so there is no time left to show and tell. Why? Well, because there is always a next project waiting to be finished.

And I am sure, we are not the only ones having this problem: A lot of freelance designers and small agencies I know don't have the time or resources, to publish what they are doing regulary. Some people just shout on Twitter or on Facebook instead, but I have to admit: I like not to brag. But I think that some of the things we do are worth seeing nontheless.

I already wanted to write about this... more than year ago.

But this has to change – Starting right now!

So, what were we working on?

So first, there is Screen-Pitch:

Screen-Pitch is an online platform which enables screen-writers to present their film ideas to producers in the form of video pitches. Originally founded by Linus Foerster, Ben and I implemented screen-pitch.com based on depage-cms.

Here you can watch the Pitch for Screen Pitch (german).

What else?

A lot of websites.

E.g. the third installment of pop-up-my-bathroom. This time in purple with a new responsive layout:

Or a website for the SPD Baden-Württemberg for their 150th birthday together with IFK Berlin. For this we designed a tablet optimized timeline, where you can navigate from one year to the next by swiping through time.

New Booklet

I also designed a Booklet for the new CD »A Kit for Mending Thoughts« for Efrat Alony. This was a lot of fun, building small puppets out of paper and telling little stories with it. Later I will write more about the details.

Your can Listen to some of the songs at the alony website. But better: Buy the album... ;-)

Opensource

While working on other things, we managed to implement some general stuff, that is already opensource or will be once it's documented, including a lot of jQuery plugins:

depage-magaziner, a plugin for a touch-based website navigation

depage-player, a video html5/flash video player that powers screen-pitch.com

depage-shy-dialogue, a unobtrusive dialog to include in websites

depage-growl, a notification library to use native notifications where available with a nice html-fallback

And last but not least:

I also was teaching at the hfg Offenbach in February and May (a workshop about tablet magazines and another one about responsive design).

And tomorrow I will go to the CSSConf.eu, hopefully meeting a lot of good people.

Stay tuned!

The Ideas Preserver

How to save your ideas from getting lost.

Zinnobergruen designed the excellent notebook "Ideas Preserver" for Chromolux. You can order it now on ideenkonserve.de and its free of charge!

We implemented the website and its powered by the upcoming version of depage-cms and the new depage-forms.

There are six wunderful categories for your ideas:

Revolutionary Ideas

Profitable Ideas

Epic Ideas

Green Ideas

Enlightening Ideas

Little Ideas

The Idea Preserver

Revolutionary Ideas

Profitable Ideas

Epic Ideas

Green Ideas

Enlightening Ideas

Little Ideas

Soon there will be also an iPhone-App of the Ideas Preserver, which we develop.

You want to know when the app will be available?

Register here!

depage-forms: html5 forms made easy (Part I)

HTML forms: Easy and difficult at the same time

HTML-Forms are simple to write – but to do it in a good way and to make them comfortable to use is not an easy task.

There are a few things you will have to do again and again:

Write the HTML for the form itself

Style the form in the right way

Validate the data in the browser (optional)

Validate the data on the server (never optional - don't forget!)

Additionally make sure the user don't have to fight with the browser e.g. strange messages about "resending" data on reloading the page and using back- and forward-buttons.

This is a part of the ongoing series about depage-forms

depage-forms: html5 forms made easy (Part I)

depage-forms: validation of html5 forms (Part II)

depage-forms: subdividing forms into steps and step-navigation (Part III) / Coming soon

depage-forms: subclassing htmlform (Part IV) / Coming soon

Forget about fighting!

Because we did not want to fight anymore, we are introducing today:

depage-forms – html5-forms made easy!

Documentation

Fork us/Source-Code

depage-forms is PHP library for HTML form generation with focus on usability for developers and users.

It is part of the upcoming version of depage-cms, but it also works as a standalone library. By abstracting HTML, browser flaws (duplicate form submissions) and form validation, it provides a comfortable way to obtain reliable and validated data from users.

We are (by far) not the first trying to solve these problems. For PHP there are Zend-Forms and Phorms for example. But I think we found a rather unique approach to solve these problem.

So, how does it work?

First we load the Library and initialize an instance of the htmlforms-class. Almost every action goes through the htmlforms-class. Besides fieldsets and steps (later more about this) we only talk to instances of the htmlform directly.

<?php
require_once('path/to/htmlform.php');

$form = new depage\htmlform\htmlform('simpleForm');

After that, we add our inputs and other formfields to our form.

You can do this by calling the '"add" + element type' method. The first parameter is the name of the element. It has to be unique. The optional second parameter is an array of various element settings. Everything in the settings-array is optional and has a sensible default.

E.g.: If you don't give a label-parameter htmlforms will use the name of the input as label. You can also add a required-parameter, so you won't be able to finish the form without filling a required-input.

$form->addText('username', array(
	'label' => 'User name', 
	'required' => true,
));
$form->addEmail('email', array(
	'label' => 'Email address',
));

Next comes the processing — The process-method is essential and the backbone of the htmlforms-class:

It validates submitted data if there is any.

It redirects to the success page if all the data is valid and all required fields are filled in.

It stores the data in the session and redirects to the form to circumvent the form resubmission problem. That means, that every form is sent with a POST-Request and then redirected to display the form again through a GET-Request. For more info: PRG-Pattern on Wikipedia

(Note: Make sure to call the process-method before any output, so the form is able to redirect itself.)

$form->process();

Now after processing the form we know if the submitted data is valid:

If the data is valid, we can do whatever we want with it. In this example we just dump it to the output. The submitted data is saved in a session until the session is cleared (which we do here) or the session has timed out.

If the form is empty or the submitted data is not valid we output the form with "echo" which will output the html-source for the form.

if ($form->validate()) {
    var_dump($form->getValues());

    $form->clearSession();
} else {
    echo ($form);
}

Live-Example

Here's the live-example:

<iframe class="example" src="https://docs.depage.net/depage-forms/Docs/examples/simple.php" seamless="seamless" style="height: 30em;"></iframe>

http://docs.depage.net/depage-forms/documentation/html/simple_8php-example.html

Next Steps

In the next posts about depage-forms we will introduce some extended features like:

form validation, the automatic type-casting of data-values and

subdividing forms into steps and step-navigation

subclassing htmlform

black on white: uebele.com

büro uebele gets its web presence with depage::cms

The web presence of Stuttgart based büro uebele has been implemented in depage::cms. The design of the website stayed almost the same. Concept and design by Andreas Uebele and Tristan Schmitz.

But we optimized the technical implementation:

The HTML-markup has been optimized semantically.

The website has a newsfeed now. You can subscribe to it at feeds.feedburner.com/uebele/en.

The image-navigation on project-pages changed to be smoother and is animated with JavaScript. If JavaScript is inactive all the images are visible in an accessible way.

The Logo is available in two versions: As bitmap (png) and as vector graphic (svg) on supported platforms.

Additionally we optimized the website for search engines a bit — but this is work in progress.

In a short time uebele.com will also have a new videoplayer, which will be integrated into the image-navigation.