
Last month [@necolas](https://twitter.com/necolas) tweeted a thread about
localization & RTL support in web apps. It's a very nice thread, you should
check it!

<blockquote className="twitter-tweet" data-lang="en">
  <p lang="en" dir="ltr">
    Does your team work on a localized app? One that needs GUI translations,
    needs RTL layout, and has user content in multiple languages. What
    localisation-related challenges are you aware of and struggling with?
  </p>
  &mdash; Nicolas (@necolas)
  <a href="https://twitter.com/necolas/status/964935779679051776?ref_src=twsrc%5Etfw">
    February 17, 2018
  </a>
</blockquote>

And since I am a native Arabic speaker & also a developer who had his own share
of working on multi-lingual websites I replied to him & we had some discussion
which actually made think about RTL support in general but more specifically in
the context of the Web, Web related tool & maybe even some media tools around
that.

<blockquote className="twitter-tweet" data-lang="en">
  <p lang="en" dir="ltr">
    As a Native Arabic speaker I find the latter more legible, the one you
    mention as legible is using Tahoma Arabic font which IMO very bad in Arabic.
    Feels like Comic Sans but Arabic version.
  </p>
  &mdash; Ahmed El Gabri (@AhmedElGabri) <a href="https://twitter.com/AhmedElGabri/status/964971931614240768?ref_src=twsrc%5Etfw">February 17, 2018</a>
</blockquote>

I'll start with some known issues with Regards to Arabic support & then more
general problems when working on multi-lingual apps/sites & some solutions for
some of these issues:

- Arabic support in media tools, Photoshop, etc...
- Arabic typography on the web
- RTL development & some wrong assumptions.

So let's start...

### Arabic support in media tools, Photoshop, etc...

This is in my opinion the cause of most of the issues, because people uses these
tools trusting that they are doing the right thing. But the reality is they
don't, did you know that Photoshop used to have two versions? one that supports
mainly Latin languages & one that was supporting RTL languages like Arabic &
Hebrew. It was called (Photoshop CC me) the "me" part I think referred to the
"Middle East" version. It used be released later than the normal version too.

They changed this now, but you need to turn a setting on if you want to right
Arabic for example https://forums.adobe.com/thread/1878946

To understand the problem a bit, you need to understand how the script works.
Written Arabic is a script, so letters are connected to each other & letters
have different shapes depends on the position that they are in. As you can see
in this image from [Wikipedia](https://en.wikipedia.org/wiki/Arabic_alphabet)

<div>
  <div style={{background: 'white', marginBottom: '.5rem'}}>
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/a/af/Arabic_Language.svg"
      style={{maxWidth: '100%'}}
    />
  </div>
  <p>This says "The Arabic"</p>
</div>

Compare this to the next image

<div>
  <div style={{background: 'white', padding: '.5rem', marginBottom: '.5rem'}}>
    <img
      src="/img/broken-arabic.svg"
      style={{maxWidth: '100%', margin: '0 auto', display: 'block'}}
    />
  </div>
  <p>
    This exactly the same as above, but in a software that doesn't support
    Arabic
  </p>
</div>

This is one of the most common issues with media tools & people who just trust
the tools without doing much research. Funny fact thought, even multi-billion
dollar companies & blockbuster Hollywood movies make this mistake.

You can see more examples about this in this amazing
[Nope not Arabic](https://nopenotarabic.tumblr.com/) by
[@ra](https://twitter.com/ra) and sometimes
[@tha_rami](https://twitter.com/tha_rami) tweets about this too, here is an
example

<blockquote className="twitter-tweet" data-lang="en">
  <p lang="en" dir="ltr">
    My only criticism of Black Panther is the reuse of this shot. You make a
    movie empowering non-white people, it&#39;d be nice to just spend 0.002% of
    your VFX budget on fixing your fake Arabic to actually be Arabic.
    <br />
    <br />
    Black Panther remains an incredible, I&#39;d daresay must-see, movie. <a href="https://t.co/G1EmC1eFh6">
      https://t.co/G1EmC1eFh6
    </a>
  </p>
  &mdash; Rami Ismail (@tha_rami) <a href="https://twitter.com/tha_rami/status/964868593535119360?ref_src=twsrc%5Etfw">February 17, 2018</a>
</blockquote>

### Arabic typography on the web

It's very simple, not that good at all. The default system fonts are very
limited & the most used font (Tahoma Arabic) for lots of people _including me_
feels like the Comic Sans equivalent but for Arabic. The sad part is Arabic
typography is actually very very rich!

So, in order to have nice Arabic typography on the web you need to use a custom
font, but not all Arabic custom fonts are good (there are some exceptions like
[AlAmiri font](http://www.amirifont.org/) by
[@khaledghetas](https://twitter.com/khaledghetas), also & the good Arabic fonts
are mostly not free & very expensive. Hopefully one day some of
[@arabictype](https://twitter.com/arabictype) & @khaledghetas work can be
installed by default on operating systems so we can have better defaults.

And Khaled summed it up better than me:

<blockquote className="twitter-tweet" data-lang="en">
  <p lang="en" dir="ltr">
    Almost all system fonts were designed decades ago and they were only
    passable because of the lowres rendering back in the day. Newer ones like
    Noto and <br />
    Segoe UI are better, with the exception of Apple new Arabic UI font which is
    worse than its predecessor.
  </p>
  &mdash; Khaled Hosny (@KhaledGhetas) <a href="https://twitter.com/KhaledGhetas/status/965003153438658560?ref_src=twsrc%5Etfw">
    February 17, 2018
  </a>
</blockquote>

### RTL development & some wrong assumptions.

There are lots of assumptions here that I read across the web, some of it seems
very logical but in fact wrong.

#### Directional thinking (right/left margins, floats, etc...)

IMO, one of the things that CSS got wrong was using the words "left" & "right"
in `margins`, `paddings`, `floats`, etc... better names would have been `start`
& `end`. Because most developers when they start writing CSS they think in LTR
only (even if they are working on a website that needs to support both) & then
afterwards they slap a stylesheet to "flip everything".

But sometimes you fall in the trap of having your classes named something like:

```css filename=ltr.css
.float-left {
  float: left;
}

.margin-right {
  margin-right: 10px;
}
```

Then you override these in your RTL stylesheet as follows, which is very counter
intuitive, confusing & hard to maintain.

```css filename=rtl.css
.float-left {
  float: right;
}

.margin-right {
  margin-left: 10px;
}
```

Compare that to this, which IMO is easier to understand & maintain

In LTR stylesheet

```css filename=ltr.css
.float-start {
  float: left;
}

.margin-start {
  margin-left: 10px;
}
```

In RTL stylesheet

```css filename=rtl.css
.float-start {
  float: right;
}

.margin-start {
  margin-right: 10px;
}
```

This would have been even better if CSS had these values the same too

```css filename=ltr.css
.float-start {
  float: start;
}

.margin-start {
  margin-start: 10px;
}
```

#### Using `dir="rtl"` on the `<html>` tag

Yes it makes sense & very logical to do so. But do you know that this will flip
the scrollbars to the other side of the screen? Some will say yes this is the
right behavior & since we are "flipping" from LTR to RTL scrollbars should be
flipped too.

If the web started with good RTL support I would have said yes, do it. But
because the web started with mainly English support (LTR) everyone I know in the
Middle East is already accustomed to the scrollbars on the right as they are in
LTR & when flip this it becomes very disorienting & confusing experience.

I can't remember how many times my mom complained to me about this while she was
browsing some Arabic website & finds the scrollbars are on the opposite side of
the screen.

Use `dir="rtl"` on the `<body>` instead, this will flip the text as intended but
will keep the scrollbars in the same place.

#### Flipping media controllers (play, pause, etc...)

Please don't. Like really, don't. It's a terrible terrible idea! These things
are universal, don't confuse the users. Unless you know for sure, like 99.9%
sure that your target users will want this.

#### Arabic numbers reads from Left-to-Right (LTR)

Yes, we write from Right-to-Left but with numbers we do it from Left-to-Right,
make sure to handle this properly whether you use
[`<bdo>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdo) or wrap
your numbers in `<span dir="ltr">` just make sure they are LTR & not RTL.

And one more point regarding numbers, what is considered Latin numbers now are
actually the original Arabic numbers & what are considered Arabic numbers now
are actually Hindi numbers. So you don't need to change this too.

#### UI & Design issues when supporting multiple languages

- Your designs should be as fluid as possible, no width on any element. Only
  your grid.
- It should handle long lines & text wrapping without breaking the UI
- If you still live in the age of pixel perfect & the fold, then good luck.

These seem to be very simple rules & even very logical to do, but you would be
amazed how many designers & developers don't follow these rules when working on
a website/app that supports multiple languages.

I can go on & on in RTL development, but these are good enough to get you
started.

I have had my share working on multi-lingual websites/apps, I built apps &
websites for more than 20+ languages including projects that had to support
English, Arabic & Russian for a single website (that was fun!)

Supporting different languages which shares the same alphabets is already hard
enough, so I understand how hard it is to support different language with
different alphabets, direction & rules. So if you plan to support Arabic & RTL
in your app/site please do your homework & don't just add it as an afterthought
or at the end. Because it doesn't work this way, it will hurt your brand & will
also show that you don't care enough about this group of people.

The least thing you can do is to show your app/site/ad/etc... to an Arabic
speaking person before you go live. I'm sure you can find at least one person in
your city who
[speaks Arabic](<https://en.wikipedia.org/wiki/List_of_languages_by_total_number_of_speakers#Ethnologue_(2017_20th_edition)>)


RTL on the web, web related tools & maybe more...


Today, just a couple of hours ago
[Prettier released version `1.6.0`](https://github.com/prettier/prettier/tree/1.6.0)
with support for `.prettierrc` & `.prettierignore` files. If you follow me on
twitter you might have noticed how much I love prettier. But in the same time,
you might have noticed my growing pain of the endless stream for `.*rc` &
`.*ignore` files.

One of the things that I **really** liked about prettier was the lack of config
_by any means, files, etc..._

### Here is a list of file config files we currently have in our repo that are only related to front-end tools:

- `.babelrc` - also will support `.js`
- `.eslintrc.js` - supports `.yaml` & `.js`
- `.eslintignore`
- `.npmrc` - Just has `save-exact = true`
- `.nvmrc` - to make sure everyone is using the same node version
- `.yarnrc` - has `exact "true"` & `save-prefix ""`. We mainly use `yarn`
- `package.json` - aside from the normal `package.json` stuff, it contains
  `jest` configuration which I could have already kept in a `jest.config.js`.
- `webpack.config.js` - still a config-ish file, that depends on the loaders
  that you use can depend on the other `.*rc` files too. For example
  `babel-loader` will pick up the config from `.babelrc`. If you have
  `eslint-loader` it will pick up `.eslintrc`, etc...

### Here are a couple more that we might have in the next few days/weeks:

- `.flowconfig`
- `.stylelintrc`
- `.stylelintignore`

### And of course:

- `.prettierrc`
- `.prettierignore`

### honorary mention:

- `.tsconfig.json` - for typescript
- ~~`.bsconfig.json` - for bucklescript if you use
  [ReasonML](https://reasonml.github.io)~~ actually in ReasonML this might be
  the only config file you need next to `webpack.config.js`. Another _reason_ to
  like it.

#### and more...

Not to mention that `babel-env` & `autoprefixer` now use the `browserlist`
project, which allows you to pass which browsers you want to support so they can
handle the polyfills & prefixes for you & guess what? It also has it's
[own files](https://github.com/ai/browserslist#queries)!

So that makes the total `14` files in our repo. Isn't this a bit too much for
config files? Before everyone starts yelling at me that I can add most of these
configs inside `package.json` - _which I don't mind doing_ - and most probably
will start doing. that's not the main issue.

#### The issue is

- This loop will never end: tomorrow someone comes with a new great tool called
  `X` & they decide they need some config for it & boom we have `.Xrc` &
  `.Xignore` now. This loop will never end this way.
- They are not really separate. 90% of the time you will need to change a couple
  of them if you want to add a new tool because all of them relate/work with
  each other. Which makes it painful to deal with.

So I have a simple question here.

<blockquote className="twitter-tweet" data-lang="en">
  <p lang="en" dir="ltr">
    If we keep adding new `.*rc` files can we at least try &amp; agree on a
    single `.*rc` file to hold all of these configs? 🤷🏻‍♂️
  </p>
  &mdash; Ahmed El Gabri (@AhmedElGabri) <a href="https://twitter.com/AhmedElGabri/status/902236725229101056">August 28, 2017</a>
</blockquote>

I know that not all of these `.*rc` files can be merged into one, but at least
can we agree that many of them can? most of these configs are just `JSON`
objects so why not store them all in one place?

Also, this way if a new tool comes out we just need to add a new key. It doesn't
solve the whole problem but at least it keeps us a little bit saner.

What is wrong with this? And yes it must be a `.js` file:

- Comments are easier than in `.json` files
- You can change the config depends on the environment.
- If you want, you can dynamically generate your config.

```js
// use this to toggle on/off some configs or switch them completely
const isPROD = process.env.NODE_ENV === 'production'

module.exports = {
    jest: { ... },
    babel: { ... },
    prettier: { ... },
    stylelint: { ... }
}
```

Or event better!

<blockquote className="twitter-tweet" data-conversation="none" data-lang="en">
  <p lang="en" dir="ltr">
    exactly. why not just have a `.config` dir in the project root, and put all
    the stuff in there, so they are out of sight, but there if you need to
    change something. you set up eslint in `.config/eslint/rc.json` or something
    similar, and its done, on the side.
  </p>
  &mdash; Pavlos Vinieratos (@pvinis) <a href="https://twitter.com/pvinis/status/1056853151540826112?ref_src=twsrc%5Etfw">October 29, 2018</a>
</blockquote>

### So people might say & how is this better than having multiple files?

The answer is, it's not much better but at least we can have these:

- Less cognitive load
- One place to handle most of the logic (env switching, etc...)
- Restoring some sanity?

I really do like all of these projects, they are amazing projects made by
smarter people than I am. But honestly I never felt JavaScript fatigue, but I
started to feel Config/rc files fatigue.


Death by thousand config files


Many people assume that vim is a dumb editor after they see it for the first
time and they start to ask how can I do X like my current editor is doing it.
And that's a mistake, because editing in vim is a different way of thinking. I
did this mistake when I was first learning too, one of those questions that
seems to be very simple is, how can I do search & replace in multiple files in
vim.

The typical way of doing this in most editors is something like clicking
`CTRL/CMD+SHIFT+F` or something which presents you with three fields to add your
search query string, the string you want to replace it with & an optional field
for filetype/extension. Then click `Enter` & you are done.

Simple, yes. Easy, yes. Powerful, not really. Doing multiple files search &
replace is actually very easy & straightforward in vim **(and doesn't require
any plugins)** but it's extremely powerful.

> When you use vim (or even Emacs) your CLI is part of your editor, this means
> that you can use anything that you have installed in your `$PATH`, and for
> anyone who have some decent knowledge about the UNIX philosophy or how the CLI
> works & how powerful it is, they will know that your imagination is the limit.

What I'm going to show here is just the basic idea of how to do a search &
replace in vim, the rest is up to you...

Let's assume you have a comment in each of your files that has the phrase
`I hate vim` & you want to change it to `I love vim`, here is how you can do
this in 2 steps using `:args` & `:argdo` commands

First step,

```vim
:args `grep --recursive --files-with-matches 'I hate vim' .`

// can be shorter

:args `grep -r -l 'I hate vim' .`
```

What will happen here is that the command inside the backticks will run & the
results will be evaluated & passed to `:args` which in turn open vim buffers
from the list of files that this command will return. One caveat here is that
the string you are searching for must be inside single quotes, not double
quotes.

> The powerful part here that you are not tied to `grep` or any other command,
> you can use [`rg`](https://github.com/BurntSushi/ripgrep),
> [`ag`](https://github.com/ggreer/the_silver_searcher),
> [`pt`](https://github.com/monochromegane/the_platinum_searcher),
> [`ack`](https://beyondgrep.com/), `grep` or even `git grep`. Any command that
> will return a list of files to vim will work. vim is just a consumer here.

Second & last step, now that you have multiple buffers opened with your search
results you need to do your replace action on them. Also, optionally save the
files or do something else. If you type `:args` alone now you will see a list a
of the buffers in your arglist _(argumnet list)_, so to run commands on an
arglist you need to use `:argdo` command to do this, in our case we want to
replace a string with another. So we will do this

```vim
:argdo %s/I hate vim/I love vim/g | update
```

Think of `:argdo` as a map function that takes an iterator to loop over a list
applying this iterator on each item of the list, because that's exactly how it
works. `:argdo <iterator>`. Here our _iterator_ is vim's substitute command
`%s/<query>/<replace>/flags` so I'm just saying find the string `I hate vim` &
replace it with `I love vim` with the global flag `g` on, to replace all
instances of the string. The `| update` part is simply telling vim to save the
files. You can do other things if you want before saving.

> In short I tend to think about vim's search & replace with `:args` & `:argdo`
> as functional composition that looks something like this
> `agrdo(args(filter(query)), iterator)` which when you look at it this way
> helps you a lot more than trying to think of it in terms of commands to
> remember or execute.

What I didn't mention here that if you know regex you can do crazy stuff here,
because all these grep programs supports `Regex` & vim also supports it. And as
always `:help` or `:h` is your friend. So read `:h args`, `:h argdo`,
`:h :substitute` for more info.


Multiple files search and replace in vim


One of the problems I noticed with many developers that when they use a module
bundler like Webpack, Browserify, etc… they tend to think that it will
automagically handle optimization for them just by enabling & using all the
optimization plugins available in the tool.

But that’s not true, while these bundlers plus their plugins & optmization
settings can handle nearly 90% of the this issue, you still need to handle the
rest yourself or at least measure & check every once in a while what your bundle
looks like. So I’ll show you a couple of things you can do with Webpack to
optimize your bundle even more.

I’ll cover how to analyze your bundle & remove things you don’t need (you might
even not be aware of some stuff, more on that latter)

So let’s start…

### Analyzing your Webpack bundle

I have a very simple react app here, you just type in the input field & it will
slugify the output of what you typed.

![](/img/webpack-analyze-app.gif)

That's the code for the app, pretty normal stuff nothing fancy here.

```js:App.js
import React, {Component} from 'react'
import {render} from 'react-dom'
import slug from 'slug'

const Input = ({onChange}) => <input type="text" onChange={onChange} />

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      text: '',
    }

    this.handleEvent = this.handleEvent.bind(this)
  }

  handleEvent(e) {
    this.setState({text: e.target.value.trim()})
  }

  render() {
    return (
      <div>
        <Input onChange={this.handleEvent} />
        <p>{slug(this.state.text) || 'Start typing...'}</p>
      </div>
    )
  }
}

render(<App />, document.querySelector('#App'))
```

So, you run it through Webpack & eveything is fine, right? It compiles, works &
everyone is happy. But look at this output from Webpack.

![](/img/webpack-analyze-output.jpg)

The bundle size is **1.84mb**! And there is this file called `So.js` which is
`1.91mb` alone, and it's coming from a folder called `unicode/category`. How can
we get more info about this?

You have a couple of options here:

1. Open `node_modules` & `grep`, `find` or even manually to try & find where is
   that `unicode` folder is.
2. Use Webpack's powerful CLI flags to get more data & information about your
   bundle.

I'll go with the second option, so I'll add this script to my `package.json` so
I can run the command easily

```json:package.json
{
  "name": "webpack-analyze",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "NODE_ENV=production webpack",
    "debug": "npm run build -- --progress --colors --profile --display-modules --display-reasons --display-error-details"
  },
  "license": "MIT",
  "dependencies": {
    "babel-core": "6.22.1",
    "babel-loader": "6.2.10",
    "babel-preset-es2015": "6.22.0",
    "babel-preset-react": "6.22.0",
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "slug": "0.9.1",
    "slugify": "1.1.0",
    "webpack": "2.2.0"
  }
}
```

> Tip: you can reuse `npm run` scripts in other npm scripts & pass flags to them
> by adding `--` between the command & the flags. Like in the `debug` script
> here.

This `npm run debug` will simply reveal more info about the bundle & modules
that will allow us to narrow down what is the problem exactly. I recommend to
read more about the [Webpack CLI](https://webpack.js.org/api/cli/) to get an
idea on what else you can do. So after running `npm run debug` you will get
something like this (_it's too big to put it all in the post so this is just the
part that we are interested in_)

![](/img/webpack-analyze-debug.jpg)

So now we know that `So.js` is related to the `slug` module, great. So it turns
out that the `slug` module, has a `postinstall` hook that creates some unicode
files to handle different languages & `So.js` is one of them & it holds mainly
Arabic & Tibetan unicode symbols.

Another solution to check your bundle which can actually help you even, is using
something like
[`webpack-bundle-analyzer`](https://www.npmjs.com/package/webpack-bundle-analyzer).
Because it visualizes the size of your dependency tree using tree maps, it
should look like this.

![](/img/webpack-bundle-analyzer.jpg)

So, the perfect scenario you would use a different module other than `slug`, but
let's assume that you can replace this right now for whatever reason (time,
overhead, etc...) you still don't want to serve these `~2mb` for your users. So
how can you do this?

Turns out that solutions was pretty simple, you can use Webpack's
[`IgnorePlugin`](https://webpack.github.io/docs/list-of-plugins.html#ignoreplugin)
to tell Webpack to ignore this file from the bundle.

```js:webapck.config.js
plugins: [
  // ignore the So.js unicode table file (mainly it contains Arabic & tibitan unicode data)
  new webpack.IgnorePlugin(/unicode\/category\/So/, /node_modules/),
]
```

And here is the output after that change, the bundle is only `150KB` now.

![](/img/webpack-analyze-output-after.jpg)

Congratulations, you have just removed `~2mb` from your bundle 🎉

While following best practices when setting up Webpack can go a long way for
optimizing your bundle, you still need to monitor it for any sudden size
increase and/or audit it every once in a while to make sure things like this
doesn't happen.

If you want to play with the code it's on
[Github](https://github.com/ahmedelgabri/webpack-analyze)


Analyzing & optimizing your webpack bundle


To start, Evernote is nice app. But not for me, I always had this love/hate
relationship with it and with note talking apps in general. All I want from a
note talking app is very simple.

1. I don't need to use the app to write my notes, I can use my favourite text
   editor to do this.
2. Export my notes as text/Markdown.
3. Full Markdown support.
4. Own my data and the ability to choose whatever service I like to sync my
   notes with, iCloud, Dropbox, etc...

Evernote supported none of these requirements, but it was the best one and
recommended by nearly everyone I know. So I started to use it and then after a
couple of years I moved to [simplenote](http://simplenote.com) which was a bit
better but note much better than Evernote, it supported Markdown _to some
extend_ the app was less sluggish too which was a huge plus.

Last year I found about [Alternote](http://alternoteapp.com/) for Evernote, It
combined what I liked between Evernote and Simplenote together and it allowed me
to write note using Markdown. So I went back to Evernote. But I was still not
happy at all.

### Using your text editor of choice

I use Vim and most of my day I spend doing stuff in iTerm2, and I don't see any
point for me to not be able to write my notes using Vim or _insert your fav text
editor here_ and/or using Markdown. Both Evernote and Simplenote don't
officially have any way to do this, so I found these Vim plugins
[evervim](https://github.com/kakkyz81/evervim) and
[simplenote.vim](https://github.com/mrtazz/simplenote.vim) I tried both for a
while but I was not satisfied and it was not the workflow I liked.

I'm aware of [Geeknote](http://www.geeknote.me/) but it was too much for me, I
like simple solutions.

### Export my notes as text/Markdown

- Evernote export is the worst, it export your notes as `.enex` or `.html`.
- Simplenote, exports your notes as text but without any metadata. I didn't like
  this too.

### Full Markdown support

- Evernote: No.
- Simplenote: Yes to some extend.

### Own my data and sync using my favourite service.

Both doesn't support this option.

So I had to find another option because I was really getting annoyed, I tried
lots of apps that integrated with Evernote or Simplenote but I didn't like any
of them. In my search for a better workflow, I found
[jrnl](http://maebert.github.io/jrnl/) _which you can use without Day one_ Which
seemed like exactly what I was looking for. But I needed a way to get my notes
on my phone and also to keep the tagging and search functionality here when
[Day one](http://dayoneapp.com) comes to play. Did I mention that they have an
official [CLI](http://dayoneapp.com/tools/cli-man/) tool too!

### Converting Evernote `.enex` export to `.json`

But in order to do this I have to migrate my notes from Evernote to Day one. But
the export from Evernote is `.enex`, how can I do anything useful with it. I
found this Python package called
[ever2simple](https://github.com/claytron/ever2simple) it was meant to be a tool
to convert `.enex` to `.json` to be able to import your notes into Simplenote
but the irony is that Simplenote doesn't support this anymore!

But still having all my notes as `.json` was a huge improvement to `.enex`

### Create Markdown notes from `.json`

At this point I have a `.json` file with all my notes info in there with all the
metadata too, which is great. Day one CLI tool can import any text format file
to Day one. So at this point I wrote a _dirty_ node script to create all my
notes as Markdown files and import them using the Day one CLI tool.

Here is the _quick & dirty_ script using node and ES2016 (aka ES6) syntax.

```js:script.js
#!/usr/bin/env node

const fs = require('fs')
const path = require('path')
const {execSync} = require('child_process')
const moment = require('moment')
const slug = require('slug')
const notes = require('./evernote.json')

let title
let tags
let date
let creationDate
let content
let file
let slugg

notes.forEach((note) => {
  title = note.content.split('\n')[0].substring(2)
  slugg = slug(title.toLowerCase())
  date = moment(note.createdate).format('YYYY-MM-DD')
  creationDate = moment(note.createdate).format('YYYY-MM-DD HH:mm')
  tags =
    note.tags.length > 1
      ? note.tags.map((tag) => `#${tag.toLowerCase()}`).join(', ')
      : note.tags.map((tag) => `#${tag.toLowerCase()}`).join()
  file = path.join(__dirname, './evernote-md', `${date}-${slugg}.md`)
  content = `# ${title}
  ---
  date: ${creationDate}
  tags: ${tags}
  ---
${note.content
  .substring(note.content.split('\n')[0].length)
  .replace(/\s?\n\n?\s?/g, '\n')}
`
  console.log(tags)

  fs.writeFileSync(file, content, 'utf-8')
  execSync(`dayone -d="${creationDate}" new < ${file}`)
})
```

At this moment I managed to import all my notes to Day one with my all metadata.
And the nice thing in Day one that if you have `#something` this can be
converted automatically for you as a tag.

### The new workflow and Syncing options

After managing to import all my notes from Evernote to Day one app, now I need
to connect the dots using `jrnl`. jrnl configuration is stored inside
`~/.jrnl_config` file as JSON you can check all the option
[here](http://maebert.github.io/jrnl/advanced.html#configuration-file) It does
support encryption too.

Here is how my configuration looks like

```json:.jrnl_config
{
  "default_hour": 9,
  "linewrap": 79,
  "encrypt": true,
  "default_minute": 0,
  "tagsymbols": "#",
  "editor": "nvim",
  "timeformat": "%Y-%m-%d %H:%M",
  "highlight": true,
  "journals": {
    "default": {
      "journal": "<dayone iCloud path on my laptop>"
    }
  }
}
```

Also in Day one I've set it to iCloud although you can use one or more of these
options:

- Day one sync
- Dropbox
- iCloud
- Custom location

### Rejoice!

Now all I need to do is type `jrnl` in my terminal and it will open my editor
with all my settings, snippets etc... and I can write in Markdown. Once I save,
my note is created in Day one uploaded and synced to all my devices.


Migrating from Evernote


> _**Update 20 Aug 2017:** I'm currently using a new & better version of the
> statusline code posted in this post, you can check the code here:
> [statusline](https://github.com/ahmedelgabri/dotfiles/blob/f2b74f6cd4dc8388047af87872621c5176c50306/files/.vim/plugin/statusline.vim)
> &
> [statusline functions](https://github.com/ahmedelgabri/dotfiles/blob/f2b74f6cd4dc8388047af87872621c5176c50306/files/.vim/autoload/statusline.vim)_

Nearly two years ago I decided to switch to Vim and move all my work into one
app. The command line/Terminal or more sepcifically iTerm2. That desicion turns
out to be one of the best things I've ever done. I'm still not a Vim expert by
any means but I always look for ways to improve my workflow.

As anyone who starts to use Vim you start installing lots of plugins to try and
emulate some functionalities that you are used to in your text editor or IDE.
Which is a wrong thing to do, but that's a different story and already lots of
people talk about this before.

So one of the things that is important in Vim is the statusline it shows lots of
useful info about the file you are editing and the mode you are currently on,
etc... and as nearly everything in Vim it's insanely customizable so I went with
the easiest solution which was [airline](https://github.com/bling/vim-airline),
Airline is really powerful and customizable too. But after a while and as I
usually do; I try to simplify my tools as much as I can and reduce the moving
parts/dependencies. I started to read about statusline `:h 'statusline'` and
check some articles about Vim and going through any dotfiles repo I can find and
go through its code not only for Vim but for everything.

I found out that for my needs I actually don't need airline, also because I was
using lots of plugins this started to slow down Vim startup and sometimes
editing too which was a red flag for me cause one of the reason of using Vim was
that it's blazingly fast to start, nearly instant. So I decided I'll write my
own customization to emulate what I liked about airline without all the overhead
of it. I managed to achieve what I want and it turns out to be quite simple.

```vim:.vimrc
" Statusline

" :h mode() to see all modes
let g:currentmode={
    \ 'n'      : 'N ',
    \ 'no'     : 'N·Operator Pending ',
    \ 'v'      : 'V ',
    \ 'V'      : 'V·Line ',
    \ '\<C-V>' : 'V·Block ',
    \ 's'      : 'Select ',
    \ 'S'      : 'S·Line ',
    \ '\<C-S>' : 'S·Block ',
    \ 'i'      : 'I ',
    \ 'R'      : 'R ',
    \ 'Rv'     : 'V·Replace ',
    \ 'c'      : 'Command ',
    \ 'cv'     : 'Vim Ex ',
    \ 'ce'     : 'Ex ',
    \ 'r'      : 'Prompt ',
    \ 'rm'     : 'More ',
    \ 'r?'     : 'Confirm ',
    \ '!'      : 'Shell ',
    \ 't'      : 'Terminal '
    \}

" Automatically change the statusline color depending on mode
function! ChangeStatuslineColor()
  if (mode() =~# '\v(n|no)')
    exe 'hi! StatusLine ctermfg=008'
  elseif (mode() =~# '\v(v|V)' || g:currentmode[mode()] ==# 'V·Block' || get(g:currentmode, mode(), '') ==# 't')
    exe 'hi! StatusLine ctermfg=005'
  elseif (mode() ==# 'i')
    exe 'hi! StatusLine ctermfg=004'
  else
    exe 'hi! StatusLine ctermfg=006'
  endif

  return ''
endfunction

" Find out current buffer's size and output it.
function! FileSize()
  let bytes = getfsize(expand('%:p'))
  if (bytes >= 1024)
    let kbytes = bytes / 1024
  endif
  if (exists('kbytes') && kbytes >= 1000)
    let mbytes = kbytes / 1000
  endif

  if bytes <= 0
    return '0'
  endif

  if (exists('mbytes'))
    return mbytes . 'MB '
  elseif (exists('kbytes'))
    return kbytes . 'KB '
  else
    return bytes . 'B '
  endif
endfunction

function! ReadOnly()
  if &readonly || !&modifiable
    return ''
  else
    return ''
endfunction

function! GitInfo()
  let git = fugitive#head()
  if git != ''
    return ' '.fugitive#head()
  else
    return ''
endfunction

set laststatus=2
set statusline=
set statusline+=%{ChangeStatuslineColor()}               " Changing the statusline color
set statusline+=%0*\ %{toupper(g:currentmode[mode()])}   " Current mode
set statusline+=%8*\ [%n]                                " buffernr
set statusline+=%8*\ %{GitInfo()}                        " Git Branch name
set statusline+=%8*\ %<%F\ %{ReadOnly()}\ %m\ %w\        " File+path
set statusline+=%#warningmsg#
set statusline+=%{SyntasticStatuslineFlag()}             " Syntastic errors
set statusline+=%*
set statusline+=%9*\ %=                                  " Space
set statusline+=%8*\ %y\                                 " FileType
set statusline+=%7*\ %{(&fenc!=''?&fenc:&enc)}\[%{&ff}]\ " Encoding & Fileformat
set statusline+=%8*\ %-3(%{FileSize()}%)                 " File size
set statusline+=%0*\ %3p%%\ \ %l:\ %3c\                 " Rownumber/total (%)

hi User1 ctermfg=007
hi User2 ctermfg=008
hi User3 ctermfg=008
hi User4 ctermfg=008
hi User5 ctermfg=008
hi User7 ctermfg=008
hi User8 ctermfg=008
hi User9 ctermfg=007
```

First we need to get create a map of Vim modes and change the color of the
statusline depends on the mode we are in. What `ChangeStatuslineColor()` does is
that it gets the current mode and checks in the `currentmode` map and change the
color of the statusline accordingly. Pretty simple.

Next, the `FileSize()`, `ReadOnly()` and `GitInfo()` are pretty self
explanatory. The next section is how we but all this information together and
construct the statusline.

First we need to tell vim to always show the statusline by doing
`set laststatus=2` next we construct our statusline using all the functions that
we created before. I won't go through all the code here and I highly recommend
reading `:h statusline` what all these characters means.

At last, we set the colors for statusline using `highlight User1-9`, more in
`:h hl-User1` and if you want to know where these color values comes from you
can check my previous [article](/blog/custom-colors-in-your-zsh-prompt) on this.

Full credit goes to Reman on
[Stackoverflow](http://stackoverflow.com/questions/5375240/a-more-useful-statusline-in-vim/10416234#10416234)
and greduan
[dotfiles](https://github.com/Greduan/dotfiles/blob/76e16dd8a04501db29989824af512c453550591d/vim/after/plugin/statusline.vim).

Here is a gif for my statusline

[![](/img/statusline.gif)](/img/statusline.gif)

and here is the code in my
[vimrc](https://github.com/ahmedelgabri/dotfiles/blob/c4f40c27b295ecfb7673bd29d373cab26b93379b/vim/vimrc.local#L302-L423)

_I have enabled true color in iTerm2, Neovim and tmux. So ignore the hex code
for colors_

Vim and CLI are both really powerful and the ability to have your workflow in
one place is very productive as everything we don't know it's scary at first but
once you get some basic understanding of it becomes easier to understand.


DIY Vim statusline


I have been using [gulp](http://gulpjs.com) for a couple of months now &#038; I
like how simple it is compared to Grunt also that I'm actually writing code not
configurations &#038; it's easier to understand.

When I was converting the project I'm working on now from Grunt to Gulp I had
this idea, why not make the default task as TOC to list all available tasks?
instead of using it for a real task. How many times you
cloned/forked/collaborated on a project &#038; had to open `Gruntfile.js` or
`Gulpfile.js` to check which task you should run or open `README.md` to check
this? So I decided to make the default task as TOC of all the tasks available in
the `Gulpfile.js` and this is what I came up with.

```javascript:gulpfile.js
// This is (optional) if you don't want colored output
// you can ditch this if you are not using it for anything else.
var utils = require('gulp-util')

gulp.task('default', function () {
  var tasks = Object.keys(gulp.tasks).sort()
  utils.log(utils.colors.yellow('You have the following tasks to run:'))
  tasks.forEach(function (t) {
    if (t === 'default') return
    utils.log(utils.colors.yellow('• gulp ' + t))
  })
})
```

I'm getting the task names as an array using `Object.keys()`, sorting them
alphabetically, then looping through the array &#038; printing out each task
name excluding the default task.

Of course this is so raw now, as it currently lists _all_ the tasks available,
maybe you don't want to do this or you want to list just the main/important
tasks. I think this is very useful especially in teams &#038; open source
projects.

What do you think about this? I'd like to get feedback &#038; ideas on how to
improve this.


Making the default gulp task useful


In my search for the best local development setup on my Mac, I wanted to have
local domains something like `project.dev` that can work when I'm working on a
project locally instead of
`http://localhost/dev/projectname/somethingelse/etc/`. It's easier, faster,
cleaner & looks better.

The old way to achieve this needs you to edit the `/etc/hosts/` & Apache
`httpd-vhosts.conf` files each time you want to add new project, or if you are
using `VirtualDocumentRoot` inside `httpd-vhosts.conf` you will have something
like this

```apacheconf:httpd-vhosts.conf
NameVirtualHost *:80
<VirtualHost *:80>
   VirtualDocumentRoot /Users/<username>/Sites/%1/%-1/build
</VirtualHost>
```

Then you will only need to edit the `hosts` file. Which is still manual &
tedious.

The solution I found is using [dnsmasq](http://en.wikipedia.org/wiki/Dnsmasq),
the setup actually is easy & straightforward. First you need to install dnsmasq
through [Homebrew](http://brew.sh/) `brew install dnsmasq` make sure you follow
the steps mentioned after the end of the installation.

Then we need to edit `/usr/local/etc dnsmasq.conf`, let's say you want the local
domain name to be `.dev` then you should add this line `address=/.dev/127.0.0.1`
to `dnsmasq.conf` if you want to add more domains you can just add a new line
with a new domain name. Next we need to create a file called `dev` _with no file
extension_ inside `/etc/resolver/` with this `nameserver 127.0.0.1` inside. _If
you have multiple domains you will need multiple files, each file name need to
match the domain name_

The last step is to setup your `httpd-vhosts.conf` let's say your folder
structure is like this

```
Sites/
|- dev/
|--|-project/
|----|-public/
```

Then you will need to add this to your `httpd-vhosts.conf` file

```apacheconf:httpd-vhosts.conf
<Virtualhost *:80>
    UseCanonicalName Off
    VirtualDocumentRoot "/Users/<username>/Sites/dev/%1/public/"
    ServerAlias *.dev
    LogFormat "%V %h %l %u %t \"%r\" %s %b" vcommon
    ErrorLog "/Users/<username>/Sites/dev/vhosts-error_log"
</VirtualHost>
```

If you have multiple domains then you will need to add more blocks, a block for
each domain.

After you save this file you will need to restart Apache & Dnsmasq, but I found
that sometimes the dnsmasq settings don't get applied if I restarted it so I
restart the computer itself.

Now, try to access any projects you have under the dev folder using this pattern
`http://<project-name>.dev` this will always serve what is inside the `public/`
folder under this project. whenever you create a new project under the `dev/`
folder it will be accessible using `.dev` domain, no need to manually do
anything or edit the `hosts` file anymore.


No more hosts file with dnsmasq

### The problem

Anyone who worked with `CSS` before knows that one of the biggest problems we
face as front-end developers is that `CSS` lacks scope or namescpacing, unlike
with JavaScript for example. Which makes it very prone to selector conflicts
which is something for sure you have struggled with at least a couple of times,
whether it’s through third-party plugins/apps/API’s injected `CSS` or you
working on an old projects with a tight deadline or even working with other
developers who don’t understand `CSS` very well.

### The fix

Some smart people came up with new ideas to fix it like that:
[Jonathan Snook's SMACSS](http://smacss.com/book/categorizing) or the clever
guys at Yandex with their [BEM](http://bem.info/method/) methodology & syntax
which I prefer and started to use in all my projects.

But with the rise of [OOCSS](http://oocss.org/) and trying to be as modular and
flexible as possible and to make our selectors short and concise, the problem
seems still existant. For example take the media object Harry Roberts mentioned
in his
[article about BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/); the
syntax looks like the following.

```css
.media {
}

.media__img {
}

.media__img--rev {
}

.media__body {
}
```

It’s still prone to conflicts, cause maybe another developers or even a
third-party API decided to use .media class, selectors will conflict and the
last one will win - _I’m not talking about specificity here, my rules are no IDs
& max two selectors per rule. I'm trying to write simplest specific rules as
possible -_, so I’m assuming that this component is first class citizen in your
`CSS`.

### My idea

I’m in the process of writing a small framework to act as my starting point for
any of the projects that I’m working on. So my solution for it was to create a
fake scope. I achieved this by prefixing all my selectors with something like an
your project initials, or your initials _maybe if you work alone_, framework
initials, something that you &amp; your team can understand. **This should be
documented of course**.

So let's make this easier, if we imagined that `CSS` had a global scope like
JavaScript it will look something like this.

```md
global object

    |_ <your prefix>

        |_ media object

        |_ grid

        |_ tabs

        |_ buttons
```

You shouldn’t be using different prefixes in your project, you will only use
**only one per project**. For example lets take the same `.media` object above
and apply this idea to it, assuming that we are working on “realmadrid.com”
website. the new code will look like that:

```css
.rm-media {
}

.rm-media__img {
}

.rm-media__img--rev {
}

.rm-media__body {
}
```

And you will need to apply this to all of your project objects, the pros of this
approach are:

- Your selectors are protected _scoped_ from new selectors by third-party
  plugins/APIs or from new developers
- Easily you will understand if this code was written by you/your team or by
  someone else.
- If you work on multiple projects at a time, it'll make it easier for you to
  understand which project you are working on with a glance.

The only downside I can think of know is it' more verbose especially if you are
going to use multiple classes on the same object like so. Which I stopped caring
about anyway. Code readability is much more important

```html
<div class="clearfix rm-media rm-media--wide rm-theme--green">
  <div class="rm-media__img">
    
  </div>

  <div class="rm-media__body">
    
  </div>
</div>
```

Yes I used `.clearfix` without a prefix cause it's not an object class &amp;
most probably when it's used by someone else it is a clearfix, if you want to be
on the safe side maybe you can prefix helper classes with `.h-` or something if
you like I'll be using this technique in all of my upcoming projects &amp; let's
see, but I'm optimistic about this approach. Let me know if you have any ideas
about this or how can I improve it more.

##### Update: YouTube is doing the same.

<a href="/img/youtube.png">
  <img
    src="/img/youtube.png"
    alt="youtube"
    className="aligncenter size-medium wp-image-937"
  />
</a>

#### Useful links

- [About HTML semantics and front-end architecture](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/)
- [MindBEMding – getting your head ’round BEM syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
- [The Evolution Of The BEM Methodology](http://coding.smashingmagazine.com/2013/02/21/the-history-of-the-bem-methodology/)
- [A New Front-End Methodology: BEM](http://coding.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/)

##### Update #2 (2016):

Currently I don't use or recommend using BEM with big apps, I prefer
functional/atomic CSS, CSS modules or CSS in JS with React. These are useful
links:

- http://www.jon.gold/2015/07/functional-css/
- https://blog.colepeters.com/building-and-shipping-functional-css/
- https://marcelosomers.com/writing/rationalizing-functional-css/
- https://glenmaddern.com/articles/css-modules
- http://www.basscss.com/
- http://tachyons.io/

Global scope, namespacing & CSS


While I was working on a project at work I needed to have " table of contents"
type of numbering in an `<ol>` but I wanted the numbers to be nested too like 1.
, 1.1, 1.2, etc... which is not possible in HTML. And I remembered that I have
faced this problem before &amp; I solved it using
[CSS Counters](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters)
and since I use [Sass](http://sass-lang.com/) now to write CSS. I thought about
creating a `@mixin` for this. So here you go: _ Thanks for
[cimmanon on Stackoverflow](http://stackoverflow.com/questions/16645824/check-for-a-variable-in-sass-mixin-print-it-if-its-defined/16648360?noredirect=1#16648360)
for helping me with this_

```sass
@mixin auto-numbers($numbered-element, $sep, $counter: item, $nested-parent: false ){
    $sel: ();
    @if $nested-parent {
        $sel: append($sel, unquote($nested-parent));

        #{$nested-parent}{
            list-style: none;
            margin-left: 0;
        }
    }
    $sel: append($sel, unquote('&'), comma);

    #{$sel}{
        counter-reset: #{$counter};
        > #{$numbered-element}{
            &:before{
                counter-increment: #{$counter};
                content: if($nested-parent, counters(#{$counter}, "#{$sep} ") "#{$sep} ", counter(#{$counter}) "#{$sep} ") ;
            }
        }
    }
}
```

The `@mixin` takes four arguments & must be called on the parent element:

`$numbered-element` The element that you wanted to counted, in my case it was an
`<li>` it can be anything.

`$sep` s the seprator sign you want to use <b>Must be a string</b>

`$counter` ounter name, if you are using the `@mixin` more than once you must
change the name for each one so it won't reset the counter before it.

`$nested-parent` assing the name of the parent element if you wanted to work in
a nested way like a `<ol>` or `<ul>` inside another `<ol>` or `<ul>`

here is a demo of the mixin in action

<p
  data-height="400"
  data-theme-id="0"
  data-slug-hash="bsIhF"
  data-default-tab="result"
  className="codepen"
>
  See the Pen{' '}
  <a href="http://codepen.io/ahmedelgabri/pen/bsIhF/">
    SASS MIXIN FOR AUTO-NUMBERING WITH CSS
  </a>{' '}
  by Ahmed El Gabri (<a href="http://codepen.io/ahmedelgabri">@ahmedelgabri</a>)
  on <a href="http://codepen.io">CodePen</a>.
</p>
<script async src="//codepen.io/assets/embed/ei.js"></script>

### Useful links about CSS counters

- [W3C specs](http://www.w3.org/TR/CSS21/generate.html)
- [MDN CSS counters](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters)
- [David Walsh: CSS Counters](http://davidwalsh.name/css-counters)
- [Opera dev: Automatic numbering with CSS Counters](http://dev.opera.com/articles/view/automatic-numbering-with-css-counters/)
- [impressivewebs: CSS Counters: counter-increment and Friends](http://www.impressivewebs.com/css-counter-increment/)


Sass mixin for auto-numbering with CSS


This is just a quick tip that I found & I thought it might be useful for others.
How many times you are building something locally & you want to test on
different browsers or even different OSs, All the time of course. Here is a
small tip I found [here](http://ubuntuforums.org/showthread.php?t=682519), If
you are developing locally & have some VirtualBox images "I recommend using
[these](http://www.modern.ie/en-us/virtualization-tools) for IE" & you want to
test your local website/app on your VirtualBox machine just type `10.0.2.2` &
you will access your localhost _this is tested on Mac, I dunno if the same
applies to Windows or not_.

### Apache VirtualHosts

Now, I have a problem cause I'm using Apache VirtualHosts on my machine, this is
how my `httpd-vhosts.conf` file looks like this

```apacheconf:httpd-vhosts.conf
 NameVirtualHost *:80

 <VirtualHost *:80>
   VirtualDocumentRoot /Users/<username>/Sites/%1/%-1/build
 </VirtualHost>
```

Now when I try the above method of VirtualBox I can't access my local sites
using VirtualHosts aliases, for the time being when I want to test I disable my
Virtualhosts & enable it back when I'm done. If anyone knows how can I fix this
it'll be great.


Quick tip: VirtualBox & localhost


I have been using [ZSH](https://github.com/robbyrussell/oh-my-zsh/) as my main
shell for nearly a year &amp; I really love it! Most of my days are between
[iterm2](http://www.iterm2.com/) &amp;
[Sublime Text 2](http://www.sublimetext.com/). So customizing both are a natural
thing for me.

So I have already customized my terminal to a very good extend but lately I have
been more into trying to do some shell scripts to fasten my workflow. Like
pushing, Committing, minifying and/or compiling my [Sass](http://sass-lang.com/)
code. I wanted to output some colored messages in the terminal but I didn't like
my limited color pallet in the terminal (Red, Green, Yellow, Cyan, White, Black,
etc..) I wanted different color hues &amp; some fancy stuff.

So I searched for this if it's possible <del> &amp; I found
[this](https://github.com/robbyrussell/oh-my-zsh/issues/1101) for ZSH &amp;
iterm2, another search for "Spectrum" &amp; I found
[this function](https://github.com/robbyrussell/oh-my-zsh/blob/master/lib/spectrum.zsh#L22)</del>
Actually, it turned out that the spectrum function is already in
[ohmyzsh](https://github.com/robbyrussell/oh-my-zsh/blob/master/lib/spectrum.zsh#L23)
. Drop this function inside your `.zshrc` file then call `spectrum_ls` in the
terminal &amp; boom! watch the magic.

<img
  src="/img/zsh-colors.png"
  alt="zsh-colors"
  className="aligncenter size-full wp-image-891"
/>

Now all you need to is to reference the color code outputted like so `$FG[000]`
in your ZSH theme, just replace "000" with the color code "000" is black btw
&amp; you are good to go! for example in create a new ZSH theme &amp; try this
`PROMPT='$FG[154]%~%{$reset_color%} '`.

I hope someone can find this useful, I didn't know about it before &amp; I'm
really in love with the terminal.


Ahmed El Gabri

Articles