fix jekyll

master
Chakib (spike) Benziane 11 years ago
parent 53f5189fe7
commit cebbb9c810

@ -0,0 +1 @@
sp4ke.com

@ -0,0 +1,2 @@
source 'https://rubygems.org'
gem 'github-pages'

@ -0,0 +1,62 @@
GEM
remote: https://rubygems.org/
specs:
RedCloth (4.2.9)
blankslate (2.1.2.4)
classifier (1.3.3)
fast-stemmer (>= 1.0.0)
colorator (0.1)
commander (4.1.5)
highline (~> 1.6.11)
fast-stemmer (1.0.2)
ffi (1.9.3)
github-pages (12)
RedCloth (= 4.2.9)
jekyll (= 1.4.2)
kramdown (= 1.2.0)
liquid (= 2.5.4)
maruku (= 0.7.0)
rdiscount (= 2.1.7)
redcarpet (= 2.3.0)
highline (1.6.20)
jekyll (1.4.2)
classifier (~> 1.3)
colorator (~> 0.1)
commander (~> 4.1.3)
liquid (~> 2.5.2)
listen (~> 1.3)
maruku (~> 0.7.0)
pygments.rb (~> 0.5.0)
redcarpet (~> 2.3.0)
safe_yaml (~> 0.9.7)
toml (~> 0.1.0)
kramdown (1.2.0)
liquid (2.5.4)
listen (1.3.1)
rb-fsevent (>= 0.9.3)
rb-inotify (>= 0.9)
rb-kqueue (>= 0.2)
maruku (0.7.0)
parslet (1.5.0)
blankslate (~> 2.0)
posix-spawn (0.3.8)
pygments.rb (0.5.4)
posix-spawn (~> 0.3.6)
yajl-ruby (~> 1.1.0)
rb-fsevent (0.9.3)
rb-inotify (0.9.3)
ffi (>= 0.5.0)
rb-kqueue (0.2.0)
ffi (>= 0.5.0)
rdiscount (2.1.7)
redcarpet (2.3.0)
safe_yaml (0.9.7)
toml (0.1.0)
parslet (~> 1.5.0)
yajl-ruby (1.1.0)
PLATFORMS
ruby
DEPENDENCIES
github-pages

@ -0,0 +1,35 @@
#
# BUILD Bootstrap theme
#
#
##TODO:
# Add compressing and jshint
OUTPUT = css/bootstrap.css
OUTPUT_MIN = css/bootstrap.min.css
LESS = less/compile.less
HR=\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#
CHECK=\033[32m✔\033[39m
build:
@echo "\n${HR}"
@echo "Building bootstrap theme ..."
@recess --compile ${LESS} > ${OUTPUT}
@lessc --compress ${LESS} > ${OUTPUT_MIN}
@echo "Compiling LESS with Recess... ${CHECK} Done"
## Responsive
# #lessc swatchmaker-responsive.less > ${OUTPUT_PATH}/bootstrap-responsive.css
# #lessc --compress swatchmaker-responsive.less > ${OUTPUT_PATH}/bootstrap-responsive.min.css
#
bootstrap:
@make -C ./lib/bootstrap build
clean:
@rm -rf ${OUTPUT} ${OUTPUT_MIN}
.PHONY: build bootstrap

@ -0,0 +1,195 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Development as a Service on its baby steps - </title>
<meta name="author" content="Chakib Benziane">
<meta name="description" content="Development as a Service on Its Baby Steps Let me start by presenting a new web service pythonanywhere.com. It&#8217;s a full python development &hellip;">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/blog/atom.xml" rel="alternate" title="" type="application/atom+xml">
<link rel="canonical" href="http://sp4ke.github.com/blog/Development-as-a-Service/">
<link href="/blog/favicon.png" rel="shortcut icon">
<link href="/blog/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="left-col">
<div class="intrude-less">
<header id="header" class="inner"><div class="profilepic">
<script src="/blog/javascripts/md5.js"></script>
<script type="text/javascript">
document.write("<a href='http://sp4ke.com'><img src='http://www.gravatar.com/avatar/" + MD5("chakib.benz@gmail.com") + "?s=160' alt='Profile Picture' style='width: 160px;'</a>");
</script>
</div>
<h1><a href="/blog/"></a></h1>
<p class="subtitle">An entrepreneur thaughts and ideas.</p>
<nav id="main-nav"><ul class="main-navigation">
<li><a href="/blog/">Blog</a></li>
<li><a href="/blog/blog/archives">Archives</a></li>
</ul>
</nav>
<nav id="sub-nav">
<div class="social">
<a class="rss" href="/blog/atom.xml" title="RSS">RSS</a>
</div>
</nav>
<!--<hgroup>
<h1><a href="/blog/"></a></h1>
<h2>An entrepreneur thaughts and ideas.</h2>
</hgroup>
-->
</header>
</div>
</div>
<div class="mid-col">
<div class="mid-col-container">
<div id="content" class="inner"><article class="post" itemscope itemtype="http://schema.org/BlogPosting">
<h1 class="title" itemprop="name">Development as a Service on Its Baby Steps</h1>
<div class="entry-content" itemprop="articleBody"><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>
</div>
</article>
<section id="comment">
<h1 class="title">Comments</h1>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
</div>
</div>
<footer id="footer" class="inner"><p>
Copyright &copy; 2013 - Chakib Benziane -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script src="/blog/javascripts/slash.js"></script>
<script src="/blog/javascripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
(function($){
$('.fancybox').fancybox();
})(jQuery);
</script> <!-- Delete or comment this line to disable Fancybox -->
<script type="text/javascript">
var disqus_shortname = 'sp4ke';
// var disqus_developer = 1;
var disqus_identifier = 'http://sp4ke.github.com/blog/Development-as-a-Service/';
var disqus_url = 'http://sp4ke.github.com/blog/Development-as-a-Service/';
var disqus_script = 'embed.js';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31299938-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 203 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 636 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 343 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 835 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 210 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 664 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 170 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 442 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 251 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 553 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 264 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 649 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 686 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 816 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 334 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 465 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 686 B

@ -0,0 +1,115 @@
<?xml version="1.0"?>
<skin version="1.1" name="Glow" author="LongTail Video">
<settings>
<setting name="backcolor" value="0x000000" />
<setting name="frontcolor" value="0xeeeeee" />
<setting name="lightcolor" value="0xeeeeee" />
<setting name="screencolor" value="0x000000" />
</settings>
<components>
<component name="controlbar">
<settings>
<setting name="margin" value="0" />
<setting name="fontsize" value="11" />
<setting name="fontcolor" value="0xEEEEEE" />
<setting name="buttoncolor" value="0xEEEEEE" />
</settings>
<layout>
<group position="left">
<button name="play" />
<text name="elapsed" />
</group>
<group position="center">
<slider name="time" />
</group>
<group position="right">
<text name="duration" />
<button name="blank" />
<button name="mute" />
<button name="fullscreen" />
</group>
</layout>
<elements>
<element name="background" src="background.png" />
<element name="capLeft" src="divider.png" />
<element name="capRight" src="divider.png" />
<element name="divider" src="divider.png" />
<element name="blankButton" src="blankButton.png" />
<element name="fullscreenButton" src="fullscreenButton.png" />
<element name="fullscreenButtonOver" src="fullscreenButtonOver.png" />
<element name="muteButton" src="muteButton.png" />
<element name="muteButtonOver" src="muteButtonOver.png" />
<element name="pauseButton" src="pauseButton.png" />
<element name="pauseButtonOver" src="pauseButtonOver.png" />
<element name="playButton" src="playButton.png" />
<element name="playButtonOver" src="playButtonOver.png" />
<element name="timeSliderBuffer" src="timeSliderBuffer.png" />
<element name="timeSliderCapLeft" src="timeSliderCapLeft.png" />
<element name="timeSliderCapRight" src="timeSliderCapRight.png" />
<element name="timeSliderProgress" src="timeSliderProgress.png" />
<element name="timeSliderRail" src="timeSliderRail.png" />
<element name="normalscreenButton" src="normalscreenButton.png" />
<element name="normalscreenButtonOver" src="normalscreenButtonOver.png" />
<element name="unmuteButton" src="unmuteButton.png" />
<element name="unmuteButtonOver" src="unmuteButtonOver.png" />
<element name="volumeSliderRail" src="divider.png" />
<element name="volumeSliderProgress" src="divider.png" />
</elements>
</component>
<component name="display">
<settings>
<setting name="bufferinterval" value="250" />
<setting name="bufferrotation" value="90" />
</settings>
<elements>
<element name="background" src="background.png" />
<element name="playIcon" src="playIcon.png" />
<element name="muteIcon" src="muteIcon.png" />
<element name="errorIcon" src="bufferIcon.png" />
<element name="bufferIcon" src="bufferIcon.png" />
</elements>
</component>
<component name="dock">
<settings>
<setting name="fontcolor" value="0xFFFFFF" />
</settings>
<elements>
<element name="button" src="button.png" />
</elements>
</component>
<component name="playlist">
<settings>
<setting name="fontcolor" value="0xEEEEEE" />
<setting name="overcolor" value="0xFFFFFF" />
<setting name="activecolor" value="0xFFFFFF" />
<setting name="backgroundcolor" value="0x333333" />
</settings>
<elements>
<element name="item" src="item.png" />
<element name="itemOver" src="itemOver.png" />
<element name="sliderCapBottom" src="sliderCapBottom.png" />
<element name="sliderCapTop" src="sliderCapTop.png" />
<element name="sliderRail" src="sliderRail.png" />
<element name="sliderThumb" src="sliderThumb.png" />
</elements>
</component>
<component name="sharing">
<elements>
<element name="embedIcon" src="embedIcon.png" />
<element name="embedScreen" src="embedScreen.png" />
<element name="shareIcon" src="shareIcon.png" />
<element name="shareScreen" src="shareScreen.png" />
</elements>
</component>
</components>
</skin>

Binary file not shown.

After

Width:  |  Height:  |  Size: 172 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 171 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 749 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 589 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

@ -0,0 +1,319 @@
<?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>

@ -0,0 +1,200 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Blog Archives - </title>
<meta name="author" content="Chakib Benziane">
<meta name="description" content="2013 Apr 18 entrepreneurship, experience, life My most valuable lesson in life learnt the hard way Mar 6 UI Design, jib.li Redesigning jibli - &hellip;">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/blog/atom.xml" rel="alternate" title="" type="application/atom+xml">
<link rel="canonical" href="http://sp4ke.github.com/blog/blog/archives/">
<link href="/blog/favicon.png" rel="shortcut icon">
<link href="/blog/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="left-col">
<div class="intrude-less">
<header id="header" class="inner"><div class="profilepic">
<script src="/blog/javascripts/md5.js"></script>
<script type="text/javascript">
document.write("<a href='http://sp4ke.com'><img src='http://www.gravatar.com/avatar/" + MD5("chakib.benz@gmail.com") + "?s=160' alt='Profile Picture' style='width: 160px;'</a>");
</script>
</div>
<h1><a href="/blog/"></a></h1>
<p class="subtitle">An entrepreneur thaughts and ideas.</p>
<nav id="main-nav"><ul class="main-navigation">
<li><a href="/blog/">Blog</a></li>
<li><a href="/blog/blog/archives">Archives</a></li>
</ul>
</nav>
<nav id="sub-nav">
<div class="social">
<a class="rss" href="/blog/atom.xml" title="RSS">RSS</a>
</div>
</nav>
<!--<hgroup>
<h1><a href="/blog/"></a></h1>
<h2>An entrepreneur thaughts and ideas.</h2>
</hgroup>
-->
</header>
</div>
</div>
<div class="mid-col">
<div class="mid-col-container">
<div id="content" class="inner"><div itemscope itemtype="http://schema.org/Blog">
<section class="archives"><h1 class="year">2013</h1>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<div class="meta">
<span class="date"><time datetime="2013-04-18T11:51:00+02:00" itemprop="datePublished">Apr 18</time></span>
<br>
<span class="tags">
<a class='category' href='/blog/blog/categories/entrepreneurship/'>entrepreneurship</a>, <a class='category' href='/blog/blog/categories/experience/'>experience</a>, <a class='category' href='/blog/blog/categories/life/'>life</a>
</span>
</div>
<h1 class="title" itemprop="name"><a href="/blog/my-most-valuable-lesson-in-life-learnt-the-hard-way/">My most valuable lesson in life learnt the hard way</a></h1>
</article>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<div class="meta">
<span class="date"><time datetime="2013-03-06T20:01:00+01:00" itemprop="datePublished">Mar 6</time></span>
<br>
<span class="tags">
<a class='category' href='/blog/blog/categories/ui-design/'>UI Design</a>, <a class='category' href='/blog/blog/categories/jib-li/'>jib.li</a>
</span>
</div>
<h1 class="title" itemprop="name"><a href="/blog/redesigning-jibli-lessons-learned-form-hack-design-part-1/">Redesigning jibli - lessons learned form Hack Design Part 1</a></h1>
</article>
</section>
<section class="archives"><h1 class="year">2012</h1>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<div class="meta">
<span class="date"><time datetime="2012-04-29T20:26:09+02:00" itemprop="datePublished">Apr 29</time></span>
<br>
<span class="tags">
<a class='category' href='/blog/blog/categories/it/'>IT</a>, <a class='category' href='/blog/blog/categories/programming/'>programming</a>, <a class='category' href='/blog/blog/categories/python/'>python</a>
</span>
</div>
<h1 class="title" itemprop="name"><a href="/blog/Development-as-a-Service/">Development as a Service on its baby steps</a></h1>
</article>
</section>
</div></div>
</div>
<footer id="footer" class="inner"><p>
Copyright &copy; 2013 - Chakib Benziane -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script src="/blog/javascripts/slash.js"></script>
<script src="/blog/javascripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
(function($){
$('.fancybox').fancybox();
})(jQuery);
</script> <!-- Delete or comment this line to disable Fancybox -->
<script type="text/javascript">
var disqus_shortname = 'sp4ke';
var disqus_script = 'count.js';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31299938-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</div>
</div>
</body>
</html>

@ -0,0 +1,99 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Category: entrepreneurship | ]]></title>
<link href="http://sp4ke.github.com/blog/blog/categories/entrepreneurship/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'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>
</feed>

@ -0,0 +1,154 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Category: entrepreneurship - </title>
<meta name="author" content="Chakib Benziane">
<meta name="description" content="Category: entrepreneurship">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/blog/atom.xml" rel="alternate" title="" type="application/atom+xml">
<link rel="canonical" href="http://sp4ke.github.com/blogblog/categories/entrepreneurship/">
<link href="/blog/favicon.png" rel="shortcut icon">
<link href="/blog/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="left-col">
<div class="intrude-less">
<header id="header" class="inner"><div class="profilepic">
<script src="/blog/javascripts/md5.js"></script>
<script type="text/javascript">
document.write("<a href='http://sp4ke.com'><img src='http://www.gravatar.com/avatar/" + MD5("chakib.benz@gmail.com") + "?s=160' alt='Profile Picture' style='width: 160px;'</a>");
</script>
</div>
<h1><a href="/blog/"></a></h1>
<p class="subtitle">An entrepreneur thaughts and ideas.</p>
<nav id="main-nav"><ul class="main-navigation">
<li><a href="/blog/">Blog</a></li>
<li><a href="/blog/blog/archives">Archives</a></li>
</ul>
</nav>
<nav id="sub-nav">
<div class="social">
<a class="rss" href="/blog/atom.xml" title="RSS">RSS</a>
</div>
</nav>
<!--<hgroup>
<h1><a href="/blog/"></a></h1>
<h2>An entrepreneur thaughts and ideas.</h2>
</hgroup>
-->
</header>
</div>
</div>
<div class="mid-col">
<div class="mid-col-container">
<div id="content" class="inner">
<section class="archives"><h1 class="year">2013</h1>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<div class="meta">
<span class="date"><time datetime="2013-04-18T11:51:00+02:00" itemprop="datePublished">Apr 18</time></span>
<br>
<span class="tags">
<a class='category' href='/blog/blog/categories/entrepreneurship/'>entrepreneurship</a>, <a class='category' href='/blog/blog/categories/experience/'>experience</a>, <a class='category' href='/blog/blog/categories/life/'>life</a>
</span>
</div>
<h1 class="title" itemprop="name"><a href="/blog/my-most-valuable-lesson-in-life-learnt-the-hard-way/">My most valuable lesson in life learnt the hard way</a></h1>
</article>
</div>
</div>
<footer id="footer" class="inner"><p>
Copyright &copy; 2013 - Chakib Benziane -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script src="/blog/javascripts/slash.js"></script>
<script src="/blog/javascripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
(function($){
$('.fancybox').fancybox();
})(jQuery);
</script> <!-- Delete or comment this line to disable Fancybox -->
<script type="text/javascript">
var disqus_shortname = 'sp4ke';
var disqus_script = 'count.js';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31299938-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</div>
</div>
</body>
</html>

@ -0,0 +1,99 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Category: experience | ]]></title>
<link href="http://sp4ke.github.com/blog/blog/categories/experience/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'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>
</feed>

@ -0,0 +1,154 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Category: experience - </title>
<meta name="author" content="Chakib Benziane">
<meta name="description" content="Category: experience">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/blog/atom.xml" rel="alternate" title="" type="application/atom+xml">
<link rel="canonical" href="http://sp4ke.github.com/blogblog/categories/experience/">
<link href="/blog/favicon.png" rel="shortcut icon">
<link href="/blog/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="left-col">
<div class="intrude-less">
<header id="header" class="inner"><div class="profilepic">
<script src="/blog/javascripts/md5.js"></script>
<script type="text/javascript">
document.write("<a href='http://sp4ke.com'><img src='http://www.gravatar.com/avatar/" + MD5("chakib.benz@gmail.com") + "?s=160' alt='Profile Picture' style='width: 160px;'</a>");
</script>
</div>
<h1><a href="/blog/"></a></h1>
<p class="subtitle">An entrepreneur thaughts and ideas.</p>
<nav id="main-nav"><ul class="main-navigation">
<li><a href="/blog/">Blog</a></li>
<li><a href="/blog/blog/archives">Archives</a></li>
</ul>
</nav>
<nav id="sub-nav">
<div class="social">
<a class="rss" href="/blog/atom.xml" title="RSS">RSS</a>
</div>
</nav>
<!--<hgroup>
<h1><a href="/blog/"></a></h1>
<h2>An entrepreneur thaughts and ideas.</h2>
</hgroup>
-->
</header>
</div>
</div>
<div class="mid-col">
<div class="mid-col-container">
<div id="content" class="inner">
<section class="archives"><h1 class="year">2013</h1>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<div class="meta">
<span class="date"><time datetime="2013-04-18T11:51:00+02:00" itemprop="datePublished">Apr 18</time></span>
<br>
<span class="tags">
<a class='category' href='/blog/blog/categories/entrepreneurship/'>entrepreneurship</a>, <a class='category' href='/blog/blog/categories/experience/'>experience</a>, <a class='category' href='/blog/blog/categories/life/'>life</a>
</span>
</div>
<h1 class="title" itemprop="name"><a href="/blog/my-most-valuable-lesson-in-life-learnt-the-hard-way/">My most valuable lesson in life learnt the hard way</a></h1>
</article>
</div>
</div>
<footer id="footer" class="inner"><p>
Copyright &copy; 2013 - Chakib Benziane -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script src="/blog/javascripts/slash.js"></script>
<script src="/blog/javascripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
(function($){
$('.fancybox').fancybox();
})(jQuery);
</script> <!-- Delete or comment this line to disable Fancybox -->
<script type="text/javascript">
var disqus_shortname = 'sp4ke';
var disqus_script = 'count.js';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31299938-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</div>
</div>
</body>
</html>

@ -0,0 +1,73 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Category: IT | ]]></title>
<link href="http://sp4ke.github.com/blog/blog/categories/it/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[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>

@ -0,0 +1,154 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Category: IT - </title>
<meta name="author" content="Chakib Benziane">
<meta name="description" content="Category: IT">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/blog/atom.xml" rel="alternate" title="" type="application/atom+xml">
<link rel="canonical" href="http://sp4ke.github.com/blogblog/categories/it/">
<link href="/blog/favicon.png" rel="shortcut icon">
<link href="/blog/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="left-col">
<div class="intrude-less">
<header id="header" class="inner"><div class="profilepic">
<script src="/blog/javascripts/md5.js"></script>
<script type="text/javascript">
document.write("<a href='http://sp4ke.com'><img src='http://www.gravatar.com/avatar/" + MD5("chakib.benz@gmail.com") + "?s=160' alt='Profile Picture' style='width: 160px;'</a>");
</script>
</div>
<h1><a href="/blog/"></a></h1>
<p class="subtitle">An entrepreneur thaughts and ideas.</p>
<nav id="main-nav"><ul class="main-navigation">
<li><a href="/blog/">Blog</a></li>
<li><a href="/blog/blog/archives">Archives</a></li>
</ul>
</nav>
<nav id="sub-nav">
<div class="social">
<a class="rss" href="/blog/atom.xml" title="RSS">RSS</a>
</div>
</nav>
<!--<hgroup>
<h1><a href="/blog/"></a></h1>
<h2>An entrepreneur thaughts and ideas.</h2>
</hgroup>
-->
</header>
</div>
</div>
<div class="mid-col">
<div class="mid-col-container">
<div id="content" class="inner">
<section class="archives"><h1 class="year">2012</h1>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<div class="meta">
<span class="date"><time datetime="2012-04-29T20:26:09+02:00" itemprop="datePublished">Apr 29</time></span>
<br>
<span class="tags">
<a class='category' href='/blog/blog/categories/it/'>IT</a>, <a class='category' href='/blog/blog/categories/programming/'>programming</a>, <a class='category' href='/blog/blog/categories/python/'>python</a>
</span>
</div>
<h1 class="title" itemprop="name"><a href="/blog/Development-as-a-Service/">Development as a Service on its baby steps</a></h1>
</article>
</div>
</div>
<footer id="footer" class="inner"><p>
Copyright &copy; 2013 - Chakib Benziane -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script src="/blog/javascripts/slash.js"></script>
<script src="/blog/javascripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
(function($){
$('.fancybox').fancybox();
})(jQuery);
</script> <!-- Delete or comment this line to disable Fancybox -->
<script type="text/javascript">
var disqus_shortname = 'sp4ke';
var disqus_script = 'count.js';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31299938-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</div>
</div>
</body>
</html>

@ -0,0 +1,179 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Category: jib.li | ]]></title>
<link href="http://sp4ke.github.com/blog/blog/categories/jib-li/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[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="/images/jibli_old.png" width="390"></p>
<h4>After</h4>
<p><img class="hover center" src="/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="/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="/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="/images/jibli_design_1.jpg" width="50">
<img class="hover" src="/images/jibli_design_2.jpg" width="50">
<img class="hover" src="/images/jibli_design_3.jpg" width="50">
<img class="hover" src="/images/jibli_design_4.jpg" width="50">
<img class="hover" src="/images/jibli_design_5.jpg" width="50">
<img class="hover" src="/images/jibli_design_6.jpg" width="50">
<img class="hover" src="/images/jibli_design_7.jpg" width="50">
<img class="hover" src="/images/jibli_design_8.jpg" width="50">
<img class="hover" src="/images/jibli_design_9.jpg" width="50">
<img class="hover" src="/images/jibli_design_10.jpg" width="50">
<img class="hover" src="/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>
</feed>

@ -0,0 +1,154 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Category: jib.li - </title>
<meta name="author" content="Chakib Benziane">
<meta name="description" content="Category: jib.li">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/blog/atom.xml" rel="alternate" title="" type="application/atom+xml">
<link rel="canonical" href="http://sp4ke.github.com/blogblog/categories/jib-li/">
<link href="/blog/favicon.png" rel="shortcut icon">
<link href="/blog/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="left-col">
<div class="intrude-less">
<header id="header" class="inner"><div class="profilepic">
<script src="/blog/javascripts/md5.js"></script>
<script type="text/javascript">
document.write("<a href='http://sp4ke.com'><img src='http://www.gravatar.com/avatar/" + MD5("chakib.benz@gmail.com") + "?s=160' alt='Profile Picture' style='width: 160px;'</a>");
</script>
</div>
<h1><a href="/blog/"></a></h1>
<p class="subtitle">An entrepreneur thaughts and ideas.</p>
<nav id="main-nav"><ul class="main-navigation">
<li><a href="/blog/">Blog</a></li>
<li><a href="/blog/blog/archives">Archives</a></li>
</ul>
</nav>
<nav id="sub-nav">
<div class="social">
<a class="rss" href="/blog/atom.xml" title="RSS">RSS</a>
</div>
</nav>
<!--<hgroup>
<h1><a href="/blog/"></a></h1>
<h2>An entrepreneur thaughts and ideas.</h2>
</hgroup>
-->
</header>
</div>
</div>
<div class="mid-col">
<div class="mid-col-container">
<div id="content" class="inner">
<section class="archives"><h1 class="year">2013</h1>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<div class="meta">
<span class="date"><time datetime="2013-03-06T20:01:00+01:00" itemprop="datePublished">Mar 6</time></span>
<br>
<span class="tags">
<a class='category' href='/blog/blog/categories/ui-design/'>UI Design</a>, <a class='category' href='/blog/blog/categories/jib-li/'>jib.li</a>
</span>
</div>
<h1 class="title" itemprop="name"><a href="/blog/redesigning-jibli-lessons-learned-form-hack-design-part-1/">Redesigning jibli - lessons learned form Hack Design Part 1</a></h1>
</article>
</div>
</div>
<footer id="footer" class="inner"><p>
Copyright &copy; 2013 - Chakib Benziane -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script src="/blog/javascripts/slash.js"></script>
<script src="/blog/javascripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
(function($){
$('.fancybox').fancybox();
})(jQuery);
</script> <!-- Delete or comment this line to disable Fancybox -->
<script type="text/javascript">
var disqus_shortname = 'sp4ke';
var disqus_script = 'count.js';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31299938-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</div>
</div>
</body>
</html>

@ -0,0 +1,99 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Category: life | ]]></title>
<link href="http://sp4ke.github.com/blog/blog/categories/life/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'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>
</feed>

@ -0,0 +1,154 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Category: life - </title>
<meta name="author" content="Chakib Benziane">
<meta name="description" content="Category: life">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/blog/atom.xml" rel="alternate" title="" type="application/atom+xml">
<link rel="canonical" href="http://sp4ke.github.com/blogblog/categories/life/">
<link href="/blog/favicon.png" rel="shortcut icon">
<link href="/blog/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="left-col">
<div class="intrude-less">
<header id="header" class="inner"><div class="profilepic">
<script src="/blog/javascripts/md5.js"></script>
<script type="text/javascript">
document.write("<a href='http://sp4ke.com'><img src='http://www.gravatar.com/avatar/" + MD5("chakib.benz@gmail.com") + "?s=160' alt='Profile Picture' style='width: 160px;'</a>");
</script>
</div>
<h1><a href="/blog/"></a></h1>
<p class="subtitle">An entrepreneur thaughts and ideas.</p>
<nav id="main-nav"><ul class="main-navigation">
<li><a href="/blog/">Blog</a></li>
<li><a href="/blog/blog/archives">Archives</a></li>
</ul>
</nav>
<nav id="sub-nav">
<div class="social">
<a class="rss" href="/blog/atom.xml" title="RSS">RSS</a>
</div>
</nav>
<!--<hgroup>
<h1><a href="/blog/"></a></h1>
<h2>An entrepreneur thaughts and ideas.</h2>
</hgroup>
-->
</header>
</div>
</div>
<div class="mid-col">
<div class="mid-col-container">
<div id="content" class="inner">
<section class="archives"><h1 class="year">2013</h1>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<div class="meta">
<span class="date"><time datetime="2013-04-18T11:51:00+02:00" itemprop="datePublished">Apr 18</time></span>
<br>
<span class="tags">
<a class='category' href='/blog/blog/categories/entrepreneurship/'>entrepreneurship</a>, <a class='category' href='/blog/blog/categories/experience/'>experience</a>, <a class='category' href='/blog/blog/categories/life/'>life</a>
</span>
</div>
<h1 class="title" itemprop="name"><a href="/blog/my-most-valuable-lesson-in-life-learnt-the-hard-way/">My most valuable lesson in life learnt the hard way</a></h1>
</article>
</div>
</div>
<footer id="footer" class="inner"><p>
Copyright &copy; 2013 - Chakib Benziane -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script src="/blog/javascripts/slash.js"></script>
<script src="/blog/javascripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
(function($){
$('.fancybox').fancybox();
})(jQuery);
</script> <!-- Delete or comment this line to disable Fancybox -->
<script type="text/javascript">
var disqus_shortname = 'sp4ke';
var disqus_script = 'count.js';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31299938-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</div>
</div>
</body>
</html>

@ -0,0 +1,73 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Category: programming | ]]></title>
<link href="http://sp4ke.github.com/blog/blog/categories/programming/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[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>

@ -0,0 +1,154 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Category: programming - </title>
<meta name="author" content="Chakib Benziane">
<meta name="description" content="Category: programming">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/blog/atom.xml" rel="alternate" title="" type="application/atom+xml">
<link rel="canonical" href="http://sp4ke.github.com/blogblog/categories/programming/">
<link href="/blog/favicon.png" rel="shortcut icon">
<link href="/blog/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="left-col">
<div class="intrude-less">
<header id="header" class="inner"><div class="profilepic">
<script src="/blog/javascripts/md5.js"></script>
<script type="text/javascript">
document.write("<a href='http://sp4ke.com'><img src='http://www.gravatar.com/avatar/" + MD5("chakib.benz@gmail.com") + "?s=160' alt='Profile Picture' style='width: 160px;'</a>");
</script>
</div>
<h1><a href="/blog/"></a></h1>
<p class="subtitle">An entrepreneur thaughts and ideas.</p>
<nav id="main-nav"><ul class="main-navigation">
<li><a href="/blog/">Blog</a></li>
<li><a href="/blog/blog/archives">Archives</a></li>
</ul>
</nav>
<nav id="sub-nav">
<div class="social">
<a class="rss" href="/blog/atom.xml" title="RSS">RSS</a>
</div>
</nav>
<!--<hgroup>
<h1><a href="/blog/"></a></h1>
<h2>An entrepreneur thaughts and ideas.</h2>
</hgroup>
-->
</header>
</div>
</div>
<div class="mid-col">
<div class="mid-col-container">
<div id="content" class="inner">
<section class="archives"><h1 class="year">2012</h1>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<div class="meta">
<span class="date"><time datetime="2012-04-29T20:26:09+02:00" itemprop="datePublished">Apr 29</time></span>
<br>
<span class="tags">
<a class='category' href='/blog/blog/categories/it/'>IT</a>, <a class='category' href='/blog/blog/categories/programming/'>programming</a>, <a class='category' href='/blog/blog/categories/python/'>python</a>
</span>
</div>
<h1 class="title" itemprop="name"><a href="/blog/Development-as-a-Service/">Development as a Service on its baby steps</a></h1>
</article>
</div>
</div>
<footer id="footer" class="inner"><p>
Copyright &copy; 2013 - Chakib Benziane -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script src="/blog/javascripts/slash.js"></script>
<script src="/blog/javascripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
(function($){
$('.fancybox').fancybox();
})(jQuery);
</script> <!-- Delete or comment this line to disable Fancybox -->
<script type="text/javascript">
var disqus_shortname = 'sp4ke';
var disqus_script = 'count.js';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31299938-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</div>
</div>
</body>
</html>

@ -0,0 +1,73 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Category: python | ]]></title>
<link href="http://sp4ke.github.com/blog/blog/categories/python/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[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>

@ -0,0 +1,154 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Category: python - </title>
<meta name="author" content="Chakib Benziane">
<meta name="description" content="Category: python">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/blog/atom.xml" rel="alternate" title="" type="application/atom+xml">
<link rel="canonical" href="http://sp4ke.github.com/blogblog/categories/python/">
<link href="/blog/favicon.png" rel="shortcut icon">
<link href="/blog/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="left-col">
<div class="intrude-less">
<header id="header" class="inner"><div class="profilepic">
<script src="/blog/javascripts/md5.js"></script>
<script type="text/javascript">
document.write("<a href='http://sp4ke.com'><img src='http://www.gravatar.com/avatar/" + MD5("chakib.benz@gmail.com") + "?s=160' alt='Profile Picture' style='width: 160px;'</a>");
</script>
</div>
<h1><a href="/blog/"></a></h1>
<p class="subtitle">An entrepreneur thaughts and ideas.</p>
<nav id="main-nav"><ul class="main-navigation">
<li><a href="/blog/">Blog</a></li>
<li><a href="/blog/blog/archives">Archives</a></li>
</ul>
</nav>
<nav id="sub-nav">
<div class="social">
<a class="rss" href="/blog/atom.xml" title="RSS">RSS</a>
</div>
</nav>
<!--<hgroup>
<h1><a href="/blog/"></a></h1>
<h2>An entrepreneur thaughts and ideas.</h2>
</hgroup>
-->
</header>
</div>
</div>
<div class="mid-col">
<div class="mid-col-container">
<div id="content" class="inner">
<section class="archives"><h1 class="year">2012</h1>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<div class="meta">
<span class="date"><time datetime="2012-04-29T20:26:09+02:00" itemprop="datePublished">Apr 29</time></span>
<br>
<span class="tags">
<a class='category' href='/blog/blog/categories/it/'>IT</a>, <a class='category' href='/blog/blog/categories/programming/'>programming</a>, <a class='category' href='/blog/blog/categories/python/'>python</a>
</span>
</div>
<h1 class="title" itemprop="name"><a href="/blog/Development-as-a-Service/">Development as a Service on its baby steps</a></h1>
</article>
</div>
</div>
<footer id="footer" class="inner"><p>
Copyright &copy; 2013 - Chakib Benziane -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script src="/blog/javascripts/slash.js"></script>
<script src="/blog/javascripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
(function($){
$('.fancybox').fancybox();
})(jQuery);
</script> <!-- Delete or comment this line to disable Fancybox -->
<script type="text/javascript">
var disqus_shortname = 'sp4ke';
var disqus_script = 'count.js';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31299938-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</div>
</div>
</body>
</html>

@ -0,0 +1,179 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Category: UI Design | ]]></title>
<link href="http://sp4ke.github.com/blog/blog/categories/ui-design/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[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="/images/jibli_old.png" width="390"></p>
<h4>After</h4>
<p><img class="hover center" src="/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="/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="/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="/images/jibli_design_1.jpg" width="50">
<img class="hover" src="/images/jibli_design_2.jpg" width="50">
<img class="hover" src="/images/jibli_design_3.jpg" width="50">
<img class="hover" src="/images/jibli_design_4.jpg" width="50">
<img class="hover" src="/images/jibli_design_5.jpg" width="50">
<img class="hover" src="/images/jibli_design_6.jpg" width="50">
<img class="hover" src="/images/jibli_design_7.jpg" width="50">
<img class="hover" src="/images/jibli_design_8.jpg" width="50">
<img class="hover" src="/images/jibli_design_9.jpg" width="50">
<img class="hover" src="/images/jibli_design_10.jpg" width="50">
<img class="hover" src="/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>
</feed>

@ -0,0 +1,154 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Category: UI Design - </title>
<meta name="author" content="Chakib Benziane">
<meta name="description" content="Category: UI Design">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/blog/atom.xml" rel="alternate" title="" type="application/atom+xml">
<link rel="canonical" href="http://sp4ke.github.com/blogblog/categories/ui-design/">
<link href="/blog/favicon.png" rel="shortcut icon">
<link href="/blog/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="left-col">
<div class="intrude-less">
<header id="header" class="inner"><div class="profilepic">
<script src="/blog/javascripts/md5.js"></script>
<script type="text/javascript">
document.write("<a href='http://sp4ke.com'><img src='http://www.gravatar.com/avatar/" + MD5("chakib.benz@gmail.com") + "?s=160' alt='Profile Picture' style='width: 160px;'</a>");
</script>
</div>
<h1><a href="/blog/"></a></h1>
<p class="subtitle">An entrepreneur thaughts and ideas.</p>
<nav id="main-nav"><ul class="main-navigation">
<li><a href="/blog/">Blog</a></li>
<li><a href="/blog/blog/archives">Archives</a></li>
</ul>
</nav>
<nav id="sub-nav">
<div class="social">
<a class="rss" href="/blog/atom.xml" title="RSS">RSS</a>
</div>
</nav>
<!--<hgroup>
<h1><a href="/blog/"></a></h1>
<h2>An entrepreneur thaughts and ideas.</h2>
</hgroup>
-->
</header>
</div>
</div>
<div class="mid-col">
<div class="mid-col-container">
<div id="content" class="inner">
<section class="archives"><h1 class="year">2013</h1>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<div class="meta">
<span class="date"><time datetime="2013-03-06T20:01:00+01:00" itemprop="datePublished">Mar 6</time></span>
<br>
<span class="tags">
<a class='category' href='/blog/blog/categories/ui-design/'>UI Design</a>, <a class='category' href='/blog/blog/categories/jib-li/'>jib.li</a>
</span>
</div>
<h1 class="title" itemprop="name"><a href="/blog/redesigning-jibli-lessons-learned-form-hack-design-part-1/">Redesigning jibli - lessons learned form Hack Design Part 1</a></h1>
</article>
</div>
</div>
<footer id="footer" class="inner"><p>
Copyright &copy; 2013 - Chakib Benziane -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script src="/blog/javascripts/slash.js"></script>
<script src="/blog/javascripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
(function($){
$('.fancybox').fancybox();
})(jQuery);
</script> <!-- Delete or comment this line to disable Fancybox -->
<script type="text/javascript">
var disqus_shortname = 'sp4ke';
var disqus_script = 'count.js';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31299938-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 400 B

@ -0,0 +1,175 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
This is a custom SVG webfont generated by Font Squirrel.
Designer : Dave Gandy
Foundry : Fort Awesome
</metadata>
<defs>
<font id="FontAwesomeRegular" horiz-adv-x="900" >
<font-face units-per-em="1000" ascent="750" descent="-250" />
<missing-glyph horiz-adv-x="250" />
<glyph unicode="&#xd;" horiz-adv-x="250" />
<glyph horiz-adv-x="0" />
<glyph horiz-adv-x="0" />
<glyph unicode=" " horiz-adv-x="250" />
<glyph unicode="&#x09;" horiz-adv-x="250" />
<glyph unicode="&#xa0;" horiz-adv-x="250" />
<glyph unicode="&#x2000;" horiz-adv-x="375" />
<glyph unicode="&#x2001;" horiz-adv-x="751" />
<glyph unicode="&#x2002;" horiz-adv-x="375" />
<glyph unicode="&#x2003;" horiz-adv-x="751" />
<glyph unicode="&#x2004;" horiz-adv-x="250" />
<glyph unicode="&#x2005;" horiz-adv-x="187" />
<glyph unicode="&#x2006;" horiz-adv-x="125" />
<glyph unicode="&#x2007;" horiz-adv-x="125" />
<glyph unicode="&#x2008;" horiz-adv-x="93" />
<glyph unicode="&#x2009;" horiz-adv-x="150" />
<glyph unicode="&#x200a;" horiz-adv-x="41" />
<glyph unicode="&#x202f;" horiz-adv-x="150" />
<glyph unicode="&#x205f;" horiz-adv-x="187" />
<glyph unicode="&#xe000;" horiz-adv-x="500" d="M0 0v0v0v0v0z" />
<glyph unicode="&#xf000;" horiz-adv-x="750" d="M3 727q10 23 34 23h675q25 0 35 -23t-8 -41l-298 -298v-313h121q16 0 27 -11t11 -26q0 -16 -11 -27t-27 -11h-375q-15 0 -26 11t-11 27q0 15 11 26t26 11h122v313l-298 298q-18 18 -8 41z" />
<glyph unicode="&#xf001;" horiz-adv-x="688" d="M0 112q0 24 11 44.5t30 35.5t45 24t55 9q13 0 24.5 -2t22.5 -5v388l500 144v-525q0 -23 -11 -43.5t-30 -36t-45 -24.5t-55 -9t-54.5 9t-44.5 24.5t-30 36t-11 43.5t11 43.5t30 35.5t44.5 24t54.5 9q24 0 47 -6v248l-312 -90v-377q0 -23 -11 -43.5t-30 -35.5t-45 -24 t-55 -9t-55 9t-45 24t-30 35.5t-11 43.5z" />
<glyph unicode="&#xf002;" horiz-adv-x="750" d="M0 437q0 65 24.5 122t67 99.5t99.5 67t122 24.5q64 0 121 -24.5t99.5 -67t67 -99.5t24.5 -122q0 -48 -13.5 -91t-38.5 -81l168 -167q9 -10 9 -23t-9 -22l-44 -44q-9 -9 -22 -9t-22 9l-168 168q-38 -25 -81 -38.5t-91 -13.5q-65 0 -122 24.5t-99.5 67t-67 99t-24.5 121.5z M125 437q0 -39 14.5 -73t40 -59.5t60 -40t73.5 -14.5t73 14.5t59.5 40t40 59.5t14.5 73t-14.5 73t-40 59.5t-59.5 40.5t-73 15t-73.5 -15t-60 -40.5t-40 -59.5t-14.5 -73zM194 437q0 25 9.5 46.5t25.5 37.5t37.5 25.5t46.5 9.5q10 0 16.5 -7t6.5 -17t-6.5 -16.5t-16.5 -6.5 q-30 0 -51 -21t-21 -51q0 -10 -6.5 -16.5t-16.5 -6.5t-17 6.5t-7 16.5z" />
<glyph unicode="&#xf003;" d="M0 56v587v32v19q0 23 16.5 39.5t39.5 16.5h19h750h19q23 0 39.5 -16.5t16.5 -39.5v-19v-30v-589q0 -23 -16.5 -39.5t-39.5 -16.5h-788q-23 0 -39.5 16.5t-16.5 39.5zM75 75h750v416q-15 -15 -28 -24q-29 -21 -61 -46t-64 -49q-19 -14 -36.5 -28t-32.5 -25q-3 -2 -6 -4.5 t-7 -5.5q-14 -11 -29.5 -22.5t-33.5 -22t-37.5 -17t-40.5 -6.5q-20 0 -39.5 6.5t-37 17t-33.5 22t-29 22.5q-4 3 -7 5.5t-6 4.5q-15 11 -32.5 25t-36.5 28q-32 24 -64 49t-61 46q-13 9 -28 24v-416zM75 643q0 -14 6 -30t16.5 -32t23 -30t26.5 -24q23 -17 49 -37l52 -38 q26 -20 50 -39t44 -34l22 -17q14 -11 28.5 -21t29 -17.5t27.5 -7.5h1h1q13 0 27.5 7.5t29 17.5t28.5 21l22 17q20 15 44 34t50 39l52 38q26 20 49 37q13 10 26 24t23.5 30t16.5 32t6 30v32h-750v-32z" />
<glyph unicode="&#xf004;" horiz-adv-x="846" d="M0 519q0 64 20 108t52.5 71.5t73.5 39.5t83 12q30 0 59 -10t54 -25t45.5 -32.5t35.5 -32.5q15 15 35.5 32.5t45.5 32.5t54 25t59 10q42 0 83 -12t73.5 -39.5t52.5 -71.5t20 -108q0 -44 -16.5 -83.5t-36 -69.5t-37 -48t-18.5 -19l-289 -288q-11 -11 -26 -11t-26 11 l-290 288q-1 1 -18 19t-36.5 48t-36 69.5t-16.5 83.5z" />
<glyph unicode="&#xf005;" horiz-adv-x="787" d="M0.5 465q4.5 13 25.5 16l238 35l106 215q10 20 23.5 20t22.5 -20l107 -215l237 -35q22 -3 26 -16t-11 -28l-172 -168l40 -236q4 -22 -7 -30t-30 3l-213 111l-212 -111q-20 -11 -31 -3t-7 30l41 236l-172 168q-16 15 -11.5 28z" />
<glyph unicode="&#xf006;" horiz-adv-x="787" d="M0.5 465q4.5 13 25.5 16l238 34l106 216q9 19 23 19t23 -19l107 -216l237 -34q22 -3 26 -16t-11 -28l-172 -168l40 -236q3 -16 -2 -24.5t-16 -8.5q-7 0 -19 5l-213 112l-212 -112q-12 -5 -19 -5q-11 0 -16 8.5t-3 24.5l41 236l-172 168q-16 15 -11.5 28zM136 421l100 -98 l29 -27l-7 -39l-24 -139l124 66l35 18l35 -18l124 -66l-23 139l-7 39l28 27l101 98l-139 20l-39 6l-18 35l-62 126l-62 -126l-17 -35l-39 -6z" />
<glyph unicode="&#xf007;" d="M0 34v7q11 19 19.5 40t17.5 42t19.5 40t25.5 34q7 7 15.5 13.5t19.5 10.5t23.5 5t25.5 3q37 6 77.5 12.5t78.5 12.5q4 17 7 34.5t8 33.5q-8 11 -16 21.5t-15.5 23t-13.5 28.5t-9 37q-2 11 -5 32.5t-6 44t-5.5 41t-2.5 22.5q0 25 10.5 56t33 58t58 45.5t84.5 18.5 t84.5 -18.5t58 -45.5t33 -58t10.5 -56q0 -4 -2.5 -22.5t-5.5 -41t-6 -44t-5 -32.5q-3 -21 -9 -37t-13.5 -28.5t-16 -23t-15.5 -21.5q5 -16 8 -33.5t7 -34.5q38 -6 78.5 -12.5t77.5 -12.5q13 -2 25.5 -3t23.5 -5t19.5 -10.5t15.5 -13.5q15 -15 25.5 -34t19.5 -40t17.5 -42 t19.5 -40v-7q-14 -8 -26.5 -18.5t-30.5 -15.5h-786q-18 5 -30.5 15.5t-26.5 18.5z" />
<glyph unicode="&#xf008;" d="M0 56v638q0 23 16.5 39.5t39.5 16.5h788q23 0 39.5 -16.5t16.5 -39.5v-638q0 -23 -16.5 -39.5t-39.5 -16.5h-788q-23 0 -39.5 16.5t-16.5 39.5zM56 75q0 -8 5.5 -13.5t13.5 -5.5h75q8 0 13.5 5.5t5.5 13.5v75q0 8 -5.5 13.5t-13.5 5.5h-75q-8 0 -13.5 -5.5t-5.5 -13.5 v-75zM56 250q0 -8 5.5 -13.5t13.5 -5.5h75q8 0 13.5 5.5t5.5 13.5v75q0 8 -5.5 13.5t-13.5 5.5h-75q-8 0 -13.5 -5.5t-5.5 -13.5v-75zM56 425q0 -8 5.5 -13.5t13.5 -5.5h75q8 0 13.5 5.5t5.5 13.5v75q0 8 -5.5 13.5t-13.5 5.5h-75q-8 0 -13.5 -5.5t-5.5 -13.5v-75zM56 600 q0 -8 5.5 -13.5t13.5 -5.5h75q8 0 13.5 5.5t5.5 13.5v75q0 8 -5.5 13.5t-13.5 5.5h-75q-8 0 -13.5 -5.5t-5.5 -13.5v-75zM225 75q0 -8 5.5 -13.5t13.5 -5.5h412q8 0 13.5 5.5t5.5 13.5v250q0 8 -5.5 13.5t-13.5 5.5h-412q-8 0 -13.5 -5.5t-5.5 -13.5v-250zM225 425 q0 -8 5.5 -13.5t13.5 -5.5h412q8 0 13.5 5.5t5.5 13.5v250q0 8 -5.5 13.5t-13.5 5.5h-412q-8 0 -13.5 -5.5t-5.5 -13.5v-250zM731 75q0 -8 5.5 -13.5t13.5 -5.5h75q8 0 13.5 5.5t5.5 13.5v75q0 8 -5.5 13.5t-13.5 5.5h-75q-8 0 -13.5 -5.5t-5.5 -13.5v-75zM731 250 q0 -8 5.5 -13.5t13.5 -5.5h75q8 0 13.5 5.5t5.5 13.5v75q0 8 -5.5 13.5t-13.5 5.5h-75q-8 0 -13.5 -5.5t-5.5 -13.5v-75zM731 425q0 -8 5.5 -13.5t13.5 -5.5h75q8 0 13.5 5.5t5.5 13.5v75q0 8 -5.5 13.5t-13.5 5.5h-75q-8 0 -13.5 -5.5t-5.5 -13.5v-75zM731 600 q0 -8 5.5 -13.5t13.5 -5.5h75q8 0 13.5 5.5t5.5 13.5v75q0 8 -5.5 13.5t-13.5 5.5h-75q-8 0 -13.5 -5.5t-5.5 -13.5v-75z" />
<glyph unicode="&#xf009;" d="M0 38v262q0 16 11 27t27 11h337q16 0 27 -11t11 -27v-262q0 -16 -11 -27t-27 -11h-337q-16 0 -27 11t-11 27zM0 450v263q0 15 11 26t27 11h337q16 0 27 -11t11 -26v-263q0 -16 -11 -26.5t-27 -10.5h-337q-16 0 -27 10.5t-11 26.5zM488 38v262q0 16 10.5 27t26.5 11h338 q15 0 26 -11t11 -27v-262q0 -16 -11 -27t-26 -11h-338q-16 0 -26.5 11t-10.5 27zM488 450v263q0 15 10.5 26t26.5 11h338q15 0 26 -11t11 -26v-263q0 -16 -11 -26.5t-26 -10.5h-338q-16 0 -26.5 10.5t-10.5 26.5z" />
<glyph unicode="&#xf00a;" d="M0 38v132q0 16 11 26.5t27 10.5h175q15 0 26 -10.5t11 -26.5v-132q0 -16 -11 -27t-26 -11h-175q-16 0 -27 11t-11 27zM0 320v110q0 16 11 26.5t27 10.5h175q15 0 26 -10.5t11 -26.5v-110q0 -16 -11 -27t-26 -11h-175q-16 0 -27 11t-11 27zM0 580v133q0 15 11 26t27 11 h175q15 0 26 -11t11 -26v-133q0 -16 -11 -27t-26 -11h-175q-16 0 -27 11t-11 27zM325 38v132q0 16 11 26.5t27 10.5h175q15 0 26 -10.5t11 -26.5v-132q0 -16 -11 -27t-26 -11h-175q-16 0 -27 11t-11 27zM325 320v110q0 16 11 26.5t27 10.5h175q15 0 26 -10.5t11 -26.5v-110 q0 -16 -11 -27t-26 -11h-175q-16 0 -27 11t-11 27zM325 580v133q0 15 11 26t27 11h175q15 0 26 -11t11 -26v-133q0 -16 -11 -27t-26 -11h-175q-16 0 -27 11t-11 27zM650 38v132q0 16 11 26.5t27 10.5h175q15 0 26 -10.5t11 -26.5v-132q0 -16 -11 -27t-26 -11h-175 q-16 0 -27 11t-11 27zM650 320v110q0 16 11 26.5t27 10.5h175q15 0 26 -10.5t11 -26.5v-110q0 -16 -11 -27t-26 -11h-175q-16 0 -27 11t-11 27zM650 580v133q0 15 11 26t27 11h175q15 0 26 -11t11 -26v-133q0 -16 -11 -27t-26 -11h-175q-16 0 -27 11t-11 27z" />
<glyph unicode="&#xf00b;" d="M0 38v132q0 16 11 26.5t27 10.5h145q15 0 26 -10.5t11 -26.5v-132q0 -16 -11 -27t-26 -11h-145q-16 0 -27 11t-11 27zM0 320v110q0 16 11 26.5t27 10.5h145q15 0 26 -10.5t11 -26.5v-110q0 -16 -11 -27t-26 -11h-145q-16 0 -27 11t-11 27zM0 580v133q0 15 11 26t27 11 h145q15 0 26 -11t11 -26v-133q0 -16 -11 -27t-26 -11h-145q-16 0 -27 11t-11 27zM295 38v132q0 16 11 26.5t27 10.5h530q15 0 26 -10.5t11 -26.5v-132q0 -16 -11 -27t-26 -11h-530q-16 0 -27 11t-11 27zM295 320v110q0 16 11 26.5t27 10.5h530q15 0 26 -10.5t11 -26.5v-110 q0 -16 -11 -27t-26 -11h-530q-16 0 -27 11t-11 27zM295 580v133q0 15 11 26t27 11h530q15 0 26 -11t11 -26v-133q0 -16 -11 -27t-26 -11h-530q-16 0 -27 11t-11 27z" />
<glyph unicode="&#xf00c;" d="M0 312.5q0 16.5 11 27.5l85 85q11 11 27.5 11t27.5 -11l178 -178q11 -11 27.5 -11t27.5 11l364 364q11 11 27.5 11t27.5 -11l85 -85q11 -11 11 -27.5t-11 -27.5l-444 -444q-11 -11 -30.5 -19t-35.5 -8h-43q-17 0 -36.5 8t-30.5 19l-257 258q-11 11 -11 27.5z" />
<glyph unicode="&#xf00d;" horiz-adv-x="750" d="M0 94q0 19 14 33l248 249l-248 244q-14 14 -14 33t14 33l49 49q14 14 33 14t33 -14l246 -246l246 246q14 14 33 14t33 -14l49 -49q14 -14 14 -33t-14 -33l-248 -249l248 -244q14 -14 14 -32.5t-14 -32.5l-49 -50q-14 -14 -33 -14t-33 14l-246 247l-247 -247 q-14 -14 -32.5 -14t-32.5 14l-49 49q-14 14 -14 33z" />
<glyph unicode="&#xf00e;" horiz-adv-x="750" d="M0 437q0 65 24.5 122t67 99.5t99.5 67t122 24.5q64 0 121 -24.5t99.5 -67t67 -99.5t24.5 -122q0 -48 -13.5 -91t-38.5 -81l168 -167q9 -10 9 -23t-9 -22l-44 -44q-9 -9 -22 -9t-22 9l-168 168q-38 -25 -81 -38.5t-91 -13.5q-65 0 -122 24.5t-99.5 67t-67 99t-24.5 121.5z M125 437q0 -39 14.5 -73t40 -59.5t60 -40t73.5 -14.5t73 14.5t59.5 40t40 59.5t14.5 73t-14.5 73t-40 59.5t-59.5 40.5t-73 15t-73.5 -15t-60 -40.5t-40 -59.5t-14.5 -73zM188 422v31q0 7 4.5 11.5t10.5 4.5h78v78q0 6 4.5 10.5t11.5 4.5h31q7 0 11.5 -4.5t4.5 -10.5v-78h78 q16 0 16 -16v-31q0 -16 -16 -16h-78v-78q0 -16 -16 -16h-31q-16 0 -16 16v78h-78q-6 0 -10.5 4.5t-4.5 11.5z" />
<glyph unicode="&#xf010;" horiz-adv-x="750" d="M0 437q0 65 24.5 122t67 99.5t99.5 67t122 24.5q64 0 121 -24.5t99.5 -67t67 -99.5t24.5 -122q0 -48 -13.5 -91t-38.5 -81l168 -167q9 -10 9 -23t-9 -22l-44 -44q-9 -9 -22 -9t-22 9l-168 168q-38 -25 -81 -38.5t-91 -13.5q-65 0 -122 24.5t-99.5 67t-67 99t-24.5 121.5z M125 437q0 -39 14.5 -73t40 -59.5t60 -40t73.5 -14.5t73 14.5t59.5 40t40 59.5t14.5 73t-14.5 73t-40 59.5t-59.5 40.5t-73 15t-73.5 -15t-60 -40.5t-40 -59.5t-14.5 -73zM188 422v31q0 7 4.5 11.5t10.5 4.5h219q16 0 16 -16v-31q0 -16 -16 -16h-219q-6 0 -10.5 4.5 t-4.5 11.5z" />
<glyph unicode="&#xf011;" horiz-adv-x="713" d="M0 356q0 89 41 166.5t115 128.5q6 3 14 3q7 -1 12 -8l42 -62q10 -16 -5 -26q-51 -35 -78.5 -88t-27.5 -114q0 -50 19 -94.5t52 -77.5t77.5 -52t94.5 -19q51 0 95.5 19t77.5 52t52 77.5t19 94.5q0 61 -28 114t-79 88q-6 3 -8 12q-1 6 3 14l43 62q5 6 12 7.5t14 -2.5 q73 -51 114.5 -128.5t41.5 -166.5q0 -74 -28 -138.5t-76.5 -113t-113.5 -76.5t-139 -28t-138.5 28t-113 76.5t-76.5 113t-28 138.5zM300 394v337q0 19 19 19h75q8 0 13.5 -5.5t5.5 -13.5v-337q0 -8 -5.5 -13.5t-13.5 -5.5h-75q-19 0 -19 19z" />
<glyph unicode="&#xf012;" d="M0 19v127q0 8 5.5 13.5t13.5 5.5h94q8 0 13 -5.5t5 -13.5v-127q0 -8 -5 -13.5t-13 -5.5h-94q-19 0 -19 19zM192 19v212q0 8 5.5 13.5t13.5 5.5h94q8 0 13 -5.5t5 -13.5v-212q0 -8 -5 -13.5t-13 -5.5h-94q-8 0 -13.5 5.5t-5.5 13.5zM384 19v330q0 8 5.5 13.5t13.5 5.5h94 q8 0 13.5 -5.5t5.5 -13.5v-330q0 -8 -5.5 -13.5t-13.5 -5.5h-94q-8 0 -13.5 5.5t-5.5 13.5zM577 19v486q0 8 5 13.5t13 5.5h94q8 0 13.5 -5.5t5.5 -13.5v-486q0 -8 -5.5 -13.5t-13.5 -5.5h-94q-8 0 -13 5.5t-5 13.5zM769 19v712q0 19 19 19h93q19 0 19 -19v-712 q0 -19 -19 -19h-93q-19 0 -19 19z" />
<glyph unicode="&#xf013;" horiz-adv-x="748" d="M0 320v111q0 7 7 9q19 5 39.5 8t40.5 5q4 0 8 0.5t9 1.5q5 14 10.5 27.5t12.5 27.5q-12 17 -26.5 36.5t-30.5 37.5q-5 5 0 12q19 23 40 44t44 40q5 5 12 0q11 -11 22.5 -20t23.5 -17q7 -5 14 -10.5t14 -10.5q26 14 55 23q3 28 6 51.5t8 45.5q2 8 9 8h111q9 0 9 -8 q4 -19 6.5 -38t5.5 -39l3 -20q14 -5 27.5 -10t26.5 -13q7 5 13 9.5t12 9.5q13 10 26 19t25 20q6 6 12 -1l11 -11q5 -5 11 -10q15 -14 30 -29.5t29 -32.5q4 -6 0 -12q-13 -15 -26 -32.5t-30 -40.5q15 -29 24 -58q12 -3 24.5 -4.5t25.5 -3.5q11 -2 23.5 -3.5t23.5 -3.5 q7 -2 7 -9v-111q0 -7 -7 -9q-18 -5 -38 -7.5t-40 -4.5q-5 -1 -9.5 -1.5t-9.5 -1.5q-5 -14 -10.5 -27.5t-12.5 -27.5q12 -17 26.5 -36.5t30.5 -37.5q5 -5 0 -12q-38 -47 -84 -84q-5 -5 -12 0q-11 11 -22.5 20t-23.5 17q-7 5 -14 10.5t-14 10.5q-26 -14 -55 -23 q-2 -23 -5.5 -48t-9.5 -49q-2 -8 -9 -8h-111q-7 0 -9 8q-3 19 -5.5 38t-5.5 39l-3 20q-14 5 -27.5 10t-26.5 13q-6 -5 -12.5 -9.5t-12.5 -9.5q-26 -18 -51 -39q-6 -6 -12 1q-5 5 -11 10.5t-11 10.5q-15 14 -30 29.5t-29 32.5q-5 6 0 12q15 18 29 37t27 36q-15 29 -24 58 q-12 3 -24.5 4.5t-24.5 3.5t-24.5 3.5t-23.5 3.5q-7 2 -7 9zM261 375q0 -24 9 -44.5t24.5 -35.5t36 -24t43.5 -9t43.5 9t35.5 24t24 35.5t9 44.5q0 23 -9 43.5t-24 35.5t-35.5 24t-43.5 9t-43.5 -9t-36 -24t-24.5 -35.5t-9 -43.5z" />
<glyph unicode="&#xf014;" horiz-adv-x="648" d="M0 582q0 8 0.5 16t0.5 17q11 6 32.5 10t47 7t52.5 5t49 3q-2 16 -1 32t7 33q1 4 6 11.5t18.5 15t40 13t71.5 5.5t71.5 -5.5t40 -13t18 -15.5t6.5 -12q6 -17 7 -32.5t-1 -31.5q22 -1 49 -3t53 -5t47 -7t32 -10q1 -9 1 -17v-16v-16q0 -8 -1 -17q-10 -6 -30.5 -10t-45.5 -7 t-51 -5t-48 -3t-37 -1.5t-16 -0.5l-95 -1h-13h-28q-19 0 -54 1q-2 0 -16.5 0.5t-36.5 1.5t-48 3t-51 5t-45.5 7t-30.5 10q0 9 -0.5 17t-0.5 16zM67 484q41 -5 84.5 -7.5t75.5 -3.5q9 -1 23 -1h74h73q14 0 23 1q33 1 76.5 3.5t84.5 7.5q-5 -76 -8 -154.5t-7 -154.5 q-1 -19 -1.5 -42.5t-2 -45.5t-6 -40.5t-14.5 -28.5q-12 -11 -42 -14.5t-58 -3.5h-236q-29 0 -58.5 3.5t-41.5 14.5q-10 10 -14.5 28.5t-6 40.5t-2 45.5t-1.5 42.5q-4 76 -7.5 154.5t-7.5 154.5zM147 383q1 -15 1 -28t1 -22q0 -11 1 -19q2 -34 3.5 -68t3.5 -67q1 -8 1 -17 v-20v-12q0 -6 0.5 -14t1.5 -19q1 -8 9.5 -14t13.5 -6q5 -1 10 -1t8 -1h11q5 0 5 19v286q0 8 -5.5 13.5t-13.5 5.5l-33 2q-8 0 -13 -5t-5 -13zM255.5 657q0.5 -6 1.5 -15q9 1 20 1h47l67 -1q1 9 1.5 15t-0.5 11q-11 3 -29.5 4.5t-38.5 1.5t-38.5 -1.5t-29.5 -4.5 q-1 -5 -0.5 -11zM292 94q0 -8 5 -13.5t13 -5.5h28q8 0 13.5 5.5t5.5 13.5v285q0 8 -11 13t-14 5h-15q-3 0 -14 -5t-11 -13v-285zM432 94q0 -19 4 -19h11q3 1 13 1.5t15 0.5q5 1 8.5 6.5t4.5 13.5q0 11 0.5 19t0.5 14q0 7 1 12v20q0 9 1 17q2 33 3 66.5t3 67.5q0 9 1 20 q1 9 1.5 22t1.5 28q0 8 -5 13t-13 5l-33 -2q-8 0 -13 -5.5t-5 -13.5v-286z" />
<glyph unicode="&#xf015;" d="M1 384.5q3 11.5 13 19.5l412 338q11 8 24 8t24 -8l126 -104v58q0 19 19 19h112q19 0 19 -19v-180l136 -112q10 -8 13 -19.5t-1 -22.5q-10 -24 -36 -24h-75v-300q0 -16 -10.5 -27t-26.5 -11h-206v225h-188v-225h-206q-16 0 -27 11t-11 27v300h-75q-25 0 -35 24 q-4 11 -1 22.5z" />
<glyph unicode="&#xf016;" horiz-adv-x="600" d="M0 56v638q0 23 16.5 39.5t39.5 16.5h219v-269q0 -23 16.5 -39.5t39.5 -16.5h269v-369q0 -23 -16.5 -39.5t-39.5 -16.5h-488q-23 0 -39.5 16.5t-16.5 39.5zM331 481v266h3l263 -263v-3h-266z" />
<glyph unicode="&#xf017;" horiz-adv-x="750" d="M0 375q0 78 29.5 146t80.5 119t119 80.5t146 29.5t146 -29.5t119 -80.5t80.5 -119t29.5 -146t-29.5 -146t-80.5 -119t-119 -80.5t-146 -29.5t-146 29.5t-119 80.5t-80.5 119t-29.5 146zM113 375q0 -54 20.5 -102t56 -83.5t83.5 -56t102 -20.5t102 20.5t84 56t56.5 83.5 t20.5 102t-20.5 102t-56.5 84t-84 56.5t-102 20.5t-102 -20.5t-83.5 -56.5t-56 -84t-20.5 -102zM319 375v150q0 23 16.5 39.5t39.5 16.5t39.5 -16.5t16.5 -39.5v-127l90 -89q17 -17 17 -40t-17 -40q-8 -8 -18.5 -12t-21.5 -4t-21.5 4t-18.5 12l-106 106q-1 1 -1 2t-1 2 q-7 7 -10 14q-4 9 -4 22z" />
<glyph unicode="&#xf018;" d="M1 17l290 716q3 7 10.5 12t15.5 5h95l-4 -83h84l-4 83h95q8 0 15.5 -5t10.5 -12l290 -716q3 -7 -0.5 -12t-11.5 -5h-361l-13 250h-126l-13 -250h-361q-8 0 -11.5 5t-0.5 12zM394 389h112l-10 202h-92z" />
<glyph unicode="&#xf019;" d="M0 19v300q0 8 5.5 13.5t13.5 5.5h112q8 0 13.5 -5.5t5.5 -13.5v-169h600v169q0 8 5.5 13.5t13.5 5.5h112q8 0 13.5 -5.5t5.5 -13.5v-300q0 -19 -19 -19h-862q-19 0 -19 19zM169 461q3 8 19 8h150v244q0 15 10.5 26t26.5 11h150q16 0 27 -11t11 -26v-244h150q15 0 18 -8 t-8 -19l-246 -247q-11 -11 -27 -11t-27 11l-246 247q-11 11 -8 19z" />
<glyph unicode="&#xf01a;" horiz-adv-x="750" d="M0 375q0 78 29.5 146t80.5 119t119 80.5t146 29.5t146 -29.5t119 -80.5t80.5 -119t29.5 -146t-29.5 -146t-80.5 -119t-119 -80.5t-146 -29.5t-146 29.5t-119 80.5t-80.5 119t-29.5 146zM113 375q0 -54 20.5 -102t56 -83.5t83.5 -56t102 -20.5t102 20.5t84 56t56.5 83.5 t20.5 102t-20.5 102t-56.5 83.5t-84 56t-102 20.5t-102 -20.5t-83.5 -56t-56 -83.5t-20.5 -102zM206 349q4 10 24 10h79v185q0 8 5.5 13.5t13.5 5.5h94q8 0 13.5 -5.5t5.5 -13.5v-185h79q20 0 24 -10t-10 -24l-136 -136q-9 -9 -23 -9q-13 0 -23 9l-136 136q-14 14 -10 24z " />
<glyph unicode="&#xf01b;" horiz-adv-x="750" d="M0 375q0 78 29.5 146t80.5 119t119 80.5t146 29.5t146 -29.5t119 -80.5t80.5 -119t29.5 -146t-29.5 -146t-80.5 -119t-119 -80.5t-146 -29.5t-146 29.5t-119 80.5t-80.5 119t-29.5 146zM113 375q0 -54 20.5 -102t56 -83.5t83.5 -56t102 -20.5t102 20.5t84 56t56.5 83.5 t20.5 102t-20.5 102t-56.5 83.5t-84 56t-102 20.5t-102 -20.5t-83.5 -56t-56 -83.5t-20.5 -102zM206 401q-4 10 10 24l136 136q10 9 23 9q12 0 23 -9l136 -136q14 -14 10 -24t-24 -10h-79v-185q0 -8 -5.5 -13.5t-13.5 -5.5h-94q-8 0 -13.5 5.5t-5.5 13.5v185h-79 q-20 0 -24 10z" />
<glyph unicode="&#xf01c;" d="M0 38v282q0 16 4.5 37t10.5 35l139 324q6 14 21.5 24t30.5 10h488q15 0 30.5 -10t21.5 -24l139 -324q6 -14 10.5 -35t4.5 -37v-282q0 -16 -11 -27t-26 -11h-825q-16 0 -27 11t-11 27zM116 339h189l56 -113h187l57 113h179q-1 2 -1 4.5t-1 4.5l-125 290h-414l-125 -291 q-1 -1 -1 -3.5t-1 -4.5z" />
<glyph unicode="&#xf01d;" horiz-adv-x="750" d="M0 375q0 78 29.5 146t80.5 119t119 80.5t146 29.5t146 -29.5t119 -80.5t80.5 -119t29.5 -146t-29.5 -146t-80.5 -119t-119 -80.5t-146 -29.5t-146 29.5t-119 80.5t-80.5 119t-29.5 146zM113 375q0 -54 20.5 -102t56 -83.5t83.5 -56t102 -20.5t102 20.5t84 56t56.5 83.5 t20.5 102t-20.5 102t-56.5 84t-84 56.5t-102 20.5t-102 -20.5t-83.5 -56.5t-56 -84t-20.5 -102zM258 220v310q0 9 8 14q8 4 15 0l269 -156q8 -3 8 -13t-8 -13l-269 -156q-4 -2 -8 -2q-3 0 -7 2q-8 5 -8 14z" />
<glyph unicode="&#xf01e;" horiz-adv-x="747" d="M0 375q0 78 29.5 146t80.5 119t119 80.5t146 29.5q66 0 127.5 -23t112.5 -65l76 76q16 16 27 11.5t11 -27.5v-217q0 -15 -11 -26q-10 -10 -25 -10l-217 -1q-23 0 -27.5 11.5t11.5 27.5l75 75q-35 26 -75.5 41t-84.5 15q-54 0 -102 -20.5t-83.5 -56.5t-56 -84t-20.5 -102 t20.5 -102t56 -83.5t83.5 -56t102 -20.5q49 0 93.5 17t79.5 47.5t58 72t29 90.5q1 6 7 12q7 5 14 4l75 -10q8 -1 12.5 -7t3.5 -14q-9 -69 -42 -128.5t-83 -103t-113.5 -68.5t-133.5 -25q-78 0 -146 29.5t-119 80.5t-80.5 119t-29.5 146z" />
<glyph unicode="&#xf021;" d="M3 160l70 206q4 13 18 20q15 6 28 2l206 -70q21 -7 21.5 -19t-19.5 -22l-95 -47q24 -36 57.5 -63t75.5 -41q51 -18 103 -13.5t97.5 26.5t80.5 61t53 90q2 8 8.5 11t14.5 1l71 -24q17 -7 12 -24q-25 -74 -75 -129t-114.5 -86.5t-139 -37.5t-147.5 19q-63 21 -113.5 62 t-84.5 98l-97 -47q-20 -11 -29.5 -2.5t-1.5 29.5zM95 495q25 73 75 128.5t114.5 87.5t138.5 38t148 -19q63 -22 113 -63t85 -98l97 48q20 10 29.5 1.5t1.5 -29.5l-70 -205q-4 -14 -18 -21q-15 -6 -28 -2l-206 70q-21 7 -21.5 19t19.5 22l95 47q-24 36 -58 63t-76 41 q-51 18 -103 13.5t-97 -26.5t-80 -61t-53 -90q-2 -8 -9 -11t-14 -1l-71 25q-8 2 -11 9t-1 14z" />
<glyph unicode="&#xf022;" d="M0 56v638q0 23 16.5 39.5t39.5 16.5h788q23 0 39.5 -16.5t16.5 -39.5v-638q0 -23 -16.5 -39.5t-39.5 -16.5h-788q-23 0 -39.5 16.5t-16.5 39.5zM75 75h750v525h-750v-525zM150 169v37q0 19 19 19h75q8 0 13.5 -5.5t5.5 -13.5v-37q0 -8 -5.5 -13.5t-13.5 -5.5h-75 q-19 0 -19 19zM150 319v37q0 19 19 19h75q8 0 13.5 -5.5t5.5 -13.5v-37q0 -8 -5.5 -13.5t-13.5 -5.5h-75q-19 0 -19 19zM150 469v37q0 19 19 19h75q8 0 13.5 -5.5t5.5 -13.5v-37q0 -8 -5.5 -13.5t-13.5 -5.5h-75q-19 0 -19 19zM338 169v37q0 8 5 13.5t13 5.5h375 q19 0 19 -19v-37q0 -19 -19 -19h-375q-8 0 -13 5.5t-5 13.5zM338 319v37q0 8 5 13.5t13 5.5h375q19 0 19 -19v-37q0 -19 -19 -19h-375q-8 0 -13 5.5t-5 13.5zM338 469v37q0 8 5 13.5t13 5.5h375q19 0 19 -19v-37q0 -19 -19 -19h-375q-8 0 -13 5.5t-5 13.5z" />
<glyph unicode="&#xf023;" horiz-adv-x="750" d="M0 56v300q0 23 16.5 40t39.5 17h57v85q0 52 20.5 98t56 80t83.5 54t102 20t102 -20t84 -54t56.5 -80t20.5 -98v-85h56q23 0 39.5 -17t16.5 -40v-300q0 -23 -16.5 -39.5t-39.5 -16.5h-638q-23 0 -39.5 16.5t-16.5 39.5zM225 413h300v85q0 29 -12 54.5t-32 44.5t-47.5 30 t-58.5 11t-58.5 -11t-47.5 -30t-32 -44.5t-12 -54.5v-85z" />
<glyph unicode="&#xf024;" d="M0 675q0 31 22 53t53 22t53 -22t22 -53q0 -20 -10 -36.5t-27 -27.5v-592q0 -8 -5.5 -13.5t-13.5 -5.5h-38q-8 0 -13 5.5t-5 13.5v592q-17 11 -27.5 27.5t-10.5 36.5zM150 203v364q0 16 9.5 32t23.5 24q51 27 92 42t70 22q34 8 61 9q33 0 60.5 -5.5t52.5 -14.5t48.5 -21 t48.5 -25q31 -14 71 -16q34 -2 80 7.5t101 42.5q14 8 23 3t9 -21v-365q0 -15 -9 -31.5t-23 -24.5q-55 -33 -101 -42.5t-80 -7.5q-40 2 -71 16q-25 13 -48.5 25t-48.5 21t-52.5 14.5t-60.5 5.5q-27 -1 -61 -9q-29 -7 -70 -22t-92 -43q-14 -8 -23.5 -2t-9.5 22z" />
<glyph unicode="&#xf025;" d="M0 356q0 54 18.5 104.5t50 94t75 79.5t93.5 62t104.5 40t108.5 14t108.5 -14t104.5 -40t93.5 -62t75 -79.5t50 -94t18.5 -104.5q0 -87 -36 -165l-13 -28l-81 -12q-13 -49 -52.5 -81t-92.5 -32v-19q0 -8 -5.5 -13.5t-13.5 -5.5h-38q-8 0 -13 5.5t-5 13.5v337q0 8 5 13.5 t13 5.5h38q8 0 13.5 -5.5t5.5 -13.5v-18q42 0 75.5 -21t53.5 -54l19 2q15 43 15 91q0 58 -31 109.5t-80 89.5t-109 60.5t-118 22.5t-118 -22.5t-108.5 -60.5t-79.5 -89.5t-31 -109.5q0 -46 14 -91l19 -2q20 33 53.5 54t75.5 21v18q0 8 5.5 13.5t13.5 5.5h38q8 0 13 -5.5 t5 -13.5v-337q0 -8 -5 -13.5t-13 -5.5h-38q-8 0 -13.5 5.5t-5.5 13.5v19q-53 0 -92.5 32t-52.5 81l-81 12l-13 28q-36 78 -36 165z" />
<glyph unicode="&#xf026;" horiz-adv-x="425" d="M0 286v178q0 8 5.5 13.5t13.5 5.5h196l153 153q23 23 39.5 16t16.5 -39v-476q0 -32 -16.5 -39t-39.5 16l-153 153h-196q-8 0 -13.5 5.5t-5.5 13.5z" />
<glyph unicode="&#xf027;" horiz-adv-x="600" d="M0 286v178q0 8 5.5 13.5t13.5 5.5h196l153 153q23 23 39.5 16t16.5 -39v-476q0 -32 -16.5 -39t-39.5 16l-153 153h-196q-8 0 -13.5 5.5t-5.5 13.5zM482 205q-4 15 4 29q39 67 39 141q0 73 -39 141q-8 14 -4 29t18 23t28.5 4t22.5 -18q49 -87 49 -179t-49 -179 q-11 -19 -33 -19q-8 0 -18 5q-14 8 -18 23z" />
<glyph unicode="&#xf028;" d="M0 286v178q0 8 5.5 13.5t13.5 5.5h196l153 153q23 23 39.5 16t16.5 -39v-476q0 -32 -16.5 -39t-39.5 16l-153 153h-196q-8 0 -13.5 5.5t-5.5 13.5zM482 205q-4 15 4 29q39 67 39 141q0 73 -39 141q-8 14 -4 29t18 23t28.5 4t22.5 -18q49 -87 49 -179t-49 -179 q-11 -19 -33 -19q-8 0 -18 5q-14 8 -18 23zM603 117q-3 15 5 29q67 105 67 229t-67 229q-8 14 -5 29t17 23t29 5t23 -17q38 -61 58 -129t20 -140t-20 -140t-58 -129q-5 -9 -14 -13.5t-18 -4.5q-11 0 -20 6q-14 8 -17 23zM723.5 30q-2.5 15 5.5 28q48 72 72 152t24 165 t-24 165t-72 152q-8 13 -5.5 28t16.5 24q13 8 28 5t24 -16q54 -81 81 -171.5t27 -186.5t-27 -186.5t-81 -171.5q-12 -17 -32 -17q-11 0 -20 6q-14 9 -16.5 24z" />
<glyph unicode="&#xf029;" horiz-adv-x="750" d="M0 0v341h341v-341h-341zM0 409v341h341v-341h-341zM68 68h205v205h-205v-205zM68 477h205v205h-205v-205zM136 136v69h69v-69h-69zM136 545v68h69v-68h-69zM409 0v341h204v-68h69v68h68v-205h-205v68h-68v-204h-68zM409 409v341h341v-341h-341zM477 477h205v205h-205 v-205zM545 0v68h68v-68h-68zM545 545v68h68v-68h-68zM682 0v68h68v-68h-68z" />
<glyph unicode="&#xf02a;" d="M0 0v750h75v-750h-75zM111 0v750h18v-750h-18zM174 0v750h57v-750h-57zM266 0v750h38v-750h-38zM349 0v750h37v-750h-37zM441 0v750h18v-750h-18zM495 0v750h75v-750h-75zM596 0v750h38v-750h-38zM688 0v750h19v-750h-19zM771 0v750h18v-750h-18zM825 0v750h75v-750h-75z " />
<glyph unicode="&#xf02b;" horiz-adv-x="750" d="M0 474v218q0 24 17 41t41 17h218q24 0 53 -12t46 -29l358 -358q17 -17 17 -41t-17 -41l-252 -252q-17 -17 -41 -17t-41 17l-358 358q-17 17 -29 46t-12 53zM94 600q0 -23 16.5 -39.5t39.5 -16.5t39.5 16.5t16.5 39.5t-16.5 39.5t-39.5 16.5t-39.5 -16.5t-16.5 -39.5z" />
<glyph unicode="&#xf02c;" horiz-adv-x="898" d="M0 475v217q0 24 17 41t41 17h217q24 0 53.5 -11.5t45.5 -29.5l321 -358q16 -17 16.5 -41t-16.5 -41l-252 -251q-17 -17 -41 -17.5t-41 17.5l-320 358q-16 18 -28.5 46.5t-12.5 52.5zM94 600q0 -23 16.5 -39.5t39.5 -16.5t39.5 16.5t16.5 39.5t-16.5 39.5t-39.5 16.5 t-39.5 -16.5t-16.5 -39.5zM379 749h83q24 0 53.5 -12t45.5 -29l321 -358q16 -18 16.5 -41.5t-16.5 -40.5l-252 -251q-17 -17 -41 -17.5t-41 17.5l-6 7l246 245q17 17 16.5 41t-16.5 41l-320 358q-15 16 -40.5 27t-48.5 13z" />
<glyph unicode="&#xf02d;" horiz-adv-x="835" d="M5 152q1 8 2 15.5t2 16.5q0 5 -2 10t-1 10q1 8 7.5 15.5t12.5 17.5q11 18 22 44t16 45q2 8 -0.5 15t-0.5 13q2 8 8 13.5t10 11.5q5 9 10.5 20.5t10.5 24t8 24.5t4 20t-1 16t0 14q3 8 10 13t12 12q5 6 10.5 17t11 24t9.5 25.5t5 22.5q1 6 -2 12t-1 13t9 14.5t13 15.5 q8 12 14 28.5t14.5 30t22.5 21t38 0.5l-1 -2q15 5 26 5h381q38 0 58 -28q20 -26 9 -63l-138 -442q-9 -31 -38 -52.5t-62 -21.5h-436q-5 0 -10 -1t-9 -6q-6 -10 0 -27q8 -21 29.5 -37t42.5 -16h462q14 0 28 10.5t18 23.5l151 482q2 8 2.5 14.5t-0.5 13.5q20 -7 30 -21 q20 -26 9 -63l-138 -442q-9 -32 -38 -53t-62 -21h-462q-20 0 -39 7t-36 19t-30 28.5t-20 35.5q-12 33 -1 62zM244 469q-5 -19 13 -19h300q8 0 15 5.5t9 13.5l12 37q2 8 -1.5 13.5t-11.5 5.5h-300q-8 0 -15.5 -5.5t-9.5 -13.5zM278 581q-2 -8 1.5 -13t11.5 -5h300q8 0 15 5 t10 13l11 38q2 8 -1.5 13.5t-11.5 5.5h-300q-8 0 -15 -5.5t-10 -13.5z" />
<glyph unicode="&#xf02e;" horiz-adv-x="600" d="M0 54v641q0 17 9 30.5t25 20.5q5 2 10 3t11 1h490q5 0 10.5 -1t10.5 -3q16 -7 25 -20.5t9 -30.5v-641q0 -17 -9 -30.5t-25 -19.5q-15 -7 -31.5 -3.5t-27.5 15.5l-207 207l-207 -207q-11 -12 -27.5 -15.5t-31.5 3.5q-16 7 -25 20t-9 30z" />
<glyph unicode="&#xf02f;" d="M0 19v169q0 23 9 43.5t24.5 35.5t36 24t43.5 9h675q23 0 43.5 -9t35.5 -24t24 -35.5t9 -43.5v-169q0 -19 -19 -19h-862q-19 0 -19 19zM131 94q0 -8 5.5 -13t13.5 -5h600q8 0 13.5 5t5.5 13v19q0 8 -5.5 13.5t-13.5 5.5h-600q-8 0 -13.5 -5.5t-5.5 -13.5v-19zM150 356v357 q0 15 11 26t27 11h318v-187q0 -24 16.5 -40.5t39.5 -16.5h188v-150h-600zM562 563v187l188 -187h-188z" />
<glyph unicode="&#xf030;" d="M0 56v525q0 23 16.5 40t39.5 17h179l28 61q9 21 32.5 36t46.5 15h216q23 0 46.5 -15t32.5 -36l28 -61h179q23 0 39.5 -17t16.5 -40v-525q0 -23 -16.5 -39.5t-39.5 -16.5h-788q-23 0 -39.5 16.5t-16.5 39.5zM216 319q0 -49 18.5 -91.5t50 -74.5t74.5 -50.5t91 -18.5 t91 18.5t74.5 50.5t50 74.5t18.5 91.5q0 48 -18.5 91t-50 74.5t-74.5 50t-91 18.5t-91 -18.5t-74.5 -50t-50 -74.5t-18.5 -91zM291 319q0 33 12.5 62t34 50.5t50.5 34t62 12.5t62 -12.5t50.5 -34t34 -50.5t12.5 -62t-12.5 -62t-34 -51t-50.5 -34.5t-62 -12.5t-62 12.5 t-50.5 34.5t-34 51t-12.5 62z" />
<glyph unicode="&#xf031;" horiz-adv-x="803" d="M0 0l1 39q5 2 14.5 4t23.5 4q45 9 53 16q8 5 24 33l114 300l135 354h36h26l5 -10l99 -235q16 -38 31 -74t29 -71t25.5 -63.5t20.5 -50.5q6 -14 14 -34t18 -46q11 -32 31 -73q12 -24 17 -28q10 -9 33 -12q12 -1 24 -4.5t26 -8.5q3 -18 3 -27v-5q0 -3 -1 -8q-21 0 -44 1 t-48 3q-26 2 -48.5 3t-42.5 1h-39q-16 0 -26 -1l-97 -5l-28 -1q0 10 0.5 19.5t1.5 18.5l63 13q28 7 33 12q6 4 6 13q0 7 -3 15l-23 56l-44 111l-218 1q-6 -14 -18 -47t-32 -87q-11 -31 -11 -41q0 -13 8 -21q7 -5 19.5 -8.5t30.5 -6.5q7 -2 41 -6v-29q0 -8 -1 -13 q-17 0 -59 2.5t-109 7.5l-24 -4q-21 -4 -40.5 -5.5t-39.5 -1.5h-10zM268 320q66 -1 105.5 -2t51.5 0l14 1q-9 25 -20 54.5t-25 63.5t-25 59.5t-19 42.5z" />
<glyph unicode="&#xf032;" horiz-adv-x="693" d="M0 0l1 46q13 3 33 6q19 3 34 6.5t27 8.5q4 7 6.5 13t3.5 12q3 16 4 39.5t1 54.5l-1 243q-1 19 -1.5 68t-2.5 130q-2 43 -6 53q-2 4 -6 5q-10 7 -34 8q-11 0 -56 6l-2 41l128 3l187 6h22q4 1 8 1h6q3 0 10.5 -0.5t19.5 -0.5h37q45 0 94 -13q9 -2 21 -6.5t26 -12.5 q31 -15 51 -37q22 -23 32 -51q5 -14 7.5 -28.5t2.5 -30.5q0 -35 -16 -63q-15 -28 -46 -51q-8 -6 -26.5 -15t-47.5 -23q87 -20 131 -71q45 -51 45 -115q0 -35 -14 -79q-11 -32 -35 -57q-32 -35 -69 -53q-38 -17 -100 -29q-34 -6 -97 -5l-97 2q-31 1 -67.5 -1t-79.5 -5 q-12 -1 -45.5 -2t-88.5 -3zM262 693q0 -6 0.5 -15.5t1.5 -21.5q1 -25 2 -58.5t0 -77.5v-48v-38q12 -2 25.5 -3t28.5 -1q86 0 130 32t44 110q0 55 -42 91q-41 37 -126 37q-26 0 -64 -7zM266 223l2 -132q0 -8 5 -21q36 -16 69 -16q64 0 107 20q40 19 60 55q9 18 14 40t5 49 q0 55 -21 88q-29 46 -69 61q-39 16 -122 16q-18 0 -30 -1.5t-20 -3.5v-70v-85z" />
<glyph unicode="&#xf033;" horiz-adv-x="515" d="M0 0l9 41q6 2 15.5 4.5t22.5 5.5q20 5 34.5 9.5t24.5 9.5q14 19 20 50l14 67l28 131l6 31q11 58 20 87t9 31l15 76l8 31l11 66l4 24v19q-22 11 -72 14q-7 0 -11.5 0.5t-8.5 0.5l10 51l159 -7q15 -1 24 -1h13q17 0 43.5 1t64.5 3q20 2 33.5 3t18.5 1q-1 -5 -1.5 -9.5 t-1.5 -9.5q-2 -5 -4 -11l-3 -14q-24 -8 -54 -15q-32 -8 -51 -15q-6 -16 -12 -43q-3 -12 -4.5 -22t-2.5 -18q-11 -49 -19.5 -86t-13.5 -63l-31 -152l-19 -77l-21 -115l-7 -22v-5q0 -3 1 -8q17 -4 31.5 -6.5t28.5 -4.5q2 0 10.5 -1t22.5 -3q-1 -9 -1.5 -16t-1.5 -13 q-1 -3 -2 -8t-3 -11q-4 0 -7 -0.5t-5 -0.5q-9 -1 -14 -1h-7h-5q-4 0 -9 2q-4 0 -22 2t-51 6l-99 1q-30 0 -88 -6q-19 -2 -31 -3t-18 -1z" />
<glyph unicode="&#xf034;" d="M0 562q7 18 17 54t22 90q4 16 6.5 26.5t4.5 15.5h28q2 -3 3 -5l2 -4q14 -28 20 -35q8 -2 63 -2q17 0 32.5 0.5t29.5 0.5l10 1l55 1l104 -1h141l27 5q5 4 13 26l2 6q1 3 3 8l21 1h5q3 0 8 -1q1 -19 0.5 -47.5t0.5 -67.5v-49v-28q0 -7 -0.5 -13.5t-1.5 -11.5 q-10 -4 -18 -5.5t-15 -3.5q-13 25 -26 63q-14 40 -18 45q-6 7 -13 10q-5 2 -30 2h-67h-15q-8 0 -17 -2q-3 -21 -3 -35l1 -74v-163l1 -175v-72q0 -35 5 -57q4 -2 10.5 -4t16.5 -4q2 0 10.5 -2t24.5 -6q13 -5 24 -9q2 -10 2 -16v-9v-5q0 -4 -1 -9h-17q-23 0 -43 1t-37 3 t-46.5 3t-72.5 1q-8 0 -28 -2t-53 -5q-14 -1 -22 -1.5t-12 -0.5q0 5 -0.5 8t-0.5 5l-1 12v5q9 15 39 24q46 13 66 24q2 5 3 12.5t2 15.5q2 33 3 86t0 125l-2 209q-1 44 -1 69.5t-2 35.5q0 4 -3 7q-2 3 -6 3q-8 2 -31 2h-62q-44 0 -58 -10q-20 -14 -59 -75q-11 -17 -17 -17 q-11 6 -17.5 11.5t-9.5 9.5zM675.5 112.5q2.5 6.5 15.5 6.5h59v512h-59q-13 0 -15.5 6.5t6.5 16.5l90 90q7 6 16 6q7 0 15 -6l90 -90q9 -10 6.5 -16.5t-16.5 -6.5h-58v-512h58q14 0 16.5 -6.5t-6.5 -15.5l-90 -91q-8 -6 -16 -6t-15 6l-90 91q-9 9 -6.5 15.5z" />
<glyph unicode="&#xf035;" horiz-adv-x="750" d="M0 114q0 9 6 15l91 90q9 10 15.5 7t6.5 -16v-59h512v59q0 13 6.5 16t16.5 -7l90 -90q6 -6 6 -15t-6 -15l-90 -91q-10 -9 -16.5 -6.5t-6.5 16.5v58h-512v-58q0 -14 -6.5 -16.5t-15.5 6.5l-91 91q-6 6 -6 15zM0 602q7 14 16.5 42.5t21.5 71.5q3 13 5.5 21t4.5 13h27 q4 -6 5 -7q13 -23 18 -28q1 0 17.5 -0.5t38.5 -0.5h44h36h60l9 1h53h99h203l26 3q6 5 12 22q1 2 2 4.5t3 6.5h19h14v-92v-39v-22q0 -6 -0.5 -10.5t-1.5 -9.5q-16 -5 -31 -7q-12 18 -25 50q-13 29 -17 36q-6 5 -13 7q-3 1 -20.5 1.5t-41.5 0.5h-50h-48h-14q-8 0 -17 -1 q-1 -9 -1.5 -16t-0.5 -12l2 -217l-1 -58q0 -30 6 -45q6 -3 26 -6q2 0 10 -2t22 -5q7 -2 13 -3.5t11 -3.5q1 -8 1.5 -12.5t0.5 -6.5t-0.5 -5t-0.5 -7h-16q-46 0 -77 3q-32 3 -115 3q-7 0 -26 -1.5t-51 -3.5q-13 -1 -21 -1.5t-12 -0.5q0 8 -1 10v10v4q10 13 36 19q44 10 64 20 q2 4 3 9.5t2 12.5q0 9 0.5 34.5t0.5 58.5t-0.5 69.5t-1 68t-1 52.5t-0.5 23q0 4 -3 6q-1 1 -6 3q-7 1 -29 1h-60q-10 0 -30.5 -0.5t-41.5 -1t-38 -2t-20 -3.5q-20 -12 -57 -60q-10 -14 -16 -14q-11 5 -17 9.5t-9 7.5z" />
<glyph unicode="&#xf036;" d="M0 38v56q0 15 11 26t27 11h825q15 0 26 -11t11 -26v-56q0 -16 -11 -27t-26 -11h-825q-16 0 -27 11t-11 27zM0 244v56q0 16 11 27t27 11h525q15 0 26 -11t11 -27v-56q0 -16 -11 -27t-26 -11h-525q-16 0 -27 11t-11 27zM0 450v56q0 16 11 27t27 11h750q15 0 26 -11t11 -27 v-56q0 -16 -11 -26.5t-26 -10.5h-750q-16 0 -27 10.5t-11 26.5zM0 656v57q0 15 11 26t27 11h450q15 0 26 -11t11 -26v-57q0 -15 -11 -26t-26 -11h-450q-16 0 -27 11t-11 26z" />
<glyph unicode="&#xf037;" d="M0 38v56q0 15 11 26t27 11h825q15 0 26 -11t11 -26v-56q0 -16 -11 -27t-26 -11h-825q-16 0 -27 11t-11 27zM38 450v56q0 16 10.5 27t26.5 11h750q16 0 27 -11t11 -27v-56q0 -16 -11 -26.5t-27 -10.5h-750q-16 0 -26.5 10.5t-10.5 26.5zM150 244v56q0 16 11 27t27 11h525 q15 0 26 -11t11 -27v-56q0 -16 -11 -27t-26 -11h-525q-16 0 -27 11t-11 27zM188 656v57q0 15 10.5 26t26.5 11h450q16 0 27 -11t11 -26v-57q0 -15 -11 -26t-27 -11h-450q-16 0 -26.5 11t-10.5 26z" />
<glyph unicode="&#xf038;" d="M0 38v56q0 15 11 26t27 11h825q15 0 26 -11t11 -26v-56q0 -16 -11 -27t-26 -11h-825q-16 0 -27 11t-11 27zM75 450v56q0 16 11 27t27 11h750q15 0 26 -11t11 -27v-56q0 -16 -11 -26.5t-26 -10.5h-750q-16 0 -27 10.5t-11 26.5zM300 244v56q0 16 11 27t27 11h525 q15 0 26 -11t11 -27v-56q0 -16 -11 -27t-26 -11h-525q-16 0 -27 11t-11 27zM375 656v57q0 15 11 26t27 11h450q15 0 26 -11t11 -26v-57q0 -15 -11 -26t-26 -11h-450q-16 0 -27 11t-11 26z" />
<glyph unicode="&#xf039;" d="M0 38v56q0 15 11 26t27 11h825q15 0 26 -11t11 -26v-56q0 -16 -11 -27t-26 -11h-825q-16 0 -27 11t-11 27zM0 244v56q0 16 11 27t27 11h825q15 0 26 -11t11 -27v-56q0 -16 -11 -27t-26 -11h-825q-16 0 -27 11t-11 27zM0 450v56q0 16 11 27t27 11h825q15 0 26 -11t11 -27 v-56q0 -16 -11 -26.5t-26 -10.5h-825q-16 0 -27 10.5t-11 26.5zM0 656v57q0 15 11 26t27 11h825q15 0 26 -11t11 -26v-57q0 -15 -11 -26t-26 -11h-825q-16 0 -27 11t-11 26z" />
<glyph unicode="&#xf03a;" d="M0 38v56q0 15 11 26t27 11h75q15 0 26 -11t11 -26v-56q0 -16 -11 -27t-26 -11h-75q-16 0 -27 11t-11 27zM0 244v56q0 16 11 27t27 11h75q15 0 26 -11t11 -27v-56q0 -16 -11 -27t-26 -11h-75q-16 0 -27 11t-11 27zM0 450v56q0 16 11 27t27 11h75q15 0 26 -11t11 -27v-56 q0 -16 -11 -26.5t-26 -10.5h-75q-16 0 -27 10.5t-11 26.5zM0 656v57q0 15 11 26t27 11h75q15 0 26 -11t11 -26v-57q0 -15 -11 -26t-26 -11h-75q-16 0 -27 11t-11 26zM225 38v56q0 15 11 26t27 11h600q15 0 26 -11t11 -26v-56q0 -16 -11 -27t-26 -11h-600q-16 0 -27 11 t-11 27zM225 244v56q0 16 11 27t27 11h600q15 0 26 -11t11 -27v-56q0 -16 -11 -27t-26 -11h-600q-16 0 -27 11t-11 27zM225 450v56q0 16 11 27t27 11h600q15 0 26 -11t11 -27v-56q0 -16 -11 -26.5t-26 -10.5h-600q-16 0 -27 10.5t-11 26.5zM225 656v57q0 15 11 26t27 11h600 q15 0 26 -11t11 -26v-57q0 -15 -11 -26t-26 -11h-600q-16 0 -27 11t-11 26z" />
<glyph unicode="&#xf03b;" d="M0 369v37q0 19 19 19h104v75q0 15 8 18t19 -8l105 -105q8 -8 8 -18q0 -9 -8 -17l-105 -105q-11 -11 -19 -8t-8 19v74h-104q-19 0 -19 19zM300 19v712q0 19 19 19h37q19 0 19 -19v-712q0 -19 -19 -19h-37q-19 0 -19 19zM450 38v56q0 15 11 26t27 11h375q15 0 26 -11 t11 -26v-56q0 -16 -11 -27t-26 -11h-375q-16 0 -27 11t-11 27zM450 244v56q0 16 11 27t27 11h300q15 0 26 -11t11 -27v-56q0 -16 -11 -27t-26 -11h-300q-16 0 -27 11t-11 27zM450 450v56q0 16 11 27t27 11h337q16 0 27 -11t11 -27v-56q0 -16 -11 -26.5t-27 -10.5h-337 q-16 0 -27 10.5t-11 26.5zM450 656v57q0 15 11 26t27 11h262q16 0 27 -11t11 -26v-57q0 -15 -11 -26t-27 -11h-262q-16 0 -27 11t-11 26z" />
<glyph unicode="&#xf03c;" d="M0 38v56q0 15 11 26t26 11h375q16 0 27 -11t11 -26v-56q0 -16 -11 -27t-27 -11h-375q-15 0 -26 11t-11 27zM0 244v56q0 16 11 27t26 11h300q16 0 27 -11t11 -27v-56q0 -16 -11 -27t-27 -11h-300q-15 0 -26 11t-11 27zM0 450v56q0 16 11 27t26 11h338q15 0 26 -11t11 -27 v-56q0 -16 -11 -26.5t-26 -10.5h-338q-15 0 -26 10.5t-11 26.5zM0 656v57q0 15 11 26t26 11h263q15 0 26 -11t11 -26v-57q0 -15 -11 -26t-26 -11h-263q-15 0 -26 11t-11 26zM525 19v712q0 19 19 19h37q8 0 13.5 -5.5t5.5 -13.5v-712q0 -8 -5.5 -13.5t-13.5 -5.5h-37 q-19 0 -19 19zM637 363q0 8 7 17l106 105q11 11 18.5 8t7.5 -19v-74h105q8 0 13.5 -5.5t5.5 -13.5v-37q0 -8 -5.5 -13.5t-13.5 -5.5h-105v-75q0 -15 -7.5 -18.5t-18.5 7.5l-106 106q-7 9 -7 18z" />
<glyph unicode="&#xf03d;" d="M-2 113v525q0 23 9 43.5t24.5 35.5t36 24t43.5 9h375q23 0 43.5 -9t36 -24t24.5 -35.5t9 -43.5v-169l251 272q9 9 20 9q5 0 11 -2q18 -8 18 -28v-690q0 -20 -18 -28q-17 -7 -31 7l-251 272v-168q0 -23 -9 -43.5t-24.5 -36t-36 -24.5t-43.5 -9h-375q-23 0 -43.5 9 t-36 24.5t-24.5 36t-9 43.5z" />
<glyph unicode="&#xf03e;" d="M0 56v638q0 23 16.5 39.5t39.5 16.5h788q23 0 39.5 -16.5t16.5 -39.5v-638q0 -23 -16.5 -39.5t-39.5 -16.5h-788q-23 0 -39.5 16.5t-16.5 39.5zM75 75h750v600h-750v-600zM150 150v51l135 176l92 -76l173 262l200 -207v-206h-600zM150 524q0 32 22 54t54 22q31 0 53 -22 t22 -54q0 -31 -22 -53t-53 -22q-32 0 -54 22t-22 53z" />
<glyph unicode="&#xf040;" horiz-adv-x="750" d="M0 0l67 204l423 423l137 -137l-423 -423zM140 199q0 -6 5 -11q4 -4 11 -4q6 0 10 4l337 337q10 10 0 21q-5 5 -11 5t-10 -5l-337 -336q-5 -5 -5 -11zM538 675l58 58q17 17 41 17t41 -17l28 -27l27 -28q17 -17 17 -41t-17 -41l-58 -58z" />
<glyph unicode="&#xf041;" horiz-adv-x="530" d="M0 485q0 55 21 103t57 84t84 57t103 21t103 -21t84 -57t57 -84t21 -103q0 -40 -12 -75t-30 -67l-179 -311q-18 -32 -44 -32t-44 32l-179 311q-18 32 -30 67.5t-12 74.5zM134 485q0 -27 10 -51t28 -42t42 -28t51 -10t51 10t41.5 28t28 42t10.5 51t-10.5 51t-28 41.5 t-41.5 28t-51 10.5t-51 -10.5t-42 -28t-28 -41.5t-10 -51z" />
<glyph unicode="&#xf042;" horiz-adv-x="750" d="M0 375q0 78 29.5 146t80.5 119t119 80.5t146 29.5t146 -29.5t119 -80.5t80.5 -119t29.5 -146t-29.5 -146t-80.5 -119t-119 -80.5t-146 -29.5t-146 29.5t-119 80.5t-80.5 119t-29.5 146zM113 375q0 -54 20.5 -102t56 -83.5t83.5 -56t102 -20.5v525q-54 0 -102 -20.5 t-83.5 -56.5t-56 -84t-20.5 -102z" />
<glyph unicode="&#xf043;" horiz-adv-x="531" d="M0 266q0 39 11 75t31 67q10 16 33 47t50.5 72.5t53.5 90.5t42 102q5 17 17.5 24.5t26.5 5.5q15 2 27.5 -5.5t17.5 -24.5q16 -53 42 -102t53.5 -90.5t50.5 -72.5t33 -47q20 -31 31 -67t11 -75q0 -55 -21 -103.5t-57 -84.5t-84.5 -57t-103.5 -21t-103 21t-84 57t-57 84.5 t-21 103.5zM116 207q0 -28 19.5 -47t47.5 -19q27 0 46.5 19t19.5 47q0 18 -10 36q-3 4 -9 11.5t-12.5 18t-13 23t-10.5 25.5q-4 9 -11 7q-9 2 -11 -7q-4 -13 -11 -25.5t-13.5 -23t-12.5 -18t-8 -11.5q-11 -17 -11 -36z" />
<glyph unicode="&#xf044;" d="M0 150v450q0 31 12 58.5t32 47.5t47.5 32t58.5 12h525q2 0 5 -0.5t5 -0.5l-93 -93h-442q-23 0 -39.5 -16.5t-16.5 -39.5v-450q0 -23 16.5 -39.5t39.5 -16.5h525q23 0 39.5 16.5t16.5 39.5v217l94 94v-311q0 -31 -12 -58t-32.5 -47.5t-47.5 -32.5t-58 -12h-525 q-31 0 -58.5 12t-47.5 32.5t-32 47.5t-12 58zM308 158l53 161l318 318l108 -108l-318 -318zM423 307q3 -4 8 -4t8 4l250 249q9 9 0 17t-17 0l-249 -249q-9 -9 0 -17zM733 691l45 46q14 14 33 14t32 -14l22 -22l22 -22q13 -14 13.5 -32.5t-13.5 -32.5l-46 -45z" />
<glyph unicode="&#xf045;" d="M0 150v450q0 31 12 58.5t32 47.5t47.5 32t58.5 12h408q-3 -15 -3 -31v-25q-80 -10 -151 -38h-254q-23 0 -39.5 -16.5t-16.5 -39.5v-450q0 -23 16.5 -39.5t39.5 -16.5h525q23 0 39.5 16.5t16.5 39.5v54q8 5 15.5 10.5t15.5 13.5l63 62v-140q0 -31 -12 -58t-32.5 -47.5 t-47.5 -32.5t-58 -12h-525q-31 0 -58.5 12t-47.5 32.5t-32 47.5t-12 58zM188 190v18q0 81 27.5 152.5t84.5 125t143.5 84.5t204.5 32v113q0 28 14 34t34 -14l191 -191q13 -12 13 -32q0 -19 -13 -31l-191 -191q-20 -20 -34 -14t-14 34v127q-101 0 -178 -21t-130 -57t-83 -85 t-38 -105q-2 -13 -15 -13q-12 0 -14 13q-2 11 -2 21z" />
<glyph unicode="&#xf046;" d="M0 150v450q0 31 12 58.5t32 47.5t47.5 32t58.5 12h525q13 0 25 -3l-91 -91h-459q-23 0 -39.5 -16.5t-16.5 -39.5v-450q0 -23 16.5 -39.5t39.5 -16.5h525q23 0 39.5 16.5t16.5 39.5v159l94 94v-253q0 -31 -12 -58t-32.5 -47.5t-47.5 -32.5t-58 -12h-525q-31 0 -58.5 12 t-47.5 32.5t-32 47.5t-12 58zM188 472q0 16 11 27l48 48q11 11 27 11t27 -11l166 -166l319 320q11 11 27.5 11t27.5 -11l48 -48q11 -11 11 -27t-11 -27l-347 -347l-48 -48q-11 -11 -27 -11t-27 11l-49 48l-192 193q-11 11 -11 27z" />
<glyph unicode="&#xf047;" horiz-adv-x="750" d="M0 375q0 12 8 20l121 120q12 13 21 9t9 -21v-80h169v168h-81q-17 0 -21 9t9 21l120 121q8 8 20 8t20 -8l121 -121q12 -12 8.5 -21t-21.5 -9h-81v-168h169v80q0 17 9 21t21 -9l121 -120q8 -8 8 -20t-8 -20l-121 -120q-12 -13 -21 -9.5t-9 21.5v83h-169v-171h81 q18 0 21.5 -9t-8.5 -21l-121 -121q-8 -8 -20 -8t-20 8l-120 121q-13 12 -9 21t21 9h81v171h-169v-83q0 -17 -9 -21t-21 9l-121 120q-8 8 -8 20z" />
<glyph unicode="&#xf048;" horiz-adv-x="525" d="M0 37q0 -15 11 -26t26 -11h75q16 0 27 11t11 26v675q0 16 -11 27t-27 11h-75q-15 0 -26 -11t-11 -27v-675zM150 375q0 13 8 21l319 345q7 9 20 9q3 0 11 -2q17 -9 17 -29v-689q0 -20 -17 -28q-19 -7 -31 7l-319 344q-8 9 -8 22z" />
<glyph unicode="&#xf049;" d="M0 37q0 -15 11 -26t26 -11h75q16 0 27 11t11 26v675q0 16 -11 27t-27 11h-75q-15 0 -26 -11t-11 -27v-675zM150 375q0 13 8 21l319 345q7 9 20 9q3 0 11 -2q17 -9 17 -29v-689q0 -20 -17 -28q-19 -7 -31 7l-319 344q-8 9 -8 22zM525 375q0 13 8 21l319 345q7 9 20 9 q3 0 11 -2q17 -9 17 -29v-689q0 -20 -17 -28q-19 -7 -31 7l-319 344q-8 9 -8 22z" />
<glyph unicode="&#xf04a;" horiz-adv-x="750" d="M0 374.5q0 12.5 8 21.5l319 345q7 9 20 9q5 0 11 -3q17 -7 17 -28v-689q0 -20 -17 -28q-18 -8 -31 7l-319 344q-8 9 -8 21.5zM375 374.5q0 12.5 8 21.5l319 345q7 9 20 9q5 0 11 -3q17 -7 17 -28v-689q0 -20 -17 -28q-18 -8 -31 7l-319 344q-8 9 -8 21.5z" />
<glyph unicode="&#xf04b;" horiz-adv-x="659" d="M0 34v682q0 19 17 29q18 11 34 0l591 -340q17 -12 17 -30t-17 -30l-591 -340q-8 -5 -17 -5t-17 5q-17 10 -17 29z" />
<glyph unicode="&#xf04c;" horiz-adv-x="750" d="M0 34v682q0 14 10 24t24 10h239q14 0 24 -10t10 -24v-682q0 -14 -10 -24t-24 -10h-239q-14 0 -24 10t-10 24zM443 34v682q0 14 10 24t24 10h239q14 0 24 -10t10 -24v-682q0 -14 -10 -24t-24 -10h-239q-14 0 -24 10t-10 24z" />
<glyph unicode="&#xf04d;" horiz-adv-x="750" d="M0 34v682q0 14 10 24t24 10h682q14 0 24 -10t10 -24v-682q0 -14 -10 -24t-24 -10h-682q-14 0 -24 10t-10 24z" />
<glyph unicode="&#xf04e;" horiz-adv-x="750" d="M0 30v690q0 19 17 28q19 7 31 -7l319 -344q8 -9 8 -22t-8 -22l-319 -344q-8 -9 -20 -9q-3 0 -11 2q-17 8 -17 28zM375 30v690q0 19 17 28q19 7 31 -7l319 -344q8 -9 8 -22t-8 -22l-319 -344q-8 -9 -20 -9q-3 0 -11 2q-17 8 -17 28z" />
<glyph unicode="&#xf050;" d="M0 30v690q0 19 17 28q19 7 31 -7l319 -344q8 -9 8 -22t-8 -22l-319 -344q-8 -9 -20 -9q-3 0 -11 2q-17 8 -17 28zM375 30v690q0 19 17 28q19 7 31 -7l319 -344q8 -9 8 -22t-8 -22l-319 -344q-8 -9 -20 -9q-3 0 -11 2q-17 8 -17 28zM750 37q0 -15 11 -26t26 -11h75 q16 0 27 11t11 26v675q0 16 -11 27t-27 11h-75q-15 0 -26 -11t-11 -27v-675z" />
<glyph unicode="&#xf051;" horiz-adv-x="525" d="M0 30v690q0 19 17 28q19 7 31 -7l319 -344q8 -9 8 -22t-8 -22l-319 -344q-8 -9 -20 -9q-3 0 -11 2q-17 8 -17 28zM375 37q0 -15 11 -26t26 -11h75q16 0 27 11t11 26v675q0 16 -11 27t-27 11h-75q-15 0 -26 -11t-11 -27v-675z" />
<glyph unicode="&#xf052;" horiz-adv-x="750" d="M0 34v97q0 14 10 24t24 10h682q14 0 24 -10t10 -24v-97q0 -14 -10 -24t-24 -10h-682q-14 0 -24 10t-10 24zM3 290q-9 21 7 37l341 341q10 10 24 10t24 -10l341 -341q16 -16 7 -37q-8 -21 -31 -21h-682q-23 0 -31 21z" />
<glyph unicode="&#xf053;" horiz-adv-x="471" d="M0 373.5q0 18.5 14 32.5l328 329q14 14 33 14t33 -14l49 -49q14 -14 14 -33t-14 -33l-248 -249l248 -244q14 -14 14 -32.5t-14 -32.5l-49 -50q-14 -14 -33 -14t-33 14l-328 329q-14 14 -14 32.5z" />
<glyph unicode="&#xf054;" horiz-adv-x="471" d="M0 95q0 19 14 33l248 248l-248 245q-14 14 -14 32.5t14 32.5l49 50q14 14 33 14t33 -14l328 -329q14 -14 14 -33t-14 -33l-328 -328q-14 -14 -33 -14t-33 14l-49 49q-14 14 -14 33z" />
<glyph unicode="&#xf055;" horiz-adv-x="750" d="M0 375q0 78 29.5 146t80.5 119t119 80.5t146 29.5t146 -29.5t119 -80.5t80.5 -119t29.5 -146t-29.5 -146t-80.5 -119t-119 -80.5t-146 -29.5t-146 29.5t-119 80.5t-80.5 119t-29.5 146zM159 338q0 -7 4.5 -11.5t10.5 -4.5h147v-161q0 -7 4.5 -11.5t10.5 -4.5h78 q6 0 10.5 4.5t4.5 11.5v161h147q6 0 10.5 4.5t4.5 11.5v74q0 6 -4.5 10.5t-10.5 4.5h-147v162q0 7 -4.5 11.5t-10.5 4.5h-78q-6 0 -10.5 -4.5t-4.5 -11.5v-162h-147q-6 0 -10.5 -4.5t-4.5 -10.5v-74z" />
<glyph unicode="&#xf056;" horiz-adv-x="750" d="M0 375q0 78 29.5 146t80.5 119t119 80.5t146 29.5t146 -29.5t119 -80.5t80.5 -119t29.5 -146t-29.5 -146t-80.5 -119t-119 -80.5t-146 -29.5t-146 29.5t-119 80.5t-80.5 119t-29.5 146zM159 338q0 -7 4.5 -11.5t10.5 -4.5h402q6 0 10.5 4.5t4.5 11.5v74q0 6 -4.5 10.5 t-10.5 4.5h-402q-6 0 -10.5 -4.5t-4.5 -10.5v-74z" />
<glyph unicode="&#xf057;" horiz-adv-x="750" d="M0 376q0 72 27.5 141t82.5 124t124 82t141 27t141 -27t124 -82t82.5 -124t27.5 -141t-27.5 -141t-82.5 -124t-124 -82.5t-141 -27.5t-141 27.5t-124 82.5t-82.5 124t-27.5 141zM185 240l55 -54q5 -5 11 -5t11 5l114 114l103 -104q5 -5 11 -5t11 5l53 53q11 11 0 22 l-104 103l115 115q11 11 0 22l-55 55q-11 11 -22 0l-114 -115l-104 104q-11 11 -22 0l-52 -53q-5 -5 -5 -11t5 -11l103 -103l-114 -115q-10 -10 0 -22z" />
<glyph unicode="&#xf058;" horiz-adv-x="750" d="M0 375q0 78 29.5 146t80.5 119t119 80.5t146 29.5t146 -29.5t119 -80.5t80.5 -119t29.5 -146t-29.5 -146t-80.5 -119t-119 -80.5t-146 -29.5t-146 29.5t-119 80.5t-80.5 119t-29.5 146zM112 351.5q0 -9.5 7 -16.5l150 -150q7 -6 18 -11t21 -5h25q10 0 21 5t18 11l259 259 q7 7 7 16.5t-7 15.5l-50 50q-6 7 -15.5 7t-16.5 -7l-212 -213q-7 -7 -16.5 -7t-15.5 7l-104 104q-7 7 -16.5 7t-15.5 -7l-50 -49q-7 -7 -7 -16.5z" />
<glyph unicode="&#xf059;" horiz-adv-x="750" d="M0 375q0 78 29.5 146t80.5 119t119 80.5t146 29.5t146 -29.5t119 -80.5t80.5 -119t29.5 -146t-29.5 -146t-80.5 -119t-119 -80.5t-146 -29.5t-146 29.5t-119 80.5t-80.5 119t-29.5 146zM250 531l44 -55q6 -4 10 -5q6 0 10 4q8 6 18 11q8 4 18.5 7.5t21.5 3.5 q20 0 33 -10.5t13 -26.5q0 -17 -11.5 -30.5t-28.5 -28.5q-11 -9 -22 -19.5t-20 -24t-15 -30t-6 -37.5v-30q0 -5 4.5 -9.5t9.5 -4.5h77q6 0 10 4.5t4 9.5v25q0 18 12 31t29 28q12 10 24 21.5t21.5 26.5t16 33t6.5 42q0 32 -13 57t-34.5 41.5t-48.5 25t-54 8.5 q-30 0 -53.5 -7.5t-40 -16.5t-25 -17t-9.5 -9q-9 -9 -1 -18zM315 132q0 -5 4.5 -9.5t9.5 -4.5h77q6 0 10 4.5t4 9.5v74q0 14 -14 14h-77q-5 0 -9.5 -4t-4.5 -10v-74z" />
<glyph unicode="&#xf05a;" horiz-adv-x="750" d="M0 375q0 78 29.5 146t80.5 119t119 80.5t146 29.5t146 -29.5t119 -80.5t80.5 -119t29.5 -146t-29.5 -146t-80.5 -119t-119 -80.5t-146 -29.5t-146 29.5t-119 80.5t-80.5 119t-29.5 146zM269 418q0 -14 14 -14h40v-192h-37q-5 0 -9.5 -4.5t-4.5 -9.5v-66q0 -5 4.5 -9.5 t9.5 -4.5h189q5 0 9.5 4.5t4.5 9.5v66q0 5 -4.5 9.5t-9.5 4.5h-36v271q0 6 -4.5 10t-9.5 4h-142q-14 0 -14 -14v-65zM322 555q0 -6 4.5 -10.5t10.5 -4.5h88q5 0 9.5 4.5t4.5 10.5v77q0 6 -4.5 10t-9.5 4h-88q-6 0 -10.5 -4t-4.5 -10v-77z" />
<glyph unicode="&#xf05b;" horiz-adv-x="750" d="M0 338v75q0 8 5.5 13t13.5 5h80q9 41 29 77.5t48.5 65t65 48.5t77.5 29v80q0 19 19 19h75q8 0 13 -5.5t5 -13.5v-80q41 -9 77.5 -29t65 -48.5t48.5 -65t29 -77.5h80q8 0 13.5 -5t5.5 -13v-75q0 -19 -19 -19h-80q-9 -41 -29 -77.5t-48.5 -65t-65 -48.5t-77.5 -29v-80 q0 -8 -5 -13.5t-13 -5.5h-75q-19 0 -19 19v80q-41 9 -77.5 29t-65 48.5t-48.5 65t-29 77.5h-80q-19 0 -19 19zM178 319q14 -52 51.5 -89.5t89.5 -51.5v85q0 8 5.5 13t13.5 5h75q8 0 13 -5t5 -13v-85q52 14 89.5 51.5t51.5 89.5h-84q-19 0 -19 19v75q0 8 5.5 13t13.5 5h84 q-14 52 -51.5 89.5t-89.5 51.5v-84q0 -8 -5 -13.5t-13 -5.5h-75q-19 0 -19 19v84q-52 -14 -89.5 -51.5t-51.5 -89.5h85q8 0 13 -5t5 -13v-75q0 -8 -5 -13.5t-13 -5.5h-85z" />
<glyph unicode="&#xf05c;" horiz-adv-x="750" d="M0 375q0 78 29.5 146t80.5 119t119 80.5t146 29.5t146 -29.5t119 -80.5t80.5 -119t29.5 -146t-29.5 -146t-80.5 -119t-119 -80.5t-146 -29.5t-146 29.5t-119 80.5t-80.5 119t-29.5 146zM113 375q0 -54 20.5 -102t56 -83.5t83.5 -56t102 -20.5t102 20.5t84 56t56.5 83.5 t20.5 102t-20.5 102t-56.5 84t-84 56.5t-102 20.5t-102 -20.5t-83.5 -56.5t-56 -84t-20.5 -102zM212 466q0 8 5 14l53 53q6 5 14 5t13 -5l78 -78l78 78q6 5 14 5t13 -5l53 -53q5 -6 5 -14t-5 -13l-78 -78l78 -78q12 -14 0 -27l-53 -53q-14 -12 -27 0l-78 78l-78 -78 q-5 -5 -13 -5t-14 5l-53 53q-12 13 0 27l79 78l-79 78q-5 5 -5 13z" />
<glyph unicode="&#xf05d;" horiz-adv-x="750" d="M0 375q0 78 29.5 146t80.5 119t119 80.5t146 29.5t146 -29.5t119 -80.5t80.5 -119t29.5 -146t-29.5 -146t-80.5 -119t-119 -80.5t-146 -29.5t-146 29.5t-119 80.5t-80.5 119t-29.5 146zM113 375q0 -54 20.5 -102t56 -83.5t83.5 -56t102 -20.5t102 20.5t84 56t56.5 83.5 t20.5 102t-20.5 102t-56.5 84t-84 56.5t-102 20.5t-102 -20.5t-83.5 -56.5t-56 -84t-20.5 -102zM156 352q0 8 5 13l53 53q5 5 13 5t14 -5l83 -84q13 -12 27 0l158 159q6 5 14 5t13 -5l53 -53q5 -5 5 -13t-5 -14l-192 -192q-6 -5 -15 -9t-17 -4h-55q-8 0 -17 4t-15 9 l-117 117q-5 6 -5 14z" />
<glyph unicode="&#xf05e;" horiz-adv-x="750" d="M0 375q0 78 29.5 146t80.5 119t119 80.5t146 29.5t146 -29.5t119 -80.5t80.5 -119t29.5 -146t-29.5 -146t-80.5 -119t-119 -80.5t-146 -29.5t-146 29.5t-119 80.5t-80.5 119t-29.5 146zM113 375q0 -39 10.5 -74.5t30.5 -66.5l362 362q-31 20 -66.5 31t-74.5 11 q-54 0 -102 -20.5t-83.5 -56.5t-56 -84t-20.5 -102zM234 154q31 -20 66.5 -30.5t74.5 -10.5q54 0 102 20.5t84 56t56.5 83.5t20.5 102q0 39 -11 74.5t-31 66.5z" />
<glyph unicode="&#xf060;" horiz-adv-x="750" d="M0 375q0 19 14 33l328 329q14 14 33 14t33 -14l49 -49q14 -14 14 -33t-14 -33l-165 -165h411q20 0 33.5 -13.5t13.5 -33.5v-70q0 -19 -13.5 -32.5t-32.5 -13.5h-412l165 -165q14 -14 14 -33t-14 -33l-49 -49q-14 -14 -33 -14t-33 14l-328 328q-14 14 -14 33z" />
<glyph unicode="&#xf061;" horiz-adv-x="750" d="M0 341v70q0 19 13.5 32.5t32.5 13.5h412l-165 165q-14 14 -14 33t14 33l49 49q14 14 33 14t33 -14l328 -329q14 -14 14 -32.5t-14 -32.5l-328 -329q-14 -14 -33 -14t-33 14l-49 49q-14 14 -14 33t14 33l165 165h-412q-19 0 -32.5 13.5t-13.5 33.5z" />
<glyph unicode="&#xf062;" horiz-adv-x="750" d="M-0.5 375q-0.5 19 13.5 33l329 328q14 14 33 14t33 -14l328 -328q14 -14 14 -33t-14 -33l-49 -49q-14 -14 -32.5 -14t-32.5 14l-166 165v-412q0 -19 -13.5 -32.5t-32.5 -13.5h-70q-20 0 -33 13.5t-13 32.5v412l-165 -165q-14 -14 -33 -14t-33 14l-49 49q-14 14 -14.5 33z " />
<glyph unicode="&#xf063;" horiz-adv-x="750" d="M0 374q0 19 14 33l49 49q14 14 33 14t33 -14l165 -165v412q0 19 13.5 32.5t32.5 13.5h70q20 0 33 -13.5t13 -32.5v-412l166 165q14 14 32.5 14t32.5 -14l50 -49q14 -14 14 -33t-14 -33l-329 -328q-14 -14 -33 -14t-33 14l-328 328q-14 14 -14 33z" />
<glyph unicode="&#xf064;" d="M0 66q0 102 35 192t106.5 157.5t181 107t259.5 40.5v143q0 35 17.5 42.5t43.5 -17.5l240 -241q17 -16 17 -40q0 -23 -17 -40l-240 -241q-25 -25 -43 -17.5t-18 42.5v161q-128 -1 -225 -27.5t-164 -72t-105 -107t-48 -132.5q-2 -16 -18 -16h-1q-16 0 -18 16q-3 25 -3 50z " />
<glyph unicode="&#xf065;" horiz-adv-x="750" d="M0 42v255q0 26 13 31.5t32 -12.5l81 -81l134 134q6 6 15 6t16 -6l78 -78q6 -7 6 -16t-6 -15l-134 -134l81 -81q19 -19 13 -32t-32 -13h-254q-18 0 -30 12q-13 13 -13 30zM375 475q0 9 6 15l134 134l-81 81q-19 19 -13 32t32 13h254q18 0 30 -12q13 -13 13 -30v-255 q0 -26 -13 -31.5t-32 12.5l-81 81l-134 -133q-6 -7 -15 -7t-16 7l-78 77q-6 7 -6 16z" />
<glyph unicode="&#xf066;" horiz-adv-x="750" d="M0 99q0 9 6 16l134 133l-81 81q-19 19 -13 32t32 13h254q19 0 30 -12q13 -13 13 -30v-255q0 -26 -13 -31.5t-32 13.5l-81 81l-134 -134q-6 -7 -15 -7t-16 7l-78 78q-6 6 -6 15zM375 417v255q0 26 13 31.5t32 -13.5l81 -81l134 134q6 7 15 7t16 -7l78 -78q6 -6 6 -15 t-6 -16l-134 -133l81 -81q19 -19 13 -32t-32 -13h-254q-20 0 -30 12q-13 13 -13 30z" />
<glyph unicode="&#xf067;" horiz-adv-x="750" d="M0 340v70q0 19 13.5 32.5t32.5 13.5h248v247q0 20 13 33.5t33 13.5h70q19 0 32.5 -13.5t13.5 -32.5v-248h248q19 0 32.5 -13.5t13.5 -32.5v-70q0 -19 -13.5 -32.5t-32.5 -13.5h-248v-247q0 -20 -13.5 -33.5t-32.5 -13.5h-70q-19 0 -32.5 13.5t-13.5 32.5v248h-247 q-20 0 -33.5 13t-13.5 33z" />
<glyph unicode="&#xf068;" horiz-adv-x="750" d="M0 340v70q0 19 13.5 32.5t32.5 13.5h658q19 0 32.5 -13.5t13.5 -32.5v-70q0 -19 -13.5 -32.5t-32.5 -13.5h-657q-20 0 -33.5 13t-13.5 33z" />
<glyph unicode="&#xf069;" horiz-adv-x="697" d="M1 497q-5 18 5 35l35 61q10 17 28.5 21.5t35.5 -4.5l162 -94v187q0 20 13.5 33.5t33.5 13.5h69q20 0 33.5 -13.5t13.5 -32.5v-188l162 94q17 9 35.5 4.5t28.5 -21.5l34 -61q10 -17 5.5 -35t-21.5 -28l-163 -94l163 -94q17 -10 21.5 -28t-4.5 -35l-35 -61 q-10 -17 -28.5 -21.5t-35.5 4.5l-162 94v-187q0 -20 -13.5 -33.5t-33.5 -13.5h-69q-20 0 -33.5 13.5t-13.5 32.5v188l-162 -94q-17 -10 -35.5 -5t-28.5 22l-35 61q-9 17 -4.5 35t21.5 28l163 94l-163 94q-17 10 -22 28z" />
<glyph unicode="&#xf06a;" horiz-adv-x="750" d="M0 375q0 78 29.5 146t80.5 119t119 80.5t146 29.5t146 -29.5t119 -80.5t80.5 -119t29.5 -146t-29.5 -146t-80.5 -119t-119 -80.5t-146 -29.5t-146 29.5t-119 80.5t-80.5 119t-29.5 146zM316 613l6 -347q2 -14 15 -14h76q14 0 14 14l7 347q1 5 -4 10q-3 4 -10 4h-90 q-7 0 -10 -4q-4 -4 -4 -10zM319 125q0 -14 14 -14h85q5 0 9.5 4t4.5 10v82q0 6 -4.5 10t-9.5 4h-85q-14 0 -14 -14v-82z" />
<glyph unicode="&#xf06b;" d="M0 281v188q0 8 5.5 13.5t13.5 5.5h258q-27 0 -51 10t-42 28t-28.5 42t-10.5 51t10.5 51t28.5 41.5t42 28t51 10.5q29 0 55 -11.5t43 -33.5l75 -97l75 97q17 22 43 33.5t55 11.5q27 0 51 -10.5t42 -28t28.5 -41.5t10.5 -51t-10.5 -51t-28.5 -42t-42 -28t-51 -10h258 q8 0 13.5 -5.5t5.5 -13.5v-188q0 -8 -5.5 -13t-13.5 -5h-56v-207q0 -23 -16.5 -39.5t-39.5 -16.5h-638q-23 0 -39.5 16.5t-16.5 39.5v207h-56q-8 0 -13.5 5t-5.5 13zM220 619q0 -23 17 -39.5t40 -16.5h113l-73 94q-5 5 -15 11.5t-25 6.5q-23 0 -40 -16.5t-17 -39.5zM356 105 q0 -15 11 -26t27 -11h112q16 0 27 11t11 26v383h-188v-383zM509 563h114q23 0 40 16.5t17 39.5t-17 39.5t-40 16.5q-15 0 -25 -6.5t-15 -11.5z" />
<glyph unicode="&#xf06c;" d="M3 78q9 25 25.5 41.5t33.5 30.5q14 11 24 20.5t13 20.5q1 2 0 5t-5 11q-2 6 -5 13.5t-5 16.5q-12 75 6.5 139t56.5 114.5t91 86.5t111 56q38 14 83.5 16.5t95.5 3.5q28 0 59.5 1t60.5 5.5t53.5 13.5t39.5 25q10 10 18.5 19.5t18 16.5t20.5 11.5t27 4.5q23 0 33 -21 q62 -121 32 -283q-42 -228 -272 -347q-110 -57 -220 -57q-36 0 -72.5 6t-71.5 19q-11 4 -21.5 9.5t-21.5 10.5q-13 8 -26.5 14.5t-22.5 7.5q-5 -1 -11.5 -8t-13 -16.5t-12.5 -19t-10 -15.5q-6 -11 -12 -20t-11 -16q-11 -14 -29 -14h-2q-28 2 -39 17.5t-14 23.5q-13 18 -5 37 zM188.5 253.5q1.5 -15.5 13.5 -26.5q10 -9 24 -9q18 0 28 13q42 48 85.5 82t90.5 54.5t99.5 29t114.5 6.5q15 -2 26.5 9.5t12.5 26.5q0 16 -10.5 27.5t-26.5 11.5q-69 3 -130 -7t-116 -34t-104.5 -63t-97.5 -94q-11 -11 -9.5 -26.5z" />
<glyph unicode="&#xf06d;" horiz-adv-x="675" d="M0 214q0 58 30.5 119.5t82.5 111.5q-11 -75 0.5 -120.5t30.5 -71.5q22 -30 53 -44q-24 105 -14 204q4 42 15.5 87.5t34 90t58.5 85.5t89 74q-23 -49 -22 -90t11 -71q11 -35 34 -64q16 -19 30.5 -37.5t25 -42.5t16.5 -56.5t6 -78.5q-9 20 -27 32t-41 12q-32 0 -53.5 -22 t-21.5 -53q0 -16 5.5 -30t17 -25t30 -17t44.5 -6q44 4 77 31q13 12 25.5 29.5t20.5 43t10 60t-5 80.5h-1q52 -50 82.5 -111.5t30.5 -119.5q0 -54 -26.5 -94t-72.5 -66.5t-107 -40t-131 -13.5t-131.5 13.5t-107.5 40t-72.5 66.5t-26.5 94z" />
<glyph unicode="&#xf06e;" d="M0 352.5q0 21.5 12 40.5q38 61 87 109.5t105.5 82t118.5 51t127 17.5q66 0 128 -17.5t118 -50.5t105 -81.5t88 -110.5q11 -19 11 -40.5t-11 -39.5q-39 -62 -88 -110.5t-105 -81.5t-118 -50.5t-128 -17.5q-65 0 -127 17.5t-118.5 51t-105.5 82t-87 109.5q-12 18 -12 39.5z M75 353q32 -51 73 -93t89 -71t101.5 -45t111.5 -16t111.5 16t101.5 45t89 71t73 93q-39 63 -91.5 110.5t-115.5 76.5q25 -29 39 -65t14 -78q0 -47 -17.5 -87.5t-48.5 -71.5t-72 -48.5t-87 -17.5q-47 0 -87.5 17.5t-71.5 48.5t-48.5 71.5t-17.5 87.5q0 38 12.5 72.5 t33.5 62.5q-57 -29 -106 -74.5t-86 -104.5zM300 397q0 -11 8 -19.5t20 -8.5t20 8.5t8 19.5q0 38 26 64t64 26q12 0 20 8.5t8 19.5q0 12 -8 20t-20 8q-30 0 -57 -11.5t-46.5 -31t-31 -46.5t-11.5 -57z" />
<glyph unicode="&#xf070;" d="M0 374.5q0 21.5 12 40.5q38 61 87 109.5t105.5 82t118.5 51t127 17.5q26 0 51.5 -3.5t50.5 -8.5l43 77q4 7 12 9q6 3 14 -1l65 -37q7 -4 9.5 -11.5t-1.5 -14.5l-378 -675q-3 -7 -11 -9q-2 -1 -5 -1t-9 2l-66 37q-7 4 -9 11.5t2 14.5l32 56q-71 33 -131.5 87t-106.5 127 q-12 18 -12 39.5zM75 375q40 -64 93.5 -112t117.5 -77l28 51q-42 31 -67.5 78t-25.5 104q0 38 12.5 72.5t33.5 63.5q-57 -30 -106 -75t-86 -105zM300 419q0 -11 8 -19.5t20 -8.5t20 8.5t8 19.5q0 38 26 64t64 26q12 0 20 8.5t8 19.5q0 12 -8 20t-20 8q-30 0 -57 -11.5 t-46.5 -31t-31 -46.5t-11.5 -57zM453 75l43 78q102 12 186.5 70.5t142.5 151.5q-53 83 -128 138l37 67q45 -32 84 -73t71 -92q11 -19 11 -40.5t-11 -39.5q-78 -124 -191.5 -191.5t-244.5 -68.5zM528 210l139 249q2 -10 3 -19.5t1 -20.5q0 -36 -10.5 -68.5t-29.5 -59.5 t-45.5 -48t-57.5 -33z" />
<glyph unicode="&#xf071;" horiz-adv-x="850" d="M5 23.5q-14 23.5 6 56.5l368 637q18 33 46 33q26 0 46 -33l368 -637q19 -33 5.5 -56.5t-51.5 -23.5h-736q-38 0 -52 23.5zM160 113h530l-265 459zM370 434q0 6 4 10t9 4h84q5 0 9 -4t4 -10l-7 -182q0 -12 -13 -12h-70q-13 0 -13 12zM372 189q0 13 13 13h78q13 0 13 -13 l1 -49q0 -13 -13 -13h-78q-13 0 -13 13z" />
<glyph unicode="&#xf072;" d="M1 212l34 144q2 8 2 18t-2 18l-34 144q-2 8 2 13.5t12 5.5h45q8 0 17 -4.5t14 -10.5l85 -110q44 9 92 14t94 5h12l-61 283q-2 8 2.5 13t12.5 5h64q8 0 16 -4.5t12 -11.5l164 -285h157q29 0 58 -6.5t51.5 -17t36.5 -24t13 -27.5q1 -14 -13 -27.5t-36.5 -24t-51.5 -17 t-58 -6.5h-158l-163 -283q-4 -7 -12 -11.5t-16 -4.5h-64q-8 0 -12.5 5t-2.5 13l61 281h-12q-46 0 -94 5.5t-92 13.5l-85 -110q-12 -14 -31 -14h-45q-8 0 -12 5t-2 13z" />
<glyph unicode="&#xf073;" horiz-adv-x="750" d="M0 56v549q0 23 16.5 39.5t39.5 16.5h36v-69q0 -28 19.5 -47.5t47.5 -19.5h15q28 0 48 19.5t20 47.5v69h58v-69q0 -28 19.5 -47.5t47.5 -19.5h16q28 0 47.5 19.5t19.5 47.5v69h58v-69q0 -28 20 -47.5t48 -19.5h15q28 0 47.5 19.5t19.5 47.5v69h36q23 0 39.5 -16.5 t16.5 -39.5v-549q0 -23 -16.5 -39.5t-39.5 -16.5h-638q-23 0 -39.5 16.5t-16.5 39.5zM75 75h600v398h-600v-398zM129 592v128q0 12 9 21t21 9h15q13 0 21.5 -9t8.5 -21v-128q0 -12 -8.5 -20.5t-21.5 -8.5h-15q-12 0 -21 8.5t-9 20.5zM177 158q0 36 20 58.5t43.5 39t43.5 32 t20 36.5q0 20 -11.5 29t-28.5 9q-11 0 -20.5 -4.5t-16.5 -11.5q-4 -4 -7 -8t-6 -9l-34 23q7 14 20 27q11 11 27.5 19t40.5 8q35 0 61 -20.5t26 -58.5q0 -21 -9 -36.5t-23 -28t-30 -22.5t-30 -20t-23.5 -21t-9.5 -25h92v34h42v-73h-185q-1 6 -1.5 12t-0.5 11zM338 592v128 q0 12 8.5 21t20.5 9h16q12 0 21 -9t9 -21v-128q0 -12 -9 -20.5t-21 -8.5h-16q-12 0 -20.5 8.5t-8.5 20.5zM397 330v71h187v-34l-117 -232h-51l107 212q3 8 6 11l3 4v1q-3 0 -5 -1h-13h-75v-32h-42zM546 592v128q0 12 8.5 21t21.5 9h15q12 0 21 -9t9 -21v-128q0 -12 -9 -20.5 t-21 -8.5h-15q-13 0 -21.5 8.5t-8.5 20.5z" />
<glyph unicode="&#xf074;" d="M0 122v75q0 19 19 19h107q25 0 48.5 15.5t45.5 41t44 58.5t44 68q27 43 56 85.5t62 75.5t72 53.5t88 20.5h99v90q0 20 12 24t29 -10l163 -135q11 -9 11 -23q0 -13 -11 -22l-163 -136q-17 -14 -29 -10t-12 24v86h-99q-26 0 -49 -15.5t-45.5 -41t-44.5 -58.5t-44 -68 q-27 -44 -55.5 -86t-61.5 -75t-72.5 -53.5t-87.5 -20.5h-107q-8 0 -13.5 5t-5.5 13zM0 541v75q0 8 5.5 13.5t13.5 5.5h107q52 0 93.5 -23.5t76.5 -61.5q-18 -25 -34 -49.5t-31 -47.5q-25 31 -50.5 50t-54.5 19h-107q-8 0 -13.5 5.5t-5.5 13.5zM417 190q17 24 33 48.5 t31 48.5q25 -31 50.5 -50t54.5 -19h99v94q0 20 12 24t29 -10l163 -136q11 -9 11 -22q0 -14 -11 -23l-163 -135q-17 -14 -29 -10t-12 24v82h-99q-53 0 -93.5 23t-75.5 61z" />
<glyph unicode="&#xf075;" d="M0 421q0 68 35.5 128t96.5 104.5t143 70.5t175 26t175 -26t143 -70.5t96.5 -104.5t35.5 -128t-35.5 -128t-96.5 -104.5t-143 -70.5t-175 -26q-44 0 -84 6q-42 -32 -90.5 -55t-103.5 -35l-24 -4q-12 -2 -25 -4q-16 -2 -20 14v1q-2 7 3 11l9 10q10 11 19.5 21.5t17 24.5 t14 32.5t11.5 45.5q-81 45 -129 112.5t-48 148.5z" />
<glyph unicode="&#xf076;" horiz-adv-x="750" d="M0 311v139q0 8 5.5 13.5t13.5 5.5h187q8 0 13.5 -5.5t5.5 -13.5v-139q0 -13 11 -28t30.5 -28t47 -21.5t61.5 -8.5t61.5 8.5t47 21.5t30.5 28t11 28v139q0 8 5.5 13.5t13.5 5.5h187q8 0 13.5 -5.5t5.5 -13.5v-139q0 -65 -29.5 -121.5t-80.5 -98.5t-119 -66.5t-146 -24.5 t-146 24.5t-119 66.5t-80.5 98.5t-29.5 121.5zM0 544v187q0 19 19 19h187q19 0 19 -19v-187q0 -19 -19 -19h-187q-19 0 -19 19zM525 544v187q0 19 19 19h187q19 0 19 -19v-187q0 -19 -19 -19h-187q-19 0 -19 19z" />
<glyph unicode="&#xf077;" horiz-adv-x="750" d="M-0.5 173.5q-0.5 18.5 13.5 32.5l329 329q14 14 33 14t33 -14l328 -329q14 -14 14 -32.5t-14 -32.5l-49 -50q-14 -14 -33 -14t-33 14l-248 249l-244 -249q-14 -14 -33 -14t-33 14l-49 50q-14 14 -14.5 32.5z" />
<glyph unicode="&#xf078;" horiz-adv-x="750" d="M0 448.5q0 18.5 14 32.5l49 50q14 14 33 14t33 -14l248 -249l244 249q14 14 33 14t33 -14l49 -50q14 -14 14.5 -32.5t-13.5 -32.5l-329 -329q-14 -14 -33 -14t-33 14l-328 329q-14 14 -14 32.5z" />
<glyph unicode="&#xf079;" d="M1 502.5q-6 14.5 13 34.5l181 199q12 14 30 14t30 -14l181 -199q19 -20 13 -34.5t-32 -14.5h-117v-319h81q4 -5 6.5 -9.5t7.5 -9.5l119 -131h-327q-15 0 -26 11t-11 26v432h-117q-26 0 -32 14.5zM386 731h326q16 0 27 -11t11 -26v-431h117q26 0 32 -15t-13 -35l-181 -199 q-12 -14 -30 -14t-30 14l-181 199q-19 20 -13 35t32 15h117v318h-81q-4 5 -6.5 9.5t-7.5 9.5z" />
<glyph unicode="&#xf07a;" d="M0 694v37q0 19 19 19h113q8 0 18.5 -2t17.5 -4q3 -2 7 -7t7.5 -11.5t6 -13t3.5 -10.5l13 -61h658q17 0 28 -13t8 -29l-53 -282q-3 -12 -13 -20.5t-24 -8.5h-529l17 -82q2 -8 8.5 -13t14.5 -5h418q8 0 13.5 -5.5t5.5 -13.5v-38q0 -8 -5.5 -13t-13.5 -5h-80h-318h-51 q-8 0 -18 1.5t-17 4.5q-3 1 -7 6.5t-7.5 12t-6 13t-3.5 10.5l-105 496q-2 8 -8.5 13t-14.5 5h-83q-19 0 -19 19zM284 56q0 23 16.5 40t39.5 17q24 0 40.5 -17t16.5 -40t-16.5 -39.5t-40.5 -16.5q-23 0 -39.5 16.5t-16.5 39.5zM602 56q0 23 16.5 40t39.5 17t39.5 -17 t16.5 -40t-16.5 -39.5t-39.5 -16.5t-39.5 16.5t-16.5 39.5z" />
<glyph unicode="&#xf07b;" d="M0 56v638q0 23 16.5 39.5t39.5 16.5h338q23 0 39.5 -16.5t16.5 -39.5t16.5 -39.5t39.5 -16.5h338q23 0 39.5 -17t16.5 -40v-525q0 -23 -16.5 -39.5t-39.5 -16.5h-788q-23 0 -39.5 16.5t-16.5 39.5z" />
<glyph unicode="&#xf07c;" d="M0 185v509q0 23 16.5 39.5t39.5 16.5h338q23 0 39.5 -16.5t16.5 -39.5t16.5 -39.5t39.5 -16.5h216q23 0 39.5 -17t16.5 -40v-108h-600q-18 0 -35 -6t-32 -16.5t-26 -25t-17 -31.5zM21 0l120 371q3 11 15 19t23 8h721l-127 -370q-3 -11 -15 -19.5t-23 -8.5h-714z" />
<glyph unicode="&#xf07d;" horiz-adv-x="375" d="M0.5 187q4.5 11 27.5 11h95v354h-95q-23 0 -27.5 10.5t11.5 26.5l150 151q10 10 26 10q15 0 25 -10l150 -151q16 -15 11.5 -26t-27.5 -11h-95v-354h95q23 0 27.5 -10.5t-11.5 -26.5l-150 -151q-10 -10 -26 -10q-15 0 -25 10l-150 151q-16 15 -11.5 26z" />
<glyph unicode="&#xf07e;" horiz-adv-x="750" d="M0 357q0 15 10 25l151 151q15 15 26 10.5t11 -26.5v-96h354v96q0 22 10.5 26.5t26.5 -11.5l151 -150q10 -10 10 -25t-10 -25l-151 -151q-15 -16 -26 -11t-11 27v96h-354v-96q0 -22 -10.5 -26.5t-26.5 11.5l-151 150q-10 10 -10 25z" />
<glyph unicode="&#xf080;" d="M0 56v638q0 23 17 39.5t40 16.5h787q23 0 39.5 -16.5t16.5 -39.5v-638q0 -23 -16.5 -39.5t-39.5 -16.5h-787q-23 0 -40 16.5t-17 39.5zM75 75h750v600h-750v-600zM150 129v177h99v-177h-99zM317 129v379h98v-379h-98zM485 129v289h99v-289h-99zM651 129v450h99v-450h-99z " />
<glyph unicode="&#xf081;" horiz-adv-x="750" d="M0 94v562q0 19 7.5 36.5t20 30t29.5 20t36 7.5h563q39 0 66.5 -27.5t27.5 -66.5v-562q0 -20 -7.5 -37t-20 -29.5t-30 -20t-36.5 -7.5h-563q-19 0 -36 7.5t-29.5 20t-20 29.5t-7.5 37zM98 273q39 -54 97 -82.5t127 -28.5q47 0 90 13t78 36t60.5 55t37.5 70q40 3 63 28 q7 7 2 16q-4 9 -15 7h-2q11 11 15 22q4 10 -4 16q-7 7 -16 1q-4 -2 -14.5 -5t-22.5 -3q-2 0 -3.5 0.5t-3.5 0.5q0 1 -0.5 2t-0.5 2q-8 30 -28 54t-46 35q2 2 3 4t3 4q3 8 0 16q-1 3 -6 8t-17 4q-1 2 -3 4q-6 6 -12 4q-12 -2 -24 -6l-1 1q-7 4 -15 -1q-29 -18 -48 -49 t-33 -66q-17 15 -28 20q-30 17 -63 31t-75 30q-7 2 -12 -2q-5 -3 -7 -10q-1 -13 4 -28.5t19 -30.5q-12 -3 -10 -16q6 -33 33 -49l-6 -6q-7 -7 -2 -16q2 -6 13 -18.5t32 -18.5q-3 -6 -3 -11t1 -7q3 -16 19 -24q-18 -12 -38.5 -16.5t-41.5 -3t-40.5 10t-34.5 22.5q-4 4 -9.5 4 t-9.5 -4q-11 -9 -2 -19z" />
<glyph unicode="&#xf082;" horiz-adv-x="750" d="M1 94v562q0 19 7.5 36.5t20 30t29.5 20t36 7.5h563q39 0 66.5 -27.5t27.5 -66.5v-562q0 -20 -7.5 -37t-20 -29.5t-30 -20t-36.5 -7.5h-237v314h84q6 0 10.5 4t4.5 10l6 82q0 7 -4 12q-5 5 -11 5h-90v36q0 20 5 26.5t26 6.5q12 0 27 -2t29 -5q3 0 6.5 0.5t5.5 2.5 q5 3 7 11l11 79q2 14 -12 17q-44 12 -92 12q-147 0 -147 -143v-41h-50q-16 0 -16 -16v-82q0 -6 4.5 -10.5t11.5 -4.5h50v-314h-192q-19 0 -36 7.5t-29.5 20t-20 29.5t-7.5 37z" />
<glyph unicode="&#xf083;" d="M0 56v638q0 23 16.5 39.5t39.5 16.5h788q23 0 39.5 -16.5t16.5 -39.5v-638q0 -23 -16.5 -39.5t-39.5 -16.5h-788q-23 0 -39.5 16.5t-16.5 39.5zM75 78h750v56h-750v-56zM75 559h750v113h-467l-7 -45h-276v-68zM130 655h154v45h-154v-45zM272 346q0 -37 14 -69.5t38 -56.5 t56.5 -38t69.5 -14t69.5 14t56.5 38t38 56.5t14 69.5t-14 69.5t-38 56.5t-56.5 38t-69.5 14t-69.5 -14t-56.5 -38t-38 -56.5t-14 -69.5zM328 346q0 25 9.5 47.5t26 39t39 26t47.5 9.5t47.5 -9.5t39 -26t26 -39t9.5 -47.5t-9.5 -47.5t-26 -39t-39 -26t-47.5 -9.5t-47.5 9.5 t-39 26t-26 39t-9.5 47.5zM363 346q0 -8 6 -14t14 -6q9 0 15 6t6 14q0 20 13.5 33t32.5 13v1q9 0 15 6t6 14q0 9 -6 15t-15 6q-36 0 -61.5 -26t-25.5 -62z" />
<glyph unicode="&#xf084;" d="M0.5 391.5q-2.5 52.5 14 108.5t53.5 107q36 51 83.5 85t98 48t99.5 8t90 -35q36 -26 57 -63.5t27.5 -82.5t-1.5 -93.5t-32 -95.5l195 -139l47 65l-49 35q-7 5 -8.5 13t3.5 15l23 32q5 7 13 8.5t15 -3.5l163 -116q7 -5 8 -13t-4 -15l-23 -33q-5 -7 -13 -8.5t-15 3.5 l-48 35l-47 -65l116 -83q20 -14 24.5 -39t-10.5 -45q-14 -20 -38.5 -24t-44.5 10l-376 269q-37 -38 -80.5 -61.5t-88 -31.5t-87 -0.5t-78.5 33.5q-41 29 -62.5 74t-24 97.5zM109 374.5q3 -19.5 13.5 -37t27.5 -29.5t37 -16.5t39.5 -1t37 14t29.5 27.5q17 24 18 53t-12 54 q28 -5 55 5.5t45 35.5q12 17 16.5 37t1 39.5t-14 37t-27.5 29.5t-37 16.5t-39.5 1t-37 -14t-29.5 -27.5q-17 -25 -18.5 -54t12.5 -54q-28 5 -55 -5.5t-45 -35.5q-12 -17 -16 -36.5t-1 -39z" />
<glyph unicode="&#xf085;" d="M0 391v84q0 6 5 6q14 4 29.5 6t30.5 4q4 0 7 0.5t7 0.5q6 21 17 42q-9 14 -20 28t-23 28q-5 5 0 9q14 17 30 33.5t33 30.5q6 4 9 -1q8 -8 17 -14.5t18 -13.5l21 -15q21 11 42 17q2 21 4.5 39t6.5 35q0 5 6 5h84q7 0 7 -6q2 -14 4.5 -28.5t4.5 -29.5l2 -15q20 -6 41 -17 q8 7 19 14q10 8 19.5 15t18.5 15q6 4 9 -1q5 -4 9 -8l8 -8l22 -22q12 -12 23 -25q3 -5 0 -9q-10 -11 -20 -24.5t-23 -30.5q6 -11 10.5 -22t8.5 -22q8 -2 17.5 -3t19.5 -3l18 -2q9 -1 17 -3q6 -2 6 -7v-84q0 -5 -5 -7q-14 -3 -29.5 -5t-30.5 -4q-4 0 -14 -2q-6 -20 -17 -41 q9 -14 20 -28t23 -28q4 -5 0 -9q-14 -17 -30 -33.5t-33 -30.5q-6 -4 -9 1q-8 7 -17 14t-18 13q-5 5 -10.5 8.5t-10.5 7.5q-21 -11 -42 -17q-2 -17 -4 -36.5t-7 -37.5q-2 -5 -7 -5h-84q-6 0 -6 5q-3 14 -5 29l-4 30l-2 15q-20 6 -41 17q-5 -4 -9.5 -7t-9.5 -7 q-10 -8 -19.5 -15t-18.5 -15q-6 -4 -9 1q-5 4 -8 8l-9 8q-11 11 -22.5 22t-22.5 25q-4 4 0 8q12 14 22.5 28.5t19.5 27.5q-10 20 -18 44q-8 2 -17.5 3t-19.5 3l-18 2q-9 1 -18 3q-5 2 -5 7zM197 432q0 -35 25 -60t60 -25t60 25t25 60t-25 60t-60 25t-60 -25t-25 -60z M524 188q-2 6 4 8q11 4 21 8t21 8q1 5 1.5 9t2.5 9t3.5 8.5t3.5 8.5q-7 10 -13 19.5t-12 19.5q-3 5 2 8l62 56q4 4 9 1q9 -7 17.5 -14t17.5 -15q18 7 35 8q5 11 10.5 21t10.5 19q3 5 8 3l80 -25q5 -2 5 -8q-2 -11 -4 -21.5t-4 -21.5q8 -6 14 -13t11 -15q12 1 23 1.5t22 0.5 q5 0 7 -5l18 -83q2 -5 -4 -7q-11 -5 -21 -8.5t-21 -7.5q-1 -5 -1.5 -9t-2.5 -9t-3.5 -8.5t-3.5 -7.5q7 -10 13.5 -19.5t11.5 -19.5q2 -5 -2 -8l-62 -57q-4 -4 -9 0q-8 7 -17 14t-17 14q-20 -7 -37 -8q-5 -11 -10 -21t-10 -19q-3 -5 -8 -3l-80 25q-5 2 -5 8q2 11 3.5 22 t3.5 22q-14 12 -24 27q-12 -2 -23.5 -2.5t-22.5 0.5q-5 0 -7 5zM560 607q0 5 5 7q10 2 20 4.5t20 4.5q2 4 3 8t3 8t4.5 7t4.5 7q-5 10 -9 19.5t-8 18.5q-2 4 2 8l64 42q5 3 8 -1q8 -7 14.5 -14.5t13.5 -15.5q16 3 33 3q12 18 24 33q3 3 8 2l69 -34q5 -3 3 -8 q-2 -10 -5.5 -19t-6.5 -19q10 -13 18 -29q11 -1 21.5 -1.5t20.5 -2.5q5 -2 5 -6l5 -77q0 -4 -5 -6q-10 -2 -19.5 -4.5t-20.5 -4.5q-2 -4 -3 -7.5t-3 -7.5q-3 -7 -8 -14q5 -10 9 -19.5t8 -18.5q2 -5 -3 -8l-63 -42q-5 -3 -8 1q-13 12 -28 30q-8 -2 -16.5 -3t-17.5 0 q-6 -9 -12 -17.5t-12 -16.5q-3 -3 -8 -1l-69 34q-5 2 -3 7q3 10 6 19.5t7 19.5q-6 6 -10.5 13t-8.5 15q-11 1 -21.5 1.5t-20.5 2.5q-5 0 -5 6zM658 203q-7 -22 3.5 -42.5t33.5 -27.5q22 -8 42.5 2.5t27.5 33.5q8 22 -2.5 42.5t-33.5 28.5q-22 7 -42.5 -3.5t-28.5 -33.5z M681 564q7 -20 26 -30q20 -9 40 -2.5t29 25.5q10 20 3 40t-26 29q-19 10 -39 3t-30 -26t-3 -39z" />
<glyph unicode="&#xf086;" d="M0 483q0 55 29 103.5t78.5 85t116 57.5t142.5 21t142.5 -21t116 -57.5t78 -85t28.5 -103.5q0 -56 -28.5 -104.5t-78 -84.5t-116 -57t-142.5 -21q-18 0 -35 1.5t-34 3.5q-34 -26 -73 -45t-84 -29q-20 -5 -40 -6q-12 -2 -16 11v1q-2 5 1.5 9t7.5 8q17 17 30 37t21 64 q-66 36 -105 91t-39 121zM305 136q8 4 12 7q13 -2 25 -2h24q93 0 173 26.5t139.5 72.5t93.5 108.5t34 134.5q0 19 -3 39q45 -36 71 -81.5t26 -98.5q0 -66 -39 -120.5t-105 -91.5q8 -44 21 -63.5t30 -36.5q4 -5 7.5 -9t1.5 -9q-1 -6 -6 -9.5t-10 -2.5q-11 2 -20.5 3.5 t-19.5 3.5q-88 19 -157 73q-17 -2 -34 -3.5t-35 -1.5q-66 0 -123.5 16t-105.5 45z" />
<glyph unicode="&#xf087;" horiz-adv-x="783" d="M0.5 222q-1.5 56 2 112t12.5 105q45 3 94 3t90 -10q6 -38 10 -91t5.5 -110t0.5 -111t-5 -94q-18 -2 -41.5 -2.5t-49 0.5t-50 1.5t-44.5 0.5q-10 38 -16.5 89t-8 107zM91 101q0 -16 11 -27t27 -11t26.5 11t10.5 27q0 15 -10.5 26t-26.5 11t-27 -11t-11 -26zM240 412 q22 10 35.5 19.5t24.5 21t22.5 26t30.5 34.5q16 16 28.5 26.5t23 20t19 20t17.5 25.5q16 29 21 65t13 68q0 7 7 11q19 3 35 -3.5t28 -17.5t19.5 -26t10.5 -28q6 -33 -1.5 -59.5t-19 -50.5t-22 -46.5t-11.5 -47.5q21 -9 51.5 -9.5t63.5 1t64 1.5t52 -8.5t28.5 -29t-5.5 -59.5 q0 -2 -2.5 -5.5t-5 -8t-4.5 -8.5l-2 -3q11 -11 16 -23t5 -20q1 -39 -32 -68q10 -15 11 -31.5t-4 -31.5t-14.5 -26.5t-21.5 -17.5q6 -34 -6 -58t-35.5 -38.5t-56.5 -20.5t-69 -6t-72.5 5t-67.5 14q-20 6 -39 14t-38.5 15t-41 11t-45.5 0q2 39 2.5 85t-1 93.5t-4.5 92.5t-7 82 z" />
<glyph unicode="&#xf088;" horiz-adv-x="783" d="M1 452q-1 21 7.5 37.5t24.5 30.5q-9 15 -10 31.5t3.5 31.5t14 26.5t21.5 17.5q-6 34 6 58t35.5 38.5t56.5 20.5t69 6t72.5 -5t67.5 -14q20 -6 39 -14t38.5 -15t41 -10.5t45.5 0.5q-2 -39 -2.5 -85.5t1 -94t4 -92.5t7.5 -82q-22 -10 -35.5 -19.5t-24 -21t-22.5 -26 t-31 -33.5q-15 -17 -27.5 -27.5t-23 -20t-19.5 -19.5t-18 -26q-16 -29 -20.5 -65t-13.5 -68q0 -8 -7 -11q-20 -3 -35.5 3.5t-27.5 17.5t-19.5 25.5t-10.5 28.5q-6 33 1.5 59.5t19 50.5t22 47t11.5 48q-21 9 -51.5 9t-63.5 -1.5t-63.5 -1.5t-52 8.5t-29 29t5.5 59.5 q1 1 3.5 5.5t5 8.5t3.5 8l2 3q-11 11 -16 23t-5 20zM568 630q1 54 5 94q18 2 42 2.5t49.5 0t50 -1.5t44.5 -1q10 -38 16 -89t7.5 -106.5t-2 -112t-12.5 -105.5q-45 -3 -93.5 -3t-90.5 10q-6 38 -10 91t-5.5 110t-0.5 111zM617 650q0 -16 11 -27t27 -11q15 0 26 11t11 27 q0 15 -11 26t-26 11q-16 0 -27 -11t-11 -26z" />
<glyph unicode="&#xf089;" horiz-adv-x="393" d="M0.5 465q4.5 13 25.5 16l238 34l106 216q9 19 23 19v-633l-212 -112q-20 -10 -31 -2t-7 30l41 236l-172 168q-16 15 -11.5 28z" />
<glyph unicode="&#xf08a;" horiz-adv-x="846" d="M0 519q0 64 20.5 108t53 71.5t73.5 39.5t82 12q30 0 59 -10t54 -25t45.5 -32.5t35.5 -32.5q15 15 36 32.5t46 32.5t53.5 25t58.5 10q42 0 83 -12t73.5 -39.5t52.5 -71.5t20 -108q0 -44 -16.5 -83.5t-36 -69.5t-37 -48t-18.5 -19l-288 -288q-13 -11 -27 -11q-15 0 -26 11 l-290 288q-1 1 -18 19t-36.5 48t-36 69.5t-16.5 83.5zM75 519q0 -32 13 -61.5t29 -53t29 -37.5l14 -14l263 -263l263 262q1 1 14 15t29 37.5t29 53t13 61.5q0 48 -14 78.5t-36.5 48t-50 23.5t-53.5 6q-25 0 -50.5 -12t-48 -29t-40 -34.5t-26.5 -28.5q-11 -14 -29 -14t-29 14 q-9 11 -26.5 28.5t-40 34.5t-48 29t-50.5 12q-26 0 -53.5 -6t-50 -23.5t-36.5 -48t-14 -78.5z" />
<glyph unicode="&#xf08b;" horiz-adv-x="825" d="M0 150v450q0 31 12 58t32.5 47.5t47.5 32.5t58 12h225v-94h-225q-23 0 -39.5 -16.5t-16.5 -39.5v-450q0 -23 16.5 -39.5t39.5 -16.5h225v-94h-225q-31 0 -58 12t-47.5 32.5t-32.5 47.5t-12 58zM248 285v180q0 16 11 26.5t27 10.5h209v143q0 20 19 28q19 7 32 -7l270 -270 q9 -9 9 -21.5t-9 -20.5l-270 -270q-9 -9 -21 -9q-5 0 -11 2q-19 8 -19 28v142h-209q-16 0 -27 11t-11 27z" />
<glyph unicode="&#xf08c;" horiz-adv-x="750" d="M0 94v562q0 19 7.5 36.5t20 30t29.5 20t37 7.5h562q39 0 66.5 -27.5t27.5 -66.5v-562q0 -20 -7.5 -37t-20 -29.5t-30 -20t-36.5 -7.5h-562q-39 0 -66.5 27.5t-27.5 66.5zM101 582q0 -28 19.5 -47.5t46.5 -19.5q28 0 47.5 19.5t19.5 47.5q0 27 -19.5 46.5t-47.5 19.5 q-27 0 -46.5 -19.5t-19.5 -46.5zM104 117q0 -5 4.5 -9.5t9.5 -4.5h98q6 0 10 4.5t4 9.5v345q0 14 -14 14h-98q-5 0 -9.5 -4t-4.5 -10v-345zM283 117q0 -5 4.5 -9.5t9.5 -4.5h98q6 0 10 4.5t4 9.5v187q0 28 8 47q15 31 55 31q32 0 42 -19q7 -11 7 -35v-211q0 -5 4 -9.5 t10 -4.5h100q6 0 10 4.5t4 9.5v233q0 72 -42 104q-40 31 -103 31q-50 0 -85 -23q-4 -3 -13 -12v12q0 14 -14 14h-95q-5 0 -9.5 -4t-4.5 -10v-345z" />
<glyph unicode="&#xf08d;" d="M1 461q4 38 21 80.5t47 82.5t65.5 68.5t71.5 43t68.5 14t56.5 -18.5q25 -18 34.5 -49.5t5.5 -70.5l141 -105q52 29 101.5 33.5t84.5 -21.5q25 -19 37.5 -50.5t11.5 -70.5t-14.5 -83.5t-39.5 -88.5l201 -193q5 -5 6 -12t-4 -12q-5 -8 -15 -8q-3 0 -9 2l-242 138 q-35 -37 -73.5 -63t-75.5 -38t-71 -9.5t-60 22.5q-35 26 -45 74.5t4 106.5l-141 106q-36 -15 -69 -15t-58 18q-24 18 -34 49.5t-6 69.5zM80 417.5q1 -7.5 8 -12.5q8 -7 22 -7q15 0 31.5 8t33.5 22t33.5 31.5t31.5 37.5q5 6 4 13.5t-8 12.5q-6 5 -13.5 4t-12.5 -8 q-37 -49 -65.5 -67.5t-34.5 -16.5q-6 5 -13.5 4t-12.5 -8q-5 -6 -4 -13.5zM219 368l170 -127q6 -4 11 -4q10 0 15 8q5 6 4 13.5t-7 12.5l-163 121q-15 -14 -30 -24zM393 141q-10 -16 4 -27q13 -10 33 -10q19 0 41 10t44.5 27t44.5 39t41 47q5 7 4 14.5t-8 12.5 q-6 5 -13.5 3.5t-12.5 -7.5q-24 -32 -48 -54.5t-45 -35.5t-36.5 -17t-22.5 2q-6 5 -13.5 3.5t-12.5 -7.5z" />
<glyph unicode="&#xf08e;" d="M0 150v450q0 31 12 58.5t32 47.5t47.5 32t58.5 12h284q-1 -7 -2 -13.5t-1 -14.5v-43q0 -11 3 -23h-284q-23 0 -39.5 -16.5t-16.5 -39.5v-450q0 -23 16.5 -39.5t39.5 -16.5h525q23 0 39.5 16.5t16.5 39.5v166q20 -15 44 -24t50 -10v-132q0 -31 -12 -58t-32.5 -47.5 t-47.5 -32.5t-58 -12h-525q-31 0 -58.5 12t-47.5 32.5t-32 47.5t-12 58zM338 255q0 12 8 20l376 377h-131q-12 0 -20 8t-8 20v42q-1 11 7.5 19.5t20.5 8.5h281q11 0 19.5 -8.5t8.5 -19.5v-42v-239q0 -12 -8.5 -20.5t-19.5 -7.5h-42q-12 0 -20 8t-8 20v131l-377 -376 q-8 -8 -20 -8t-20 8l-39 39q-8 8 -8 20z" />
<glyph unicode="&#xf090;" horiz-adv-x="825" d="M0 285v180q0 16 11 26.5t27 10.5h209v143q0 20 18 28q19 7 33 -7l270 -270q8 -9 8 -21.5t-8 -20.5l-270 -270q-9 -9 -21 -9q-4 0 -12 2q-18 8 -18 28v142h-209q-16 0 -27 11t-11 27zM450 0v94h225q23 0 39.5 16.5t16.5 39.5v450q0 23 -16.5 39.5t-39.5 16.5h-225v94h225 q31 0 58 -12t47.5 -32t32.5 -47.5t12 -58.5v-450q0 -31 -12 -58t-32.5 -47.5t-47.5 -32.5t-58 -12h-225z" />
<glyph unicode="&#xf091;" horiz-adv-x="825" d="M0 509v91q0 16 11 26.5t27 10.5h158q-1 6 -1 13v11v2q0 26 2 43t7.5 26.5t15.5 13.5t27 4h331q16 0 26.5 -4t16 -13.5t7.5 -26.5t2 -43v-13q0 -6 -1 -13h158q16 0 27 -10.5t11 -26.5v-91q0 -31 -22 -64t-59.5 -62.5t-88 -52t-108.5 -31.5q-25 -5 -44.5 -20.5t-19.5 -34.5 q0 -17 8.5 -25t19 -15t19.5 -15.5t11 -25.5q2 -11 -1 -23q-2 -7 11.5 -11.5t33 -9t40 -11t31.5 -16.5q6 -5 9.5 -19.5t4.5 -31.5q1 -16 -3 -28.5t-14 -12.5h-481q-10 0 -14 12.5t-3 28.5q1 17 4.5 31.5t9.5 19.5q11 10 31 16.5t39.5 11t33.5 9t12 11.5t-2 12v11 q1 17 10.5 25.5t20.5 15.5t19.5 15t8.5 25q0 19 -19.5 34.5t-45.5 20.5q-57 10 -107.5 32.5t-88 51.5t-59.5 62t-22 64zM75 509q0 -10 11.5 -26.5t33 -34.5t52 -35t68.5 -29q-12 39 -21.5 85.5t-16.5 92.5h-127v-53zM585 384q38 12 68.5 29t52 35t33 34.5t11.5 26.5v53h-128 q-6 -46 -15.5 -92.5t-21.5 -85.5z" />
<glyph unicode="&#xf092;" horiz-adv-x="750" d="M0 94v562q0 19 7.5 36.5t20 30t29.5 20t37 7.5h562q39 0 66.5 -27.5t27.5 -66.5v-562q0 -20 -7.5 -37t-20 -29.5t-30 -20t-36.5 -7.5h-562q-39 0 -66.5 27.5t-27.5 66.5zM94 321q0 -44 11 -82.5t41.5 -67t85.5 -45t143 -16.5t142.5 16.5t85.5 45t42 67t11 82.5 q0 73 -46 127q4 16 5 36t-1.5 39t-7.5 36t-12 29h-14q-42 -2 -74 -22t-63 -37l-7 1q-8 0 -18.5 1t-22 1.5t-20.5 0.5q-18 0 -35 -1t-33 -3q-31 17 -63 37t-74 22h-14q-8 -12 -12.5 -29t-7 -36t-1.5 -39t5 -36q-46 -54 -46 -127zM183 289q15 60 84 67q13 2 27 1.5t30 -1.5 q7 0 25.5 -1t25.5 -1t25.5 1t25.5 1q16 1 30 1.5t26 -1.5q70 -7 85 -67q8 -33 -3 -61.5t-24 -41.5q-20 -20 -66 -32t-99 -12t-99 12t-66 32q-13 13 -24 41.5t-3 61.5zM242 265q0 -23 11 -39t27 -16t27 16t11 39t-11 38.5t-27 15.5t-27 -15.5t-11 -38.5zM432 265 q0 -23 11 -39t27 -16t27 16t11 39t-11 38.5t-27 15.5t-27 -15.5t-11 -38.5z" />
<glyph unicode="&#xf093;" d="M0 19v300q0 8 5.5 13.5t13.5 5.5h112q8 0 13.5 -5.5t5.5 -13.5v-169h600v169q0 8 5.5 13.5t13.5 5.5h112q8 0 13.5 -5.5t5.5 -13.5v-300q0 -19 -19 -19h-862q-19 0 -19 19zM169 473.5q-3 7.5 8 18.5l246 247q11 11 27 11t27 -11l247 -247q11 -11 7.5 -18.5t-18.5 -7.5 h-150v-244q0 -16 -11 -27t-27 -11h-150q-16 0 -26.5 11t-10.5 27v244h-150q-16 0 -19 7.5z" />
<glyph unicode="&#xf094;" horiz-adv-x="786" d="M1 251q-1 17 0.5 33.5t3.5 36.5q2 17 3.5 35t4.5 32q7 32 15 62.5t22 57.5q10 20 22 39.5t26 38.5q5 7 10.5 12t11.5 10l22 22q11 11 24 21t28 18t32 16q16 8 33 14.5t35 13.5q34 14 76 25l1 1q22 6 41.5 8.5t38.5 2.5q29 0 55 -4.5t52 -9.5q20 -4 41.5 -7.5t45.5 -3.5h1 q14 0 30.5 2.5t32.5 2.5q12 0 22 -3t16 -12q11 -15 12.5 -35t-0.5 -37t-4 -34.5t1 -35.5q2 -11 5.5 -19t7.5 -18q4 -9 5.5 -19.5t3.5 -20.5q9 -51 7.5 -95.5t-11.5 -83t-27.5 -72.5t-39.5 -65q-18 -24 -38.5 -47.5t-45 -44.5t-54 -38t-65.5 -29q-37 -13 -77.5 -16.5 t-77.5 -5.5h-15q-51 0 -95 8t-94 8h-2q-17 0 -37.5 -5t-40.5 -6h-1q-18 0 -32 8.5t-21 20.5q-10 17 -8.5 35.5t6.5 33.5t5 32.5t-2.5 37t-6 39.5t-4.5 40z" />
<glyph unicode="&#xf095;" horiz-adv-x="1000" />
</font>
</defs></svg>

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 615 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 239 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 301 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 171 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 635 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 250 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 313 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 157 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 522 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 636 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 490 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 333 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Some files were not shown because too many files have changed in this diff Show More