• My Top 3 Sublime Text Themes

    Sublime Text offers, beside numerous plugins, a lot of themes, to customize the editor as you wish. These are my top3 favorite themes for Sublime Text 3.

    Top 1: Cobalt 2

    For me, this is the far best theme for Sublime Text. Beautiful colors which help you, capture the source code fast. The sidebar icons are really beautiful and are making it easy to determine file types pretty fast. The hightlight color is a rich yellow, a great color for the ui to focus fast.

    By the way: There are also Cobalt 2 themes for Alfred and iTerm!

    Get the theme

    Top 2: PreDawn

    I used PreDawn a long time, until I a stumbled upon Cobalt 2. The highlight color is a bright orange. The colors are chosen very well and make it easy to scan the code. Unfortunately the last version I used did not have a lot of sidebar icons.

    Pro: There are a lot configuration parameters to customize that theme, like preferences for things like tab sizes.

    Get the theme

    Top 3: Spacegray

    Spacegray is, as the name may say, not that colorful as the other two. But the color choice is great, too. The theme as two modes you can choose from, dark and light. Unfortunately there are no sidebar icons. But beside that it is clear and good to use.

    Get the theme

    Hint, hint

    If you just want to try a theme and don't want to download it for that purpose, you should have a look at ColorSublime. The plugin works like the package manager. The great thing is, you can browse through the theme list in sublime and see a live theme preview with your current code open.

    Get the plugin

    All images are from the repositories of the themes

    Read full post
  • Making websites printable

    In Germany there is that cheeky term „Internetausdrucker“ - internet printer - which is particularly addressed to politicians. But shouldn't we take care of those printing people?

    That's exactly what I thought about, when I was looking at my site some time ago. To be honest, I did not care if my page is looking good when printed. So I just tried it and had a look at the print preview.

    It did not look very well. Many elements of the page, which are unimportant for print, would have been printed. For example the sidebar or the comments.

    Hide unimportant stuff

    So I decided to create a print stylesheet and started hiding all the things which are not usefull on a print. That's the sidebar, the comments and the navigation. The print view should be the raw text only.
    As a foundation for my new css, I used my css for the mobile breakpoint which reduces the site to a minimal view. And I additionally hided the navigation.

    To add a stylesheet for printing, you just need to add something like this within :

    <link href="print.css" rel="stylesheet" media="print">

    Fonts

    Looking at the raw text, I immediately saw, I had to reduce the font size. So I set it to 12pt and added some paddings and margins.

    Links on the page

    You cannot print links. I could add the full links at the bottom of each article and everybody who is printing my text could type them in, if needed. But that is no good solution.
    So what if somebody takes a look at the printed article some days after printing (or gives the text to a friend) and wants to visit a link?

    Finaly QR codes have a right to exist!

    In print view I add a QR code below every article. So if someone prints one of my articles, he/she/it just needs to scan the code and will be redirected to the original post.

    To create the QR code, I use a JavaScript library, which just needs an URL and (in my case) a size of the code-image.

    Opinions?

    I am curious what you think about that topic. Did you optimize you website for printing? Tell me in the comments or send me a message on twitter.

    Read full post
  • Create a changelog automatically

    If you provide source code, may it be as an application or as an open source tool, you might want to ship a changelog with it. Using git and gruntjs, makes it easy to create such a changelog fast and automatically.

    We don't want to care about the creation of a changelog by our own. We better invest that time to develop our tools. Because of that, we need a simple bashscript, which does the work for us. Thanks to git, such a script is written easily.

    Getting the last changes

    To get the last changes on my code, I use:

    git log

    As you can see, the output is pretty extensive. We do not need so many details. So we'll limit the output a bit, by shrinking the format:

    git log --format="  * %s"

    Now the output is just the message with a * as prefix:

    * switched to grunt

    Limit the output even more

    Our changelog should only include the most important commit messages, not every commit is interessesting enough to make its way into our changelog. So, at first, we'll get rid of the merge messages:

    git log --format="  * %s" --no-merges

    Now we just want to see really relevant commits. To do so, we need a syntax for our commit messages. Some tools like Stash or GitHub come with such a predefined syntax. You can point to issues or stories by using hashtags, like so:

    ISSUE-123 "https://maurice-renck.de/en/tags/tag:resolve">\#resolve nasty IE Bug
    STORY-456 "https://maurice-renck.de/en/tags/tag:close">\#close do those fancy css-transitions

    Of course eventually you can define the syntax. But it is important every collaborator knows and uses it. So, now we know our syntax we can use it to limit the output even more:

    git log --format="  * %s" --no-merges --grep=#resolve --grep=#close

    This way we'll only see commit messages including one of the tags. You can, of course, define more or less tags, if you want to.

    Limit the time period

    Okay, we do have our output as we want to, only the most important messages will be shown. But there still is way too much output, right? We also want to limit the period of time:

    git log --since="2 Weeks" --format="  * %s" --no-merges --grep=#resolve --grep=#close

    Now we'll get the most important commit messages of the last two weeks. Good, isn't it? But not good enough. We do not want a fixed period. What we need, are all changes since the last creation of our changelog.

    For that, we need to know when we created the changelog the last time. You could also use release-tags as an idicator, if you're working with those. We'll use the date of the changelog file. We'll start creating an empty one:

    touch changelog.txt

    Now we can read the modification date of the file and format it the way we need, to get it work with git log:

    ls -l changelog.txt | awk '{print $6,  $7}'
    > 16 Sep

    The date output can vary a bit according to the system you use, but in most cases, you'll be fine with that.

    Getting the authors

    What would our changelog be without the authors of the code? I'll be honest, I didn't find a solution I like a hundert percent, yet. I use the following for now:

    git log --format='-- %aN' | sort -u 

    This way we get all the names and remove doublicates.

    Getting the version number

    Now let's have some fun. We also want a version number to be part of our changelog. I use the version number set in my package.json, which I use with grunt:

    {
      "name": "Mein Beispiel",
      "version": "1.2.3",
    }

    So, somehow we need to read that version number. I use a function I found here(https://gist.github.com/cjus/1047794). I modified it a bit, so I only get the values not the keys as output.

    Combining everything

    So we limited our commits to a certain subset and we can determine the date of our last changelog-creation, so we can use that date as starting point.

    If you want to, you can modifiy the script for your needs. But I think it's a good foundation and creates a nice, usable changelog. You can run that script with a git hook or in a build job, so you'll get a fresh new changelog all the time.

    You can find the script in my repository on GitHub.

    Read full post
  • Time tracking for Developers

    If you are a developer, you should use some sort of time tracking, especially when you are a freelancer. Tracking your time can help you improve your workflow and calculate realistic proposals.

    Why I track my time

    If I want to plan my time realisticly, I need a kind of measurement. Not only when I want to write a proposal, this relates to all aspects of my work. After all, as a developer, I am responsible for getting my work done, even if two jobs are running parallel.
    For that I need to know how long certain tasks take. This, of course, varies a bit from time to time. But I need at least a clue. In addition, I want to know, where I lose time. That is why I track things which are not directly related to my work. For example, when I read an article or have a look at my twitter-timeline.
    So, at the end of the day, I do have a pretty good overview of how productive I have been and can optimize things if applicable.
    Beyond that, I can see repetitions, which I then can bundle or maybe even automate.

    My problem with time tracking

    Actually one can summarize this briefly: Staying tuned.
    Missed to turn on tracking in the morning? Then it is not worth to turn it on now. Don't behave like this. It's a trap!
    Another problem is, not every mac-application has a mobile app, too. So I have to insert the data afterwards (i.e. when I was at a customers office).
    It is also difficult to determine how detailed to track. Should I track every single Task? Or groups of tasks? It's a decision I do case by case. And sometimes it's really hard to decide.

    What software to use?

    I tried several application. Starting with a simple textfile, where I wrote down, when I started and ended tasks. In principle I can say: the more time I have to invest in time tracking, the more unlikely I will continue to use it.
    I used Timings for a long time, and I liked it very much, especially after the last major update. Recently I use Tyme, because I really like the statistics (and that's what it is all about for me).

    Both application share one disadvantage: I must activly tell them, what I do. That's not very difficult, both apps are easily accessable via the menubar. But why not make even more easy?

    WakaTime

    Some time ago, I found WakaTime and I really liked the idea. WakaTime integrates itself in your editor (for example sublime text) and tracks everything you do there. It dertermines programming languages, filenames and project titles. And whenever you use your editor, WakaTime tracks your time. So at the end of the day, you have really good statistic of what you were working on.

    Disadvantages

    You must keep in mind, that all that information is sent to the WakaTime Servers. Filenames, project titles, programming languages etc. Make yourself clear, that this data may make it possible to draw conclusions on what you are working on for what client. And that this may collide with a NDA!
    Another disadvantage is, as a developer you also answer e-mails, work in the terminal etc. All that won't be tracked.

    Conclusion

    WakaTime is a nice idea, but it just tracks a small amount of my workday. If you really want to improve your tracking and your work, you should use a "classical" approach of time tracking.

    Links

    Timings
    Tyme
    Mite
    WakaTime
    Timely
    Timecamp

    Read full post
  • Individualize the Bash

    If you work a lot in the BaSh, you will appreciate the ability to create own preferences and shortcuts. Those will make the terminal an even more powerful tool.

    You can edit you personal settings of the Bash in one of two files (depending on your system) within your home-directory. The .bashrc or the .bash_profile. The leading dot means the files are hidden. To show hidden files, you to tell ls to show all files:

    cd ~
    ls -a

    The first line changes into your home-directory (in most cases you can also just type cd). The second line shows all files, including hidden ones.

    You can edit the Bash-profile-file in every texteditor you like.

    Alias

    An alias is a kind of shortcut. With an alias you can create your own bash-commands. Let's start with a simple example: Imagine you want to show all files in a directory as a list over and over. You would then enter the following:

    ls -lah

    ls to list, -l to get a detailed list, -a to also show hidden files, -h to show the information in a human readable format. Of course you could enter this command alle the time, but also could create an alias.

    You are free to add you alias-definition anywhere in the bash-profile-file. I prefer to add them on top. So, let's create our alias by adding the following line:

    alias ll='ls -lah'

    That's it. We just created the alias ll which will execute our special ls-command we used above.

    Don't worry, if you saved your bash-profile but the alias isn't working. The .bashrc or the .bash_profile are only parsed once when your login-session is initialized. So you have to quit your terminal-application and start it again or, if you are working directly on the console, you have to logout an -in again.

    Hint I don't know if this works on every system, but you may also use the reset command to initalize a new session.

    You can now add as many alias-definitions as you like. Everything you can do in the bash can be an alias. But watch out! Avoid using alias-names which may already be bash-commands to avoid trouble.

    Git-alias

    By the way. If you are working git a lot in your terminal, you can define special git-alias, too! You can read here, how it works and what to do.

    Individualize the bash-prompt

    You can upgrade your bash-prompt with a lot of usefull information. I prefer a minimalistic approach. Especially on my desktop-computer. I am always logged in a the same user and I don't need the hostname to be shown all the time. So I modified my bash-prompt to look like so:

    It only shows the current directory I am in. Let's change the directory to make it a bit more visual:

    I am in the directory _PROJECTS. As you can see only the current directory is shown not the whole path. That's because I want my prompt to be as short as possible.
    Because I am working a lot with git, I extended the prompt to show the actual branch as soon as I am in a git repository:

    You can individualize you prompt, by adding (in my case) the following line to the bottom of you bash-profile-file:

    PS1="\[\033[1;33m\]\W\[\033[0m\] \[\033[1;32m\]\[\$(git_prompt_info)\]\[\033[0m\]$ "

    To get the git-part up and running, you need to add a special function to your bash-profile. Btw. there is a nice webtool to create your own prompt.

    Search your bash-history

    If you want to look for already used commands you can easily do so by hitting ctrl+R and start typing the command. You will then get suggestions based on already used commands. If you like the search through the history chronologically you can use this snippet.

    More ideas?

    You have some more ideas or hints on how to make your bash-life more comfortable? Post a comment or ping me on twitter.

    Read full post