Kotrotsos.com http://kotrotsos.com Yes that's my name. posterous.com Tue, 01 May 2012 03:00:00 -0700 My 3D printer done. And printing nicely http://kotrotsos.com/my-3d-printer-done-and-printing-nicely http://kotrotsos.com/my-3d-printer-done-and-printing-nicely

It's done. It has been for a while. I am constantly tweaking and modifying this thing. Printing new parts for it- plus printing a lot of things for my kids because they seem to love it as much as I do. 

I've just printed with PLA at the moment. Which is a corn starch type of filament. 100% biodegadable. Which also means it doesn't stand wet environements, or a lot of heat. Will get my badge of ABS plastics tomorrow I hope to see how printing with ABS goes. And if I can make some truly useful stuff. 

There are some rattles that I need to identify. Will get to that. Also started working on something else and more sturdy. an XY and possibly Z platform of my own design. Part aluminium extusions, part printed parts. 

IMG_0048.MOV Watch on Posterous
Lumia_20120426_174314Z.mp4 Watch on Posterous

 

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1233460/me.png http://posterous.com/users/hes56uouW5Y9Q Marco Kotrotsos kotrotsos Marco Kotrotsos
Tue, 10 Apr 2012 07:19:00 -0700 My first 3D printer -almost build http://kotrotsos.com/my-first-3d-printer-almost-build http://kotrotsos.com/my-first-3d-printer-almost-build

This whole building a 3D printer (In my case a Reprap Prusa Mendel) has taken a whole lotta patience in assembly and part resourcing, but everything has been worth it so far.

From getting the frames to line up exactly right,  drilling out every hole and trimming everything to exact dimensions to figuring out all the electronics and software- I think it's something every tinkerer should do or should have done atleast once.

It is incredibly satisfying just watching the thing start up and go. I only need to setup the hot-end and it should be ready to go and print hopefully some decent stuff.

 

Lumia_20120409_145225Z.mp4 Watch on Posterous

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1233460/me.png http://posterous.com/users/hes56uouW5Y9Q Marco Kotrotsos kotrotsos Marco Kotrotsos
Wed, 08 Feb 2012 04:59:00 -0800 Tools for easy development and debugging mobile apps with Phonegap. http://kotrotsos.com/99977379 http://kotrotsos.com/99977379

Having a strictly web and application development background I was of course charmed by the premise to use this skillset developing mobile apps. But- it was not plain sailing from the start. Here is what I have learned (so far) and what I am using.

jQuery Mobile 1.0

jQuery Mobile is an ok first try, but not really (in my experience) ready yet for big complicated apps. I love it though but- don't venture too far of from the default layout- and make sure you close your page div's if you use a single page design cuz they are hard to debug. (look for odd jumps) Validating the code would have helped I now know.

Also, you have got to use something like Backbone or Jquery Mobile Router if you have a single structure.

https://github.com/azicchetti/jquerymobile-router 

I also use Handlebars as a templating engine. But it was not fast enough as is (in my case), so I pre-compile every template first, minify it and only use the Handlebars VM and not the full Handlebars.js file.

https://github.com/wycats/handlebars.js

Phonegap 

Of course. This is about Phonegap, which is awesome. I have only target iOS and Android but I suppose BB and WebOs would be no problem either. It does what it say's on the box.

However I found hand building for iOS and Android a pain. Plus I never was real sure if I started my project correctly. The project already existed as a mobile web app- that needed converting. So I looked for tools that could help me. This is what I found.

Cordova

First really great find. https://github.com/brianleroux/Cordova Which is a build/debug/test chain for Phonegap applications. It comes with a project generator, simple webserver, Weinre debugger (which just works when using with Cordova) and other build/debug tools. 

The generator get's you up and running real fast. Just do

phonegap create MyProject --www vanilla

Ripple

Ripple is a mobile environment emulator which works incredibly well with Phonegap. You can find it here https://bdsc.webapps.blackberry.com/html5/download and is my second great find. 

Don't let the fact it's from (or taken over by) Blackberry put you off- it does not have anything to do with the platform exclusively but it provides a development environment for Phonegap (and others) to work in. Including providing a bridge to device API's like geolocation, accelerometer and such. It can also send Phonegap 'deviceready' events.

Ripple now supports the Remote web inspection (The one you find in Chrome for instance) So you can inspect your ui, watch traffic and console items right from Ripple (no Weinre needed) This has saved me hours and hours of development time, after I found out how to enable this.

The only way I know how to open it is to right click on the screen and choose Inspect. If anyone knows of a better way?

Phonegap build.

This is the Phonegap build service. Found here http://build.phonegap.com/ It is a truly convenient service which takes your project (just zip it- and upload) , and builds the packages (for all platforms it supports) for you. Available for download (by link and QR code) in about a minute. 

Of course, before beeing able to build a package for iOS you have to go through all the steps of creating, signing and uploading keys. But after that- it's all fire and forget.

Webstorm IDE.

Just f...ing great. Here

And a couple of tips.

Remember to include functions to check connection and connection type and act accordingly. Especially Apple demands you do. Just read the guidelines.

After deployment. Knowing what happens on the 'client' is really hard. here is where Mixpanel (http://mixpanel.com) really shines. I do not use it for analytics, but more as a remote event logger (which it is) I have tried Google Analytics custom events, but since they are not truly real time- the info was of no realy use) I can watch device interaction and errors in Mixpanel. Don't log too much or privacy issues come into play. Also, every event you register takes a little bit of bandwidth so take care of not flooding the connection with log events.

Compress and minify everything! Use pre-compiled Handlebars template with the VM. remember to compress (or use the minified version) jquery mobile, jquery and the CSS files. 

Provide adequate feedback. The default spinner from jQuery mobile is not enough. If you have synchronous ajax requests happening, let the user know. I for one used way too many synchronous (blocking) requests.

So- to sum it up, and I wish I know this before I started so I hope it to be of some help to others.

Generate a new Phonegap project using Cordova
Create mobile web app using jQuery Mobile
   Use: JQM Router, Handlebars and I also love smoke.js 
Test using Ripple
Package and test on the devices itself using Phonegap Build.

Now. Let's hope Apple accepts my submission with no problems...

Brotip: Don't expect it to work 100% cross platform/device. There will be small differences which you need to account for- and development takes much more time then developing web applications.

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1233460/me.png http://posterous.com/users/hes56uouW5Y9Q Marco Kotrotsos kotrotsos Marco Kotrotsos
Thu, 17 Nov 2011 01:59:00 -0800 Managing multiple companies, concepts and nurturing multiple business ideas is not 'lack of focus' http://kotrotsos.com/managing-multiple-companies-concepts-and-nurt http://kotrotsos.com/managing-multiple-companies-concepts-and-nurt

Yesterday- during a business pitch. Someone brought the appearent (well actually, his own) issue to light that it is not possible to really focus on more than one business at the same time- and succeed.

I think his thinking is really old fashioned thinking.

When you are performing a task, like working on a company, on a business idea or some other concept. You can easily fill all the time that is available for that particular task. Work is like gas, it will fill up all space that is available. But in my experience if you segment your space (it this case time, on different companies) it would only fill up that amount of space. 

It's not really his fault that he thinks this way- it is what Higher Education Business school teaches him to think. 

I started a company (well, multiple) to be creative, and to have the freedom to work on whatever creative things come to mind. Not to work inside a box I create for myself. 

Steve Martin began as a comic performer with a unique brand of humor. Over his career, he has mastered acting in films and on stage, playing the banjo (he is currently on tour with his band), and he has written novels and screenplays. He doesn’t credit his talent as a comedian, but his ability to tap into his creativity to tackle all kinds of different mediums.

Would you say to Steve Martin that he needs to focus? 

Part of beeing an entrepreneur means you have the desire to create and to be creative. If you are happy doing what you do in a single company on one thing, sure- go ahead. but remember though- it's dangerous- holding only one key to your kingdom...

And there are some other people who really want- and really can execute on more than one idea. And still have time for their families. They hold multiple key's.

 





 

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1233460/me.png http://posterous.com/users/hes56uouW5Y9Q Marco Kotrotsos kotrotsos Marco Kotrotsos
Mon, 14 Nov 2011 08:12:00 -0800 Incredible Earth, like you never seen it before. http://kotrotsos.com/incredible-earth-like-you-never-seen-it-befor http://kotrotsos.com/incredible-earth-like-you-never-seen-it-befor

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1233460/me.png http://posterous.com/users/hes56uouW5Y9Q Marco Kotrotsos kotrotsos Marco Kotrotsos
Sun, 13 Nov 2011 11:45:00 -0800 mlabs http://kotrotsos.com/creative-design-of-qr-codes http://kotrotsos.com/creative-design-of-qr-codes

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1233460/me.png http://posterous.com/users/hes56uouW5Y9Q Marco Kotrotsos kotrotsos Marco Kotrotsos
Tue, 05 Jul 2011 07:35:00 -0700 It Grows In A Forest http://kotrotsos.com/it-grows-in-a-forest http://kotrotsos.com/it-grows-in-a-forest

I am working on something truly exciting. I can't really tell you what it is yet, but all will be revealed over the coming weeks.

But it's new, it's fresh- and I really think it's awesome.

It Grows In A Forest

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1233460/me.png http://posterous.com/users/hes56uouW5Y9Q Marco Kotrotsos kotrotsos Marco Kotrotsos
Thu, 02 Jun 2011 07:28:00 -0700 Stop re-targeting or behavioral advertisements. Opt-out now. http://kotrotsos.com/stop-retargeting-or-behavioral-adverts-from-r http://kotrotsos.com/stop-retargeting-or-behavioral-adverts-from-r

Everyone knows them- and everybody hates them. Advertisements that haunt you from place to place. If you browse for something at say Bol.com or some travel site , then those ads will keep pestering you until times end.

There is a solution, If you wish to opt-out from receiving those incredibly annoying ads. You can try these links:

Google Ads preferences

And the one for Criteo: Opt-out from Criteo

Fetchback: http://www.fetchback.com/optout.html

I will add more if I find them, or leave them in the comments.

 

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1233460/me.png http://posterous.com/users/hes56uouW5Y9Q Marco Kotrotsos kotrotsos Marco Kotrotsos
Wed, 25 May 2011 07:10:00 -0700 IKEA Standing desk hack. http://kotrotsos.com/ikea-standing-desk-hack http://kotrotsos.com/ikea-standing-desk-hack

So I converted myself again from a sit down slouch to an awesome standing superhuman (tm) But this time I wasn't content with a desk on top of 2 chairs, I wanted something solid- efficient and of the right standing height. So I set out to build my own. 

Here is how it turned out.

I took a small (Everything Ikea) Expedit and put some legs under it;

http://www.ikea.com/nl/nl/catalog/products/20135300 and http://www.ikea.com/nl/nl/catalog/products/20054563)

The Capita legs give it some initial height and it looks real nice.

I then added the big Capita brackets on top of the Expedit;

http://www.ikea.com/nl/nl/catalog/products/40051196

Which is a bit of a hassle since the screws don't reach the nuts too well, the Expedit is a tad too thick. I didn't -but you'd better use some glue as well as bolting the thing on top of the Expedit.

I used a Galant desk I already had as a desktop;

http://www.ikea.com/nl/nl/catalog/products/S09847787

To rest my iMac and second screen I used a long Lack wall shelf, and a very small one (the square one) attaching it to the desk using only double sided tape (the strong kind)

There is no reason not to choose a larger Expedit and then (and only then) a larger Galant desktop. Be careful though that the whole thing is in balance. The Capita legs should be right on the outer edges of the Expedit, or it will not be stable enough. 

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1233460/me.png http://posterous.com/users/hes56uouW5Y9Q Marco Kotrotsos kotrotsos Marco Kotrotsos
Sat, 07 May 2011 18:05:00 -0700 2 things UX experts can learn from the movie Saw. http://kotrotsos.com/2-things-ux-experts-can-learn-from-the-movie http://kotrotsos.com/2-things-ux-experts-can-learn-from-the-movie
Media_httpfarm4static_bhpij

1. The way to play the jigsaw instruction tapes are always labeled clearly.

2. The rules of the game are very simple and always straightforward (eg. poke out eye- get key)

Bonus: Playing the game successfully brings great reward...usually.  

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1233460/me.png http://posterous.com/users/hes56uouW5Y9Q Marco Kotrotsos kotrotsos Marco Kotrotsos
Fri, 29 Apr 2011 10:11:00 -0700 U can follow me on Twitter @kotrotsos http://kotrotsos.com/u-can-follow-me-on-twitter-kotrotsos http://kotrotsos.com/u-can-follow-me-on-twitter-kotrotsos

Please- follow me on Twitter- I tend ramble with a greater frequency there. :) @kotrotsos

Media_http30mediatumb_dzgmc

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1233460/me.png http://posterous.com/users/hes56uouW5Y9Q Marco Kotrotsos kotrotsos Marco Kotrotsos
Fri, 29 Apr 2011 08:42:00 -0700 Textmate Text Extraction command http://kotrotsos.com/textmate-text-extraction-command http://kotrotsos.com/textmate-text-extraction-command

I needed a solution to quickly (and manually) extract certain text fragments (job titles) from text (in this case tweets)

I could have just selected > copied > other window > newline > pasted. But doing that a thousand time would get tedious real fast. So I fired up trusty Textmate and created a new Text command. Here is what I did.

So now I only have to select the text, and hit the designated key combo and it appends the selected text to a text file.  (in this case /Users/me/newjobs.txt) Instant 1000% increase in efficiency- easily.

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1233460/me.png http://posterous.com/users/hes56uouW5Y9Q Marco Kotrotsos kotrotsos Marco Kotrotsos
Sat, 26 Mar 2011 15:05:00 -0700 Released soon. Taskflo and Echo. http://kotrotsos.com/released-soon-taskflo-and-echo http://kotrotsos.com/released-soon-taskflo-and-echo

Because we like easy and simple things, we currently work on what we hope are going to be two very useful web apps.

One is called Taskflo which is going to be a simple task management app and the other is called Echo and tracks Twitter keyword performance over time.

These are like trow away and no sign-on type of apps. Which means that you get an (very secret) URL from where you can access your list or keywords and that's it. No registering or login to remember- We send it to your email adres just in case, but the only thing you need is to bookmark the URL and off you go. We really would like to see how people use these apps- and if the no sign-up (or in) format is useful and secure enough. These apps will be minimal viable products when released and we want lot's of feedback about tweaks, hacks ,stuff that doesn't work or works like crap. Anything. So here's Taskflo.  Still has it's multi user interface, but we will strip that and make it like Echo- where you can only access it through a (again, very secret) URL.

Media_httpkotrotsosco_admor

There are only two lists, one big and one small. You can drag items to and fro. You can add headings (the orange type bars) text and todo items that you can check off. You can include HTML (will be sanitized) so you can add pictures and references to files and sites. These will probably get some sort of nice interface later on. But for now we will see how useful these are. And yes, we are looking to compete with Backpack. :)

And here is Echo. Both apps look about the same which mean we can get these sites (and there are more coming) out there -real fast to get feedback on them.

Media_httpkotrotsosco_nfewg

    As you can probably tell- these interfaces are a work in progress. But are coming along nicely.   

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1233460/me.png http://posterous.com/users/hes56uouW5Y9Q Marco Kotrotsos kotrotsos Marco Kotrotsos
Sun, 23 Jan 2011 18:59:00 -0800 Keep your email address safe from spambots by copying it to the clipboard http://kotrotsos.com/keep-your-email-address-safe-from-spambots-by http://kotrotsos.com/keep-your-email-address-safe-from-spambots-by

I was thinking about some way's to show your email address on your site- without the possibility that spambots would be able to harvest them- or at least, make it very hard for them to do so.

One idea that stuck was placing the email address on the clipboard, and making it available to paste into the recipient field of an email client. So I cobbled together a proof of concept between 2 cappuccino's- that does just that, place an email address onto the clipboard after clicking a link.

 

It's not pretty- but it was not meant to be. I used ZeroClipboard cause I found out that doing this [copy something] is really hard to do cross browser.

Anyhoo...Here is an example page, it is ready to run-however one caveat. If you run this locally-you need to give Flash explicit access (yes it uses a small Flash script) to some secure part. It's not hard, just enter the page as an exception when it shows the warning dialog to you. 

 

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1233460/me.png http://posterous.com/users/hes56uouW5Y9Q Marco Kotrotsos kotrotsos Marco Kotrotsos
Sun, 23 Jan 2011 10:45:00 -0800 Sexy element creation with jQuery http://kotrotsos.com/sexy-element-creation-with-jquery http://kotrotsos.com/sexy-element-creation-with-jquery

How's this for sexy?. Paste this into your HTML file.

1
2
3
4
5
6
7
8
9
10
11
12
<style>
  .highlight { background-color:yellow; }
</style>
<script>
  $("<div />", {
    text: "click here",
    click: function()
      {
        $(this).toggleClass("highlight");
      }
   }).appendTo("body");
</script>

Now you can attach events directly to the declaration.

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1233460/me.png http://posterous.com/users/hes56uouW5Y9Q Marco Kotrotsos kotrotsos Marco Kotrotsos
Sun, 09 Jan 2011 19:17:28 -0800 Poor mans jQuery element inspector. http://kotrotsos.com/poor-mans-jquery-element-inspector http://kotrotsos.com/poor-mans-jquery-element-inspector In case you do not have access to Firebug or any other quick element inspector- I have created a very quick and very dirty Javascript only element inspector- well actually Javascript and jQuery. You need to have access to your own code though. Just past this here snippet anywhere in html file and the title of your document will show the ID and the CLASS of any element you are hovering over. CSS (add this to give the element you are hovering over some style)
.m0 { outline:solid red 1px; }
Javascript (Omit the script tags if you are placing this outside your HTML)
$(document).ready(function(){
    $("*").hover(
      function () {
        var c = $(this).attr('class');
        $(this).addClass('m0');
        document.title = "ID: " + $(this).attr('id') + " CLASS:" + c;
      }, 
      function () { 
        $(this).removeClass('m0');
      }
    );        
  });
Like I said, it is very quick- and probably too dirty to touch. Let me know if this works- or not or if you can make this shorter. say; tweet sized. update: Changed border: property into outline: so the border width does not play a role in the layout.

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1233460/me.png http://posterous.com/users/hes56uouW5Y9Q Marco Kotrotsos kotrotsos Marco Kotrotsos
Fri, 07 Jan 2011 13:20:02 -0800 Apple you are breaking my heart. http://kotrotsos.com/apple-you-are-breaking-my-heart http://kotrotsos.com/apple-you-are-breaking-my-heart Apple's gem of the moment, the Mac App Store is (Once more) showcasing it's ongoing struggles (presumably) with it's UX team. I deduce this from not only the doubtful effectiveness of it's icon (again- but hardly relevant) but the positioning of tool bar elements (again- relevant)
Media_httpkotrotsosco_hjbfq
I know- as was the case with the Icon (capital I) , Steve will probably not agree. But, come on...
Media_httpkotrotsosco_yfqbs
Proximity suggests that these two groups (or is it one group) belong together. However- they can't be more different. From left to right [close] [minimize] [maximize] [back] [forward] The first 3 perform window type operations (the most annoying kind) and the last 2 navigational functions. I am not sure what Apple is trying to prepare us for, smaller screen real estate? Is Apple doing away with window chrome (not Chrome) all together? No doubt we will see- but in the mean time- you are breaking my heart Apple. Update: Better like this? Let's here it.
Media_httpkotrotsosco_gwycb

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1233460/me.png http://posterous.com/users/hes56uouW5Y9Q Marco Kotrotsos kotrotsos Marco Kotrotsos
Fri, 07 Jan 2011 10:28:00 -0800 Easy EJS http://kotrotsos.com/easy-ejs http://kotrotsos.com/easy-ejs

I have recently took up the Embedded Javascript jQuery plugin again. It is a templating engine for javascript. (here) It is also part of the javascriptMVC framework. However I was not happy with the way you call the render function everytime you need to render a view.

$('header').html(new EJS({url: "templates/header"}).render());

So I developed my own solution where you only need to add a classname of 'view' to an element. And if you name your templates according to convention- it should render out the template. (in this case header.ejs)

<div id="header" class="view"></div>

You can also override the template name like so

<div id="header" class="view myheader"></div>

Just append the template name to the classname. Here is the code- you need references to jQuery and EJS for this to work. Just have the script execute right after page load.

function render_views()
{
    var Views = []; var templatePath = "templates/"
 
    // Find me some elements with a view class attached
    $('.view').each(function() {
          var arg;
          var id = $(this).attr("id");
 
          // See if there is a template overide present- split the
          // class into an array.
          arg = $(this).attr("class").split(" ");
          var customView;
 
          // So only the second value becomes the argument to overide- 
          // I see an error in my assumptions though. Can you see it? will fix
          // that sometimes. (hint: what if you have more then one class 
      //                  definitions per element?)
 
          if (arg.length > 1) 
             customView = arg[1]; 
 
          // Keep Strings Neat By Using Variables (tm)
          var elementid = "#" + id;
          var template = templatePath + id;
 
          if (customView != null)  
            template = templatePath + customView;
 
      // Perform view rendering
          $(elementid).html(new EJS({url: template}).render());
    });
}

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1233460/me.png http://posterous.com/users/hes56uouW5Y9Q Marco Kotrotsos kotrotsos Marco Kotrotsos
Mon, 06 Dec 2010 13:05:00 -0800 Zen Basecamp http://kotrotsos.com/zen-basecamp http://kotrotsos.com/zen-basecamp
Media_httpwwwcrunchba_zsqvk

When working, I usually have one or two Basecamp projects open (or as much as possible)

I don't use any third party notification tools or anything- I just like working directly on the site itself. But- I don't like to right column, header and footer to be visible while I am doing alot of to-do stuff for instance.

So- I created this bookmarklet, just add the following link to your bookmarks or bookmark toolbar or whatever, and whenever you visit a Basecamp project- click on it...and only the stuff that matters most will remain visible. (reload, and you will have the normal view again)

Zen Basecamp

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1233460/me.png http://posterous.com/users/hes56uouW5Y9Q Marco Kotrotsos kotrotsos Marco Kotrotsos
Tue, 16 Nov 2010 18:48:00 -0800 Like something that is real http://kotrotsos.com/like-something-that-is-real http://kotrotsos.com/like-something-that-is-real

I am drafting up some mockups for IRL Like (or something cheezy). You can stick this onto anything 'likeable' and people can shoot the QR code or follow the bit.ly shorturl to -like it.

Like

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1233460/me.png http://posterous.com/users/hes56uouW5Y9Q Marco Kotrotsos kotrotsos Marco Kotrotsos