<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title><![CDATA[]]></title>
  <link href="http://sp4ke.github.com/blog/atom.xml" rel="self"/>
  <link href="http://sp4ke.github.com/blog/"/>
  <updated>2013-12-19T13:54:11+01:00</updated>
  <id>http://sp4ke.github.com/blog/</id>
  <author>
    <name><![CDATA[Chakib Benziane]]></name>
    <email><![CDATA[chakib.benz@gmail.com]]></email>
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[My most valuable lesson in life learnt the hard way]]></title>
    <link href="http://sp4ke.github.com/blog/my-most-valuable-lesson-in-life-learnt-the-hard-way/"/>
    <updated>2013-04-18T11:51:00+02:00</updated>
    <id>http://sp4ke.github.com/blog/my-most-valuable-lesson-in-life-learnt-the-hard-way</id>
    <content type="html"><![CDATA[<p>Hollywood movies are often introduced with a main character living his life until a big event happens,
something that is enough life changing to justify a compelling story. And we, as an audience,
tend to identify to that hero or some event in the story that helps us forget the boredom of real life.
I believe this is one of the secret ingredients that make the movies industry so successful.
People need to forget about their daily life because they believe it&#8217;s boring.
In the timespan of  <a href="http://www.slashfilm.com/by-the-numbers-the-length-of-feature-films/2/">159 minutes</a> they are thrilled in something more exciting, adventurous, romantic &#8230;
everything that does not seem to exist in &#8220;real life&#8221;.</p>

<!-- more -->


<p>I love movies and cinema, and I really enjoy seeing a good one. However, something have always kept me a bit skeptical about the whole phenomenon.
In my sight, real life is more exciting, there&#8217;s an infinite amount of possibilities
and outcomes to what you do. Everything seem possible when you stop picturing your
actions and ideas <a href="http://www.youtube.com/watch?v=lVeSLFgcKkw">in the way society expects you to do</a>. This feeling has started filling me since I was a teenager.
It forged my personality and made me what I have been until now. People nowadays call it being an &#8220;entrepreneur&#8221; or &#8220;hacker&#8221;.
I don&#8217;t think any word could describe the way I feel about my life and my role in the current society.</p>

<p>I left my country 6 years ago and came to France in order to study computer science.
I had been to medical school before, trying to follow my dad&#8217;s footsteps.
My path through my studies has been the same thing as it has always been my whole life:
trying new things, never settle down at the same place, always thinking of the next project
and moving forward. As an immigrant student I have done many little jobs, worked for big IT
companies ( although I was not always allowed to ), joined a prestigious computer school club
where I learned so much about sysadmin in system engineering and met many people.
Still, I was always feeling something missing. Deep inside, there was a voice who has been there since the beginning.
It kept telling me what
I needed to do. I was working as a system engineer on a short term contract when a friend
(at the time) offered me to start our own startup where I would be responsible for all the
technical aspect. When I think about it now, the idea was not that attractive,
there was no business plan and we were just a team of three guys without any previous experience in
the startup business. It was one of the most important choices I had to do.
Either decline a comfortable job offer which would&#8217;ve let me acquire a legal worker
status and finish my studies working with cool technologies, and maybe even travelling.
Or jumping right into the startup adventure, with no guaranty of success, no market
research whatsoever, and no immigration status possible especially in France which
is about ten years far from a Startup Act .</p>

<p>Flash forward, I am co-founder and CTO at jib.li. Many things happened since and
long story made short, we made a pivot and had new people in the team.
I will share this story with my friend and co-founder Ryadh in an other article,
a story which I think every foreign entrepreneur to France should know about.
For the time being, Jib.li has been launched 6 months ago, had some worldwide press and
media coverage, and is currently one of the first crowd-shipping/shopping platforms.</p>

<p>Then comes last week. Something big happened. Actually it was a succession of
events that, taken alone could be considered probable, but thinking they would happen all
at the same time in the lapse of a few days made them what we define as &#8220;life changing&#8221; events.
They are totally unrelated, each having a huge impact in some aspect of my personal and
professional life. But still, they are all connected together with the same variable
that makes them what I feel like being born in a new life.</p>

<p>Each one of these events could be considered a failed, depressing twist filled with despair.
In fact, they made me feel that way and I could barely sleep at night, always feeling a pain
in my stomach like I have been punched in the nuts. I am not enough comfortable to talk about
the personal one and the next articles will explain the rest of the story. What really matters
here is the key denominator, something I can now consider, with confidence, as the most important factor in any
future project and my whole new life. I am talking about <em>Trust</em>. Of course, it seems obvious !
Well I taught it was too.</p>

<p>The history of humanity has been shaped by trust. You can&#8217;t build a pyramid if
you can&#8217;t trust the architect. You can&#8217;t build an army when people don&#8217;t trust you. You can&#8217;t learn if you don&#8217;t
trust a teacher or a mentor, and you can&#8217;t found a family if you don&#8217;t trust a partner&#8230;
It is something that must be earned. Something you can&#8217;t afford with money and power. Something you can
fake with lies and charisma . I am now convinced the only way to find trust is to look for <em>Passion</em> inside people and that every human
being have to learn it the hard way. You must be betrayed in order to acknowledge it&#8217;s worth. I sincerely hope for
you it won&#8217;t be the same as me, but I can say for sure this was my life changing event.
Anything that will come after will be different and I am very thankful I was given this precious lesson in my youth.</p>

<p>I don&#8217;t know what words could describe the aftermath. I feel new, free, light.
I feel a strength rising inside me, like the power to shape the future. I still have so many
things to learn and experience, and the pains that come with it. <a href="http://www.bbc.co.uk/programmes/p00ynyl7">Entropy</a> makes
life beautiful, the uncertainty built in the entire universe makes our lives much more interesting than any Hollywood movie.</p>

<p>Good luck to all those who create, make and change things, and for anyone else, just listen to the voice speaking to you.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Redesigning jibli - lessons learned form Hack Design Part 1]]></title>
    <link href="http://sp4ke.github.com/blog/redesigning-jibli-lessons-learned-form-hack-design-part-1/"/>
    <updated>2013-03-06T20:01:00+01:00</updated>
    <id>http://sp4ke.github.com/blog/redesigning-jibli-lessons-learned-form-hack-design-part-1</id>
    <content type="html"><![CDATA[<p>As many programmers, I have always thought  web design is a
discipline best reserved for people doing art and design.
You know, the hipster with his MacBook, his pletora of Adobe suites,
and the huge time spent learning to use them.</p>

<p>I come from a background of system administration and networking, always
fascinated by the obscure backend&#8217;s thing happening behind what you
see on your screen. Furthermore, I started web development for the sole purpose
of building <a href="http://jib.li">Jib.li</a>, as a CoFounder and CTO on this
project, and as a team which had no money to hire a full time designer.</p>

<p>Needless to say I boarded the UI Design ship on the wrong foot.</p>

<p>In this first article I am going to share my experience on how I got passionate
about creating and designing a User Interface and what I learned from all the
resources shared on HN and <a href="http://hackdesign.org/courses/"> Hack Design </a> lessons which helped me redesign Jib.li.</p>

<!-- more -->


<h4>Before</h4>

<p><img class="hover center" src="http://sp4ke.github.com/blog/images/jibli_old.png" width="390"></p>

<h4>After</h4>

<p><img class="hover center" src="http://sp4ke.github.com/blog/images/jibli_new.png" width="400"></p>

<h2>Where to start ?</h2>

<p>We launched the public beta of jib.li on October 2012. A few weeks later we had had
plenty of feedback and proposals for new features.</p>

<p>For strategic reasons, we chose to start Jib.li with no registering process and just a &#8220;Connect with Facebook&#8221; instead.</p>

<p>We had no money to make a &#8220;how it works&#8221; video we could show
next to the home page form, like many startups do when they launch their
product. We only had a <a href="http://www.youtube.com/watch?v=KOYTefUmygA" title="Jib.li teaser video">teaser video</a> that we made before starting this project
where you see a bunch of people (our team at that time) pitching the idea.</p>

<p>The home page actually <a href="http://jib.li/homeold" title="Some styles are a little broken since we're migrating to the new design"> looked </a> like many location based services and the
typical workflow of a user was:</p>

<ol>
<li><p>Fill in the &#8220;From&#8221; and &#8220;To&#8221; location fields</p></li>
<li><p>Choose what action to take: Send, Deliver</p></li>
<li><p>A modal shows up to let him select a date depending on which action he chose</p></li>
<li><p>Redirecting the user to a listings results page</p></li>
<li><p>The user can then click on listings or create a new one if he&#8217;s not satisified</p></li>
</ol>


<p>We noticed that many people when they first reached the home page, where not able to figure out what to do next.
To assist new users we used bootstrap tooltips everywhere, even on the action buttons.</p>

<p>On the graphic design aspect, we were just using a slightly customized <a href="http://bootswatch.com/cerulean/"> bootstrap theme </a></p>

<h2>Getting inspiration</h2>

<p>So after we decided it was time to have a fresh and better look, I saw the opportunity
to start practicing what I have been learning on HN, Hack Design and <a href="http://www.amazon.com/About-Face-Essentials-Interaction-Design/dp/0470084111"> About Face 3 </a> about
UI/UX Design. It was also a good opportunity to stop frontend programming with spaghetti jQuery dom
manipulation and start using AngularJS which devprived me of my sleep hours lately.
(frontend programming will be the subject of an other article)</p>

<p>I think the most difficult step when you start working on something, no matter what kind
of project, is actually to <strong>start</strong>. For me it was no exception. I was certainly looking
for visual inspiration because a User Interface for a web application is first of all something
we see before we touch and interact with.</p>

<p>To help me filter out the overwhelming quantity of images, photos and visuals available on the internet,
I made list of words that sum up what Jib.li was about and started combining those words in search queries
for images and photos.</p>

<p>I ended up with this one when looking for the words <em>bike</em> and <em>bag</em>, which seemed to summarize the ideas
of transportation, carrying and environment which jib.li is all about.</p>

<p><img class="center" src="http://sp4ke.github.com/blog/images/hero_bike.jpg" width="300"></p>

<p><em>This photo comes from this <a href="http://letsgorideabike.com/blog/2011/03/beautiful-bicycles-yuba-mundo-cargo-bike/#comment-823035149"> beautiful article </a> by Dottie and all credits go to her.</em></p>

<p>When I saw this one ideas started immediately flowing and I knew where to start.</p>

<h2>The color palette</h2>

<p>The first thing I did was to choose a color palette. To do so, I used the inspiration photo
to <a href="http://vimeo.com/7109253"> extract a simple color palette.</a></p>

<p><img class="right" src="http://sp4ke.github.com/blog/images/color_swatch.jpg"></p>

<p>I actually repeated the process until I get a set of colors which validate these conditions:</p>

<ul>
<li>Have at most 3 main colors</li>
<li>Have dark close to black color</li>
<li>Have a light close to white color</li>
</ul>


<p>This one has two main colors, a wide blue range and the yellow/gold one. Grays and white are
just desaturated and very light colors.</p>

<p>This should suffice to always have a color to pick from this palette instead of choosing
one from a color picker, and so basically when looking for black I just choose the darkest one and when looking for white I pick
the most close to white.</p>

<p>The wide range of blue colors made me choose the blue as the main color.</p>

<p>I was heavily inspired by this <a href="http://ianstormtaylor.com/design-tip-never-use-black/"> article </a> of Ian Storm Taylor, which also made me
start using HSL (Hue, Saturation, Brightness) everywhere I wanted to get new colors from the palette.</p>

<h2>Rapid prototyping vs flat PSD design</h2>

<p>One thing I learned in interactive design is that a User Interface can&#8217;t possibly be represented as a flat image only.
<a href="http://www.youtube.com/watch?v=PUv66718DII"> Bret Victor made an excellent talk </a> about the process of creation and the necessity to get immediate visual feedback.
My design process has been a mix of rapid prototyping and design exploration with <a href="https://developers.google.com/chrome-developer-tools/"> chrome developers tools </a> then representing ideas in
a PSD file as a reference for later.</p>

<p>Although I&#8217;m not going to talk much about frontend programming, this is the stack I prepared to quickly test ideas and move back and forth
from prototype to PSD.</p>

<p><a href="https://github.com/sp4ke/Angustrap.git"> The stack </a> consists of:</p>

<ul>
<li>Angular Seed project from AngularJS</li>
<li>Stylesheets using Less</li>
<li>Using git submodules to add frontend dependencies (Bootstrap, AngularUI, FontAwesome &#8230; )</li>
</ul>


<p>Whenever I wanted to test some <em>behavior</em> feature I first tested it with Chrome, played
with styles and interactions, then tried to represent it as a layer in PSD.</p>

<p>On the other hand, when trying to work on the <em>look</em> aspect of something, I prefered the PSD
approach first, which gives more freedom on the graphics.</p>

<p><img class="hover" src="http://sp4ke.github.com/blog/images/jibli_design_1.jpg" width="50">
<img class="hover" src="http://sp4ke.github.com/blog/images/jibli_design_2.jpg" width="50">
<img class="hover" src="http://sp4ke.github.com/blog/images/jibli_design_3.jpg" width="50">
<img class="hover" src="http://sp4ke.github.com/blog/images/jibli_design_4.jpg" width="50">
<img class="hover" src="http://sp4ke.github.com/blog/images/jibli_design_5.jpg" width="50">
<img class="hover" src="http://sp4ke.github.com/blog/images/jibli_design_6.jpg" width="50">
<img class="hover" src="http://sp4ke.github.com/blog/images/jibli_design_7.jpg" width="50">
<img class="hover" src="http://sp4ke.github.com/blog/images/jibli_design_8.jpg" width="50">
<img class="hover" src="http://sp4ke.github.com/blog/images/jibli_design_9.jpg" width="50">
<img class="hover" src="http://sp4ke.github.com/blog/images/jibli_design_10.jpg" width="50">
<img class="hover" src="http://sp4ke.github.com/blog/images/jibli_design_11.jpg" width="50"></p>

<h2>End of Part 1</h2>

<p>I hope some programmers who are interested about web design and don&#8217;t know how
to start might find some insight from this article and the next ones.</p>

<p>Part 2 will be about getting from prototype to stylesheets using chrome devtools, the importance of shadows and
some tips I learned about textures and details.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Development as a Service on its baby steps]]></title>
    <link href="http://sp4ke.github.com/blog/Development-as-a-Service/"/>
    <updated>2012-04-29T20:26:09+02:00</updated>
    <id>http://sp4ke.github.com/blog/Development-as-a-Service</id>
    <content type="html"><![CDATA[<p>Let me start by presenting a new web service <a href="http://www.pythonanywhere.com/">pythonanywhere.com</a>.</p>

<p>It&#8217;s a full python development stack, ready to be used in your browser. After a quick subscription for a free account,
you have access from your dashboard to [python, ipython,  bash] consoles in different python flavours.</p>

<p>You can also browse your files, make cron scripts and create python web apps on the fly.</p>

<p>The most interesting features are the consoles pause/resume feature, which can be shared
with other people. This could be very helpful to collaborate on code or teach python.
Behind the scene, it&#8217;s an encrypted ajax window over your home folder running on a remote server hosted on EC2.</p>

<p>DaaS may be on it&#8217;s first baby steps. Though, it could rapidly become a standard way to code for developers especially in startups.
Before diving in the pros and cons, let&#8217;s analyse the different development stacks possibilities.</p>

<!-- more -->


<p>First, there&#8217;s the good old fashion way. Setup a server on a cloud service
(I guess there&#8217;s still people doing it with bare metal servers ). You have plenty of choice there, (EC2, AppEngine, Azure, Rackspace&#8230;),
it depends on your IT needs, spiritual beliefs (many don&#8217;t care) and your pockets.</p>

<p>Then pick the development stack of your preferred language/framework: Python(Django, Web2py, Pylons, Flask&#8230;), Ruby(Ruby On Rails) for the rock stars, Java/.Net, PHP &#8230;</p>

<p>Here, you have to maintain every piece involved in the process, packages versions, build tools, deployment, scaling. That&#8217;s a lot of time and resources needed to finally get your developers pushing and your apps running.</p>

<p>The next big step was the <a href="http://www.heroku.com">Heroku</a> and <a href="http://www.dotcloud.com"> Dotcloud </a> like services, aka Deployment/Scaling as a Service.
They release from the burden of deploying and give enough abstraction to exclusively focus your effort on the application logic.
The process is often the same, basically setup your project with a simple conf file, then deploy to the server with one command.
They practically all handle version control systems like git,
so your project is deployed every time you push your code.
I believe Github helped a lot making these services exist as deployment is often tightly bound to code revisions, and Github offers an excellent API and a huge community.</p>

<p>We have been adding more and more abstraction to the development process in order to make it easier, faster, stronger &#8230;
However, there is still one constant, &#8220;localhost development&#8221;. The coding itself is done on your machine/laptop.You still can use your favourite OS, IDE, tools.</p>

<p>Well, DaaS is going to cross that last barrier.
There are already several web services for online development like <a href="http://jsfiddle.net">jsfiddle.net</a> for web design or <a href="http://koding.com">koding.com</a>.
They offer something that could change the way we see development, the abstraction of your OS, ide and development environment.
If you think about it, that&#8217;s a lot of time saved. No multi-platform mess, no more scripts to ensure the same development stack. Using the enormous processing power
of cloud platforms, there is virtually no compile time. You can even forget about your machine, all you need is a keyboard and a screen.</p>

<p>It seems only benefit but the thing is, if DaaS is really going to be the next step,I think we are missing something very important.
Before a developer learns to code, he has
to understand the building blocks of programming, what&#8217;s a computer, what&#8217;s an Operating System, how does it do its work. All the abstractions we built are built
using this knowledge. How could a programmer understand code optimization ? Security flows?
How could he understand the interaction of his code with its environment if he&#8217;s not gonna use it?
Maybe we&#8217;re not concreted with that yet, but the next generations of programmers are.</p>

<p>What do you think ?</p>
]]></content>
  </entry>
  
</feed>
