You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
332 lines
21 KiB
XML
332 lines
21 KiB
XML
<?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>2014-01-29T16:29:16+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[AdBlock can block Angular from loading views]]></title>
|
|
<link href="http://sp4ke.github.com/blog/adblock-can-block-angular-loading-views/"/>
|
|
<updated>2014-01-29T16:12:00+01:00</updated>
|
|
<id>http://sp4ke.github.com/blog/adblock-can-block-angular-loading-views</id>
|
|
<content type="html"><![CDATA[<p>Every developer knows the feeling of hitting a weird bug, but I must admitt I was not prepared for this one.</p>
|
|
|
|
<p>It appears that if you have the Adblock extension installed, and have some Angular view names belonging to Adblock filter
|
|
list, then AdBlock can</p>
|
|
]]></content>
|
|
</entry>
|
|
|
|
<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’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 …
|
|
everything that does not seem to exist in “real life”.</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’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 “entrepreneur” or “hacker”.
|
|
I don’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’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’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 “life changing” 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’t build a pyramid if
|
|
you can’t trust the architect. You can’t build an army when people don’t trust you. You can’t learn if you don’t
|
|
trust a teacher or a mentor, and you can’t found a family if you don’t trust a partner…
|
|
It is something that must be earned. Something you can’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’s worth. I sincerely hope for
|
|
you it won’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’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’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 “Connect with Facebook” instead.</p>
|
|
|
|
<p>We had no money to make a “how it works” 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 “From” and “To” 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’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’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’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 … )</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’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’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’s an encrypted ajax window over your home folder running on a remote server hosted on EC2.</p>
|
|
|
|
<p>DaaS may be on it’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’s analyse the different development stacks possibilities.</p>
|
|
|
|
<!-- more -->
|
|
|
|
|
|
<p>First, there’s the good old fashion way. Setup a server on a cloud service
|
|
(I guess there’s still people doing it with bare metal servers ). You have plenty of choice there, (EC2, AppEngine, Azure, Rackspace…),
|
|
it depends on your IT needs, spiritual beliefs (many don’t care) and your pockets.</p>
|
|
|
|
<p>Then pick the development stack of your preferred language/framework: Python(Django, Web2py, Pylons, Flask…), Ruby(Ruby On Rails) for the rock stars, Java/.Net, PHP …</p>
|
|
|
|
<p>Here, you have to maintain every piece involved in the process, packages versions, build tools, deployment, scaling. That’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 …
|
|
However, there is still one constant, “localhost development”. 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’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’s a computer, what’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’s not gonna use it?
|
|
Maybe we’re not concreted with that yet, but the next generations of programmers are.</p>
|
|
|
|
<p>What do you think ?</p>
|
|
]]></content>
|
|
</entry>
|
|
|
|
</feed>
|