Comics And How Did I Get There

How to Use Comics to Communicate Ideas – now wait. How did I get here…?

Too often will I find myself somewhere, reading something that is completely unrelated to what I do or like doing. I will try to retract the steps that led me to that spot, usually with no successes. I’m at the same situation now, but am determined to go back and log the breadcrumbs of exploration that led me to, of all things, comics. I never read comics, and weren’t interested in it. And now I’m about to buy a book teaching how to use it to communicate ideas. So here’s how I got here.

About a month ago, I started to work on this Messenger App. Initially, I did the development work. I used python and flsk to build a server that acted as the back-end of the service. Later, a friend joined me. He is a much more experienced developer, and over time became the lead developer in the project. I did more of the product work – spec’ing and prioritizing as well as building the front-end of the bot, using Chatfuel as the CMS.

We needed a designer, and thought to hire a freelancer. We also wanted to experiment with the concept, because we think of it as a way to scale ourselves cheaply. I used Guru to find designers.

To hire a designer, a freelancer, I needed examples of the design work and styles that I’m looking for. And so I started to create them.

I started with Inkscape. In addition, I downloaded Sketch and illustrator for a trial period. The latter two didn’t stick at the beginning, and since I learned to use Inkscape quickly, I didn’t need them.

I learned Inkscape mainly through YouTube. I wasn’t familiar not only with the app, but also illustration and vector graphic. I never really understood bezier, or how to use it. But now I started to, and realized the potential of vector graphics.

As I learned more, I was drowning more and more into the design world. I started to think colors and see shapes. I made more and more illustrations of cloth items. (here are few examples.)

The designers I hired on Guru didn’t work out. One resigned after I hired her, because she didn’t feel comfortable with material design. The other submitted a horrible first draft, and I stopped the project short. And since I started to have a lot of fun creating the illustrations myself, I decided to keep doing it and complete the design work for v1 of the product.

I produced tens of items, and while doing so started to develop a design language for the app. (I was inspired by this video.)

Once I had the items, I moved to compose the outfits for the different genders and weather conditions. While Inkscape is great, it’s not as good when it comes to layout design. And so I tried Sketch and Illustrator again.

At that point I already made a lot of progress learning vector design, and started to get comfortable with the design workflow. And while I still didn’t get how to use Illustrator, working with Sketch was fun and flawless. In less than two days I completed the full sets of outfits.

I got totally excited about design, and felt that I can actually do it in a more serious way. And it that’s the case, then I must learn Adobe Illustrator, the gold standard for graphic design.

I started to read a ton of blog posts and tutorial. I watched many YouTube videos. And I started to see the power of Illustrator, and the endless capabilities it allows. Just two examples for features I wished for when working with Inkscape:

  • Illustrating fur. Here’s a video of how to do it in Illustrator.
  • Color refactoring – I needed to design for both boys and girls. Since the focus at the initial version was on newborns, all I needed to do, in most cases, was to simply change the color scheme of an item, to make is “girlish” or “boyish”. It took about 30 minutes in Inkscape, manually changing the colors. In illustrator, there’s a color refactoring function, that lets me create as many colors from the same item in seconds.

So Illustrator rocks. I need to learn it, and maybe I should do it in a structured course, rather than reading sporadic tutorial. A designer friend recommended Lynda, but I eventually signed up to 5 classes in Udemy (they had the January promotion, when all classes were only 10$ each, so I added to my cart whatever had illustrator in the title…).

I started with Adobe Illustrator CC Tutorial – Training Taught By Experts. A 12 hours course, that spans across 132 episodes. I completed it in less than a week. I continued to Learn to draw fashion with Adobe Illustrator CC – Beginners1.

While taking the courses, and getting deeper into Illustrator, I started to feel strongly about creating, painting and making illustrations. I bought an Intous Pro tablet, because I thought it will open me to digital art, and make the design process more efficient and much more enjoyable. I was right, and not only that, but using the Intous, I got even more eager to create. I wanted to replicate as much as possible the the physical sensation of sketching on paper.

And that’s were I started to contemplate on buying an iPad pro with a pencil… It took one day since I started playing with that idea till when I got one… a classic impulsive buy (though I bought a used one.)

The experience with the iPad, though I have it for less than a week, is amazing. I carry it with me everywhere, and find myself sketching when ever I have few minutes, such as when sitting in a cafe for lunch. I use it to also take notes, and can see how it replaces my pen and notebook that I love so much.

And so, as I start to express myself visually, I want to, well, learn how to do it better. I’m writing a spec for one of the projects I’m working on at Outbrain, and thought that a storyboard that illustrates user stories might be a good way to convey my thoughts and the user flows I had in mind. And so I started to read about using storyboards for product design. One of the articles I read led me to this book. And that’s were I paused, and started to write this post.

I was never interested in comics, let alone creating them. But for some reason, I have a strong feeling that that’s going to change very soon…

Can’t wait for the next learning adventure.

Illustrations – v2

In an earlier post I shared some of my illustrations for Baby Weatr, a Messenger app that helps parents chose an outfit for their newborn baby based on the weather. As I gained more experience in illustrations (note: I’m not a designer), a style started to emerge. Here are the outcomes of the second iterations.

I created most of those illustrations in Inkscape, while transitioning to Illustrator. Finally, I then used Sketch to create complete outfits (see example at the bottom of this post).

These are the styles we’re using in the app:


And here’s how items then added to a complete outfit:

Girl 20f-less


What I’ve Been Working On Lately – Recap

I didn’t write for a while1. And it’s not that nothing had happened. The opposite… so much learning and new experiences that I didn’t find the time to log. No, it’s not a lack of time, but rather not internalizing how important it is to stop, asses and capture what I’m learning as I go.

But it’s better done late than never2. So here’s a list of projects I’ve been working on, in no particular order, followed by the list of new skills I’ve learned.


Outbrain News Brief for Alexa

This is a simple skill for Alexa, that reads summaries of top news stories. So as a user, you have to add this skill to Alexa, and can then ask Alexa “what’s in the news”. Alexa then calls a web service, which I developed. This web-service calls Outbrain and ask for the latest news (using the Sphere platform). It then sends the articles it gets from Outbrain to a summation service (Agolo), and returns them back to Alexa, which then reads the summaries to the user.

Outbrain skill for Alexa

Similar to the skill above3, but with more functionality. This is actually the initial stage of a conversational experience, where users will be able to interact with Alexa to get personalized news stories. So users will be able to guide Alexa through conversation to article from site, or on topic they are interested in, or discover new content based on their interest graph. Here’s a simple sequence diagram that illustrating the current user flow:


My Clipboard


Now that’s where things become more interesting, working on my stuff… This is a skill for Alexa that serves as your clipboard. You can say “Alexa, ask my clipboard to remember 212 322 4432” and she’ll remember this phone number for you. “Alexa ask my clipboard what’s in my clipboard” (yeah, redundant, I know…) and she’ll repeat the phone number for you.

Why is it helpful? imaging that you’re on the phone and can’t take a note, or fine a pen to write one down… let Alexa handling it for you… But if you think about a smarter clipboard, one that takes keys and values, you can do much more interesting stuff. For example, ask Alexa to remember that you put your passport in the top drawer. Later on, you can ask her where did I put the passport. But that’s a longer term functionality… I first need to finish the current iteration and get it public (it’s not at the time of writing this…).

Baby Weatr


Baby Weatr is a Facebook Messenger app4 that helps parents decide how to dress their kids appropriately for the weather. Well, it designed around my lack of any skill to translate weather into baby wear. So to make sure I’m not endangering our daughter, I decided to build this decision support app.

I’m working on it together with a friend, but this was an opportunity to tie together a lot of the things that I like, and always wanted to use more, such as coding and design5. Initially we tried to outsource the design work, but working with chip freelancers produced deliverable at the quality we paid for, meaning bad. On the other hand, hiring capable designer is expensive. So, I decided to hone on the opportunity to connect with the right side of my brain, and design the first version of the app myself.

Baby Wear is live on Messenger now, so if you need help dressing up your baby – I would love to get your feedback…

Try Baby Weatr


While working on the projects above, I did quite a bit of coding. What’s more, this time I coded almost professionally (some of  what I built is going to be used by my company…).

I found that I need to log what I’m doing, so I can backtrack if needed, and won’t make the same mistakes twice. I found that it also accelerated my learning (similar to how writing does…). Git commit, or inline commenting weren’t enough, as I wanted to capture not only the outcome of my thinking, research, trail and error and refactoring. But rather, I wanted to put capture my deliberations and place bread crumbs as I go. I wanted to be able to read back and understand why I made certain decisions. For example, why I selected one data structure and not another, how do I start a flask project, and how do I run a flask app and make it reload every time I make a change.

And so I started to maintain a file called development log, or dlog. I keep it open as part of my workspace and include it in my git repository. Here’s an example of how it looks like (the dlog is in the bottom right quadrant):

I thought that might be something that other developers find helpful, and put it on a separate blog (here). I’m contemplating with the idea of opening this blog for others, with the assumption that if many developers log their process, it will serve as a new form of knowledge repository, stack-overflow extension, or companion to readme documentation.

Things I’ve learned

Chatbots Messenger Apps

Well that’s not new for me… my team is dedicated to messaging apps for awhile now. I think I mentioned before that we’re responsible for the CNN app on Messenger and Kik, as well as for the apps of other notable publishers. What I did learn is how to view these type of apps as the best way to develop an MVP, and how you can build a full experience with building blocks, and minimum amount of code, or back-end services.

I’m used Chatfuel6 as the content management system for the Baby Weatr app, and love the way I can control the behavior of the app, and build it to match the way I’m thinking about flows. Here’s how the Baby Weatr app looks like within Chatfuel: chatfuel-baby-weatr.png

Assistant devices

Assisted device are the conversational version of messenger apps. Here, a user can interact with a device with voice, rather than with text. I’ve been working with Alexa on the skills I mentioned above. I also experimented with Google Home, and their platform.

I think that these experiences are the real revolution in AI and conversational design, and messaging apps, or chatbots are just a stop in the way. I suspect that FB is going to kill their (less than) year old platform, and bet on live video, VR and maybe voice recognition. Right now the messenger apps are like a ghost town, Much more to say about that, and about what messenger apps are good for (hint: MVP). I’ll keep that to another post.


Python isn’t new to me. I use it occasionally to write scripts to streamline my workflows, or automate tedious manual work. (Automate the Boring Stuff with Python was the book that got me started with python. Highly recommended.)

But this is the first time I’ve used python for real products and services. Using it more intensely I’ve learned how friendly the language is, and how well it fits the way I think about code. I wrote so much, that even google took note, and invited my to the google coding challenge7, mistaking me with a real developer :-). google-code-challange.jpg


That’s the backbone of almost every one of the projects I listed above. Flask, and it’s Alexa extension – Flask-Ask, are super easy and intuitive packages that help creating web services. I created a template (TODO: push this template to GitHub) and I use it as a starting point with new projects.


Now, that were my passion is at these days. I’ve just finished a 12h Illustrator course in Udemy, and in the middle of a… Illustrator 4 Fashion class. All I think about are shapes and colors, and how I can make them in Adobe Illustrator, my hands are glued to the new Intous Pro I’ve just bought.

In a way, I’m where I wanted to be when I did my bachelor degree – code and design (I graduated as a software engineer, with focus on machine learning and… graphic design).

But in my journey to Illustrator I actually made two stopped, in Inkscape and Sketch. I started with Inkscape, which is great. It’s easy to learn and very powerful. What I like most with Inkscape is the control over the creation and modification of paths, which is way easier and more intuitive than Sketch and Illustrator. I did most of the clothing items to Baby Weatr using it, and posted samples of these designs in a previous post.

But Inkscape lacks in layout and layer management. I also missed smart guides, which makes the interface design much controllable. And so I’ve started to learn Sketch.

I love Sketch’s workflow, as well as the way it lets me organize design assets alongside my artboards. But, it’s not a replacement to Inkscape when it comes to actual illustrations. What I ended up doing is creating the cloth items’ illustrations in Inkscape, and importing them into Sketch, where I did the layout created the sets of outfits.

Here’s how the Baby Weatr project looks like in Sketch: sketch-outfits-page.png sketch-cloth-items.png

And then, as I drawn deeper and deeper into design, I’ve started to learn more about Adobe Illustrator. I tried it while using Inkscape and Sketch, but it seemed too complex, and inaccessible to me. But the more complex it seemed, the more attracted to it I became (no wonder I use Emacs…). When I finished all the clothing sets I needed for the beta launch of Baby Weatr, I decided to get serious and learn Illustrator. After all, it is the tool for designers…

And as I mentioned, 150 episodes later that took 15 hours and span over 3 course, I’m at a point where I feel comfortable with the tool, and starting to do art and design work in it.

Phooo, there was a lot of catching up I needed to do… but it feels good to look at that list and appreciate all the things that I had the chance to learn and experiment with.



And now, just to make sure this post is going to get published, I used one of my hacks, and put it on scheduled publishing…


And no, there’s no new year resolution involved in this writing. I don’t like this practice, and don’t set those resolutions…


This skill is still in development, so not public and can’t be added to Alexa yet.


aka chatbot, but I denounce the term, because it’s lame…


I graduated as a software engineer, with a focus on machine learning and… graphic design.


They were actually a fierce competitor when we tried to get the CNN project 🙂


I completed several stages, but didn’t go all the way, because I had other things to work on, and I’m not going to make a career switch…

Some Illustration Fun

I’m working on a side project – a weather app that helps parents decide on how to dress their babies. Instead of focusing on the weather data, this app will focus on translating the forecast to baby’s outfit.

I found out that designers are even more expensive than developers, so I had to take a stab at doing some graphical design work… Here are some of the outcomes:


Btw, I illustrated most of these items in Inkscape, which is basic alternative to Adobe Illustrator.

Typing On Cherry G80 And AEKII

I’m running some typing tests on the AEK and the Cherry g08 with the black MX switches.

The Cherry G80

cherry-g80.jpg I tried the cherry keyboard before and liked the keys. They are smooth and linear, and I felt that though they are a bit hard to press, not having the tactile sensation, actually kind of pushed my fingers up, and gave them the energy to move to the next key.

On the other hand, I didn’t like that the keys feel smaller than those in my AEK and Wasd code. My hands felt somewhat claustrophobic when typing, scrambling and twisting to get to the desired keys. Now since I type in Emacs, it means that I need to use modifier keys quite often. The layout didn’t help either. The bottom row is skewed to the left, so the modifiers are not aligned under the ‘z’ and the ‘x’ as they are in other, more conventional keyboards.

Apart for the keys, the cherry keyboard is pretty much crap. It’s very light, and feels to be constructed out of cheap materials. The touch-pad is a jock. It’s barely responsive, and won’t track my finger unless it moves slower than it would have taken me to go to the other room and bring a decent mouse. Overall, though I kinda like the black switches, I think I’ll prefer the browns, which require less force to press. So overall, this keyboard isn’t a keeper.

Apple Extended Keyboard 2


And this is now the apple keyboard that I’m typing on, and the first impression is so much better.

Maybe, my only complaint might be that the keys aren’t linear. The blacks, which are linear feels very good, but they are a little too hard. It takes just too much force to push down the keys, and keep a fast typing pace.

Here, with the apple keyboard, typing feels good, but the tactile feeling is a bit weird. It’s like the keys don’t seat right, as if they are not perfectly aligned. The pressing of the key isn’t linear. It feels like there is some kind of a bump the the key pushes through, which gives a non harmonious tactile feel to the click. It feels like driving a car on pebbles. Just like you feel those vibrations coming from the rocky road, that’s how they typing on the AEK feels. My fingers absorb that vibration, caused by the push through this non-linear path the key does when it’s pressed down.

use-package’s :config vs. :init

I read this Reddit thread about favorite themes, and got intrigued by the spacemacs theme1.

I added that theme to my init file, and tried making it the default theme. I use use-package, and configured the theme as follows:

(use-package spacemacs-theme
:ensure t
(load-theme 'spacemacs-light t)

When re-evaluating my init file, the theme didn’t load. I tried to run only the (load-theme 'spacemacs-light t) line, and the theme loaded. I changed the :config to :init in the package configuration, and it loaded when I re-loaded emacs.

What, then, is the difference between :init and :config in use-package?

The answer to that question, which I found it in this stack-overflow answer, is that in use-package, whatever defined inside the :init keyword, will load whenever emacs is loading. What’s in the :config, though, will be executed only when the package is actually loaded (i.e lazy loading)2.

Here’s how my configuration for that theme looks like now:

(use-package spacemacs-theme
:ensure t
(load-theme 'spacemacs-light t)



I tried spacemacs before, and liked its look and feel, but didn’t know I can take it back with me to gnu emacs


Needless to say that, going back to the use-package documentation, the difference between :init and :config is clearly described…

Elisp Video Tutorial – Notes

I’ve just finished watching Daniel Gopar’s elisp video tutorial. So far there are 4 parts to the tutorial, and based on this thread on Reddit, there are more to come.

After watching the guide I don’t feel more proficient in elisp, yet less timid running evals and more courageous tinkering with my config file.

Following is a short summary of the code exercises and shortcuts I logged while watching.

Part 1 – Intro

Link to episode 1

REPL – read-eval-print-loop

Define functions:

(defun add-num (a b) (+ a b))

Define a test:

(require 'ert)
(ert-deftest add-num-pos ()
         (equal (add-num 10 10) 20)))

To run the test that I’ve just created: M-x ert-run-tests-interactively

Choose the test I would like to run (in this case “pos-add-num”)

Part 2 – Create A Simple Function And A Test Of That Function

Link to episode 2

setq to set variables and lists (setq my-list '(1 2 3))

add-to-list to add element (add-to-list 'my-list 4)

Another way to add to list, but this time to a copy of the list: (cons 5 my-list) – this will return (5 1 2 3 4) But when inquiring my-list, we will get (1 2 3 4)

car returns the first element in every list (car my-list) -> 1

cdr returns everything from a list, after the first element (crd my-list) -> (2 3 4)

nth return a certain element in the list (nth 4 my-list) -> 3

member check for a certain value in a list, and return the elements in that list from that value on (member 3 my-list) -> (3 4) (member 7 my-list) -> nil

Part 3 – Looping And Local Variables

Link to episode 3

Use the scratch buffer, so I can write in multiple lines

C-x C-e to evaluate code. Point needs to be at the end of the code in order to get evaluated.

Looping through variables:

let to create a local variable

when and if – what they suppose to do…

If there is more than one statement in the if statement, need to use to wrap those lines with progn. There is no such limitation in the else statement.

Part 4 – Interactive Functions

Link to episode 4

Created a function to count words, plus the test for it.

(defun cheap-count-words()
  (let ((words 0))
      (goto-char (point-min))
    (while (forward-word)
      (setq words (1+ words)) ))
    (message (format "Words in Buffer: %s" words))words))

;; Tests
(require 'ert)

(ert-deftest count-words-test ()
  (get-buffer-create "*test*")
  (with-current-buffer "*test*"
    (insert "Hello world")
    (should (=(cheap-count-words) 2)))
  (kill-buffer "*test*"))

Magit – My Simple Workflow

I still not fluent with Magit’s terminology and workflow. Probably because I’m not using git, in general, too often. When I do, and when I try to use Magit as the interface, I usually get confused by the wealth of options and switches, and resort to git in the terminal.

Today I decided to give Magit yet another try. I read the Getting Started guide, and now things makes much more sense. However, I can see how I forget what I’ve just read a week from now, so here’s the gist of that, my simplest cheat-sheet:

(Ma)git status:

C-x g

(Ma)git add

For each unstage file: s

(Ma)git commit

c c

Type the commit note and then C-c C-c to create the commit.

(Ma)git push

p u

Done. Now I can type q to close the Magit pop-up buffer, and be back on the file I was working on.

Electric Pair Mode In Emacs

So far I’ve used TextExpander for text snippets and, well, text expansion. One of my main uses-cases is character pairings. For example, when I type " I almost always enclose it with another ".

But TextExpander is lacking in several ways:

  1. Performance – it takes a friction of a second for the expansion to happen, but it’s notable, and feels like a little hang.
  2. If I delete one part of the pair, it won’t remove the other.
  3. It won’t work to wrap text. If I typed something, and then want to wrap it with brackets, for example, I can’t select the text and type the bracket character.

In addition to the above technical shortcomings, I don’t plan to keep using TextExpander in the long run. The recent move into subscription based pricing, isn’t something I’m interested in. I mean, paying subscription to text snippets…?

Anyway, Emacs comes with an electric-pair-mode, which enables smart pairing. I turned it on, but out of the box it’s configured to work mainly with programming major modes. I need it also in other text based modes, such as org, markdown and simple text. For example, in org I use ~ for inline code snippets, and ~ isn’t paired by default. Same goes with ".

Luckily, defining more pairs is easy, through modifying the electric-pair-pairs variable.

Here’s my configuration for this mode:

(electric-pair-mode 1)
(setq electric-pair-pairs '(
                            (?\" . ?\")
                            (?\` . ?\`)
                            (?\( . ?\))
                            (?\{ . ?\})
                            ) )

I’ll add more pairs as I encounter them. Also, I’ll need to learn how to add pairs for specific major modes.

Ortus Rengi

Recently I’m into gaming. It started with a nostalgic craving to Half-Life, which I used to spend hours on, about ages ago. I wondered if there’s a version for mac, and found that there is, in Steam. I didn’t hear about Steam before (thinking about it, I did hear about it in one of the Cortex podcast episodes), but once visiting that service, there is no way out… a spent almost the entire night browsing through games, feeling I’m in an amusement park. I forgot all about half-life, and eventually immersed myself in Ortus Rengi, a closed-deck, deck-design strategy card game.