Profile cover photo
Profile photo
Thinkin' Tags
Rapid Prototyping on a Production-Ready Code Basis
Rapid Prototyping on a Production-Ready Code Basis


Yesterday in the early morning we had an issue with the connection to our mail server. That's why invitation requests and password reset requests couldn't be handled.

This problem was fixed yesternoon. All invitation requests of the last 24h have been send out again to make sure, everybody who requested for an accout got his invitation.

UPDATE 2014-07-18: During the last week we faced some complex connection problems to your e-mail service, which resulted in several invitation emails not to be send out.

This problem should be fixed now and I've sent out all pending invitations. If you have requested an invite between 4th and 10th of July, please use the request again for an invite. Thanks for your patience. 
Add a comment...

Post has attachment
I made a short screencast to introduce the new "duplicate element" feature. I hope you like it.
Add a comment...

RELEASE NOTES - Thinkin' Tags v0.5.3

Today, I released another maintenance update containing several bug fixes and a new feature:

New Features
- added experimental feature to duplicate DOM nodes

Bug Fixes
- saving projects failed when using save-option in project-close dialog
- CSS properties in selectors with pseudo-selectors couldn't be reenabled after disabling in the CSS inspector
- fixed a bug in CSS inspector when editing CSS values
- fixed a bug that could result in loosing path information for images

Along with these client-side improvements to the builder application, there were several internal changes on the server-side.
Add a comment...

Post has attachment
RELEASE NOTES - Thinkin' Tags v0.5.2

Today, I published a small maintenance release for Thinkin' Tags with some small but helpful improvements.

Improvements / New Features
- switching viewmode from live to structure or linearized now doesn’t block the UI
- when there’s no matching selector for the active element, the application now provides a dialog to create new selectors.
- added DOM manipulation method “duplicate element”. This feature is available in viewmodes live, structure and linearized.
- improved in-app help texts

Bug Fixes
- combined CSS selectors with :after and :before (e.g.: a:before, a:after {...}) were shown twice in the list of matching selectors in the CSS inspector and in the stylesheet management dialog.
- when editing CSS in text editor, the application didn’t trigger the edited files as modified in rare situations. This could result in the loss of changes.
- several IE 11 related fixes.
Add a comment...

Post has attachment
Do you use Emmet (former Zen-Coding)? Then this Gist from +Jens Grochtdreis  might be helpful for you. It provides several Emmet snippets for typical HTML constructs for building the markup for YAMLs column and grid modules.

You can use these shortcuts in Thinkin' Tags HTML editor. Paste a snippet into the editor and press "Tab" to expand it to HTML.
Add a comment...

Post has attachment
Yesterday evening, +Thinkin' Tags achieved a great milestone, when the 1000th user registered to the service.

That's why I want to say thank you to all of you. And I am asking for help: Please tell others about +Thinkin' Tags, write blog posts and share your thoughts and wishes about the application.
Add a comment...

Post has attachment
RELEASE NOTES - Thinkin’ Tags v0.5

Thinkin’ Tags v0.5 is now online and it comes with a lot of interesting changes. Here are the release notes:

A New User Interface
The biggest change you will notice is the completely reworked user interface of the builder application. Its one thing to add new exiting features to an application but its another (sometimes more complicated) thing to ensure a straight and consistent user interface and user experience.

The revision of the UI followed four simple rules:

- simplify in-app menu structure
- shorter paths for your mouse to get things done
- less space consuming UI, bigger working area

The new UI comes with a simpler main menu that only has 3 menu items: Project, Markup and Design. The Design item sums up the former Screen Layout and Typography menu items and the former Print Design item was completely removed. As this was always more a trigger to switch the presentation mode of your prototypes to media-type print, it’s now build as an option in the “Output Device” selector.

The second major change is the abdication of the left config pane. All dialogs have been rearanged in a single pane on the right edge of the screen. This results in a win of about 400 pixel for the working area and makes the application much more usable on notebook displays as you can now work on a standard 1024px wide desktop layout on a typical 1440px wide display without the need of horizontal scrolling in your working area.

Better Performance
Especially on older/slower machines, but also on modern hardware you will notice a significant performance increase. The user interface is now much more responsive to any user interaction.

Better User Experience
I made several smaller changes to improve the general user experience. When you open a project, the application now automatically loads the index.html or the first HTML file in the project if index.html doesn’t exist. When opening a file, the application switches the viewmode to “structure” to ensure, the drag & drop functionality of the application is fully available from the start. Both changes will help newcomers to get more quickly familiar with the application.

Another example: You can now double-click on any HTML element in your layout or in the DOM tree to bring up the HTML editor.

Comfortable HTML & CSS editing
Thinkin’ Tags got a new internal editor that supports syntax highlighting, live code linting for HTML and CSS. Yes, it’s true - you can now text-edit your CSS. It’s not possible to edit the complete CSS files but you can now edit the content of each media block in the editor. This makes it much simpler to include exisiting designs and CSS snippets from third-party applications.

For more relaxing HTML editing, the HTML editor also supports Emmet (former ZenCoding). Just write your shorthand Emmet syntax and press the tabulator key and the editor expands it to valid HTML. You’ll love it.

More Stylesheets - More Prototyping
Thinkin’ Tags now allows you to create, rename, duplicate and delete stylesheets in your projects. Further you can define which stylesheets are used as well as their order based on HTML file level. This is great news for prototyping because its now very simple to combine 10 different design variations for your main navigation in one project as well as different color schemes for your application prototype or even complex UI prototypes with every layout module built in a separate HTML file with its own style definitions. It’s all possible now with a few clicks.

More Graphics
There are two noteworthy changes concering handling of images in Thinkin’ Tags. First, Thinkin’ Tags now provides better placeholder images in high resolutions, that can be used for prototyping. These placeholder images are available from the element browser as drag & drop elements. These images will be added to your projects and they’re are included in your exported projects, you can finally build prototypes that work completely offline. 

Second, there’s a new dialog called “CSS Backgrounds” where you find a collection of predefined CSS3 gradients that can be used in your layouts as well as 300 background patterns from the project that are available under Creative Commons Attribution-ShareAlike 3.0 License.

Complete Changelog

- The public access to the builder application has been removed. Users now need to register with their name and email address for an account to use Thinkin’ Tags.
- After successful login users will be redirected directly to the builder application

- Completely redesigned the UI for the builder application. Its now cleaner and it requires significantly less space.
- Simplyfied main menu: “Screen Layout” and “Typography” menus are now combined under menu “Styles”. Former “Print Layout” menu was removed. The print preview is now available from all menus via “Output Device” selector in the main pane of the application.
- All feature dialogs are now located in a single right-aligned sidebar. This saves much space for the workbench and greatly improves the user experience on smaller desktop resolutions.
- Improved readability of overlay messages (horizontal & vertically centered, more contrast, larger font size)
- UI now looks great on retina displays. Almost all PNG icons were replaced by vector icons.

- The user interface is now much faster an responsive. Even on older / slower computers, the application immediately responds on any user action.
- The CSS engine got several performance improvements that speeds up handling of stylesheets and UI updates (CSS Inspector & dialogs in “Styles” menu) noticably.

- Implemented an in-app help-system for the builder UI and quick guides for all feature dialogs
- When opening a project, the application automatically tries to load “index.html” or as fallback the first HTML file availabe in the project.
- The viewmode “structure” is now the default mode when opening a file.
- Added dynamic filters to all file-related dialogs

- Double-click on any HTML element now opens the HTML text editor and shows the markup of the selected element.

- Implemented full-featured file management for stylesheets (create / rename / clone / delet).
- Create new stylesheets, based on templates provided by the CSS framework
- Implemented simple file management for images. Unused images can be deleted from project

- combined former “YAML Layout Properties” and “YAML Column Properties” dialogs
- Dialog now shows target stylesheet and target selector that are used by the application to write CSS settings

- Added three universal image placeholders (ratios 1:1, 4:3, 16:9) and an avatar placeholder. All placeholders are available in high resolutions and can be used for prototyping by modifing image attributes “width” and “height”.
- The full element (icon + description) is now draggable, not only the icon itself
- Added a set of default configurations for YAMLs grid module
- Creating a YAML fullpage-module by drag & drop doesn’t require an ID anymore
- Creating a YAML column-module by drag & drop doesn’t require an ID anymore

- Reimplemented the creation of new selectors. Selectors now can be defined as multi-line selectors in a much simpler dialog
- CSS content of a media blocks can now be edited in a text editor
- Stylesheets can be deactivated temprarily from the “Stylesheet Configuration” section
- The user now can define a default stylesheet in the “Stylesheet Configuration” section for every HTML file, that is used by the application as target for automatic selector-creation and to write CSS settings (YAML layout modules).

- supports syntax highlighting
- supports live code linting (HTML and CSS)
- supports Emmet (ZenCoding) in HTML mode

- The application now provides a better preview for installed webfonts and system fonts

- the “CSS3 Gradients” section provides a wide range of predefined CSS3 gradient definitions (semi-transparent grayscale and  fully colored)
- the “Background Patterns” section provides 300 patterns from

- Column module: Application now resolves the placeholder in .ie-clearing container correctly
- Google Font API: Fixed a rare bug where Thinkin’ Tags generated bad formatted font-urls
- Fixed wrong indention for first-child elements in HTML generator
- Fixed positioning of modal dialogs
Add a comment...

Post has attachment
As I am coming closer and closer to the release von +Thinkin' Tags v0.5, I can now provide some more information.

The new version comes with an almost completely reworked UI that is cleaner, much more responsive to user actions (better performance) and less space consuming. Today I want to show you a few screenshots that have been made about a month ago that represent an "almost complete" state of the UI as it will be in the coming v0.5 release.

You may notice some of the highlights (besides the new UI) of the new version: TT got a new HTML editor with syntax highlighting and live code linting. CSS file editing becomes available, based on media blocks, also with live CSS linting.

That's all for the moment. Only a few more days until ...
Scrapbook Photos
11 Photos - View album
Add a comment...

3 months work, about 110 commits ... now: reached code freeze for Thinkin' Tags v0.5.

I still need some time for testing, website updates and so on, because there's a long list of improvements and new features.
Add a comment...

Post has attachment
Geat news: Today morning, I got a wonderful message from Google. +Thinkin' Tags  now has its own personal URL on Google+.

So you can update your bookmarks.
Add a comment...
Wait while more posts are being loaded