Little blog post about how I created Thememaker.site opensourced on github.

On 11 January 2017 Telegram launched a new update for his desktop app, and one of the biggest changes was the custom themes support. The second day I created the github repository and on 13 january the version 0.01 was working.

The Idea

I tried to actually create a theme myself but the way it had to be done was slow and hard. you actually have to type the colors of all the 300+ variables in hexadecimal. 🤦 Nope, it was too much for me.

I'm a lazy person and unless the thing I'm doing is very interesting, like coding, I easily get bored. Then I searched for a easier way. There Wasn't. That's how The idea of a theme maker was born.

What I knew and What I didn't

  • It wasn't the first time I was trying to work with files creation, previously I've tryed to mass create a lot of files for a file based quotes site. naturally I didn't finished it, but that project helped me to understand the hard points of file creation in php.
  • I worked with forms and get requests previously, so it was easier to get the data from the php posts and elaborate it.
  • I knew almost nothing about user input sanitization, an I discovered it was important for the theme name field. 've been really scared when two days after thememaker.site launch I found theme folders in root folder.
  • I didn't knew how to create a download page for the files.
  • I didn't knew hot to zip compress a folder and rename it lately.

The hardest part: theme model

Before starting to really code this project I had a great problem, How o create the theme model? I thought about different things, which can be simplified in two possibilities:

  1. Writing all 500+ colors by hand
  2. Creating it using some kind of program.

I decided to try the second one. (I'm a lazy person remember?) Fortunately Atom.io came to my rescue, thanks to his find and replace function which supports regex! So using some tries on http://regexr.com/ site I successfully transformed a telegram desktop theme into a php String containing the php array values in the color places here's some photos to explain it. That's the Original Theme which I used to crate the model That's the array I created That's the model of the theme with spaces for the variables created from the previuos theme That's the complete or expert mode model which allows you to change all 300+ colors.

How it works, some technical stuff

After creating the theme model and arrays, I created a html page from where to chose the 5 or 7 colours for the simple version. ( I first created a simple version with only 5 or 7 colours to change, and after some time I created a complete version) The html page with inputs of type="color" which almost all browser support. This form send the data via a POST request to the php page which,

  1. collects the POST input
  2. assign each colour to his variable
  3. takes the model
  4. write the model on the file (colours are automatically inserted because of the $variables names in the theme)
  5. create a zip archive, and add colours.tdesktop-theme to it, (later II introduced also backgrounds support)
  6. provide the html page with link to the download page. Why the download.php page? I wanted to hide the location of the themes on the server.

Security problems.

I encountered some security problems during the http://thememaker.site life, the biggest was the "path injection" inside the theme name form. I became aware of it when I found a theme folder in the root folder of my server. I tryied to turn to stackoverflow.com for help but instead of helping they downvoted me, and i finally found the answer by myself (Sorry for this part but I had a bad experience with asking questions on that site) To solve that Problem I found that this simple piece of code works perfectly.

    $theme_name = str_replace("/", "_badyou_", $_GET["name"]);

I simply exchange any "/" to "badyou" in the theme name so that the new theme name is safe. Here's an example of how ../../../bin/importantfile is stored on my site. The image contains only the last 30 minutes themes. I periodically clean it to reduce space occupation.

What I learned form this Project?

I learned a lot from this project but here's the most important things.

  • I learned that you need to protect yourself and your project from user inputs.
  • I definitely know more about file creation and how to handle difficult things like zip compression.
  • I know more about http requests. I never used them before that project. That's very useful for some bots i recently created for telegram.
  • I learnt how to use markdown and how to manage a github repository
  • I learnt how to create php desktop applications!

Some numbers about the this project

I'm going to close this article with some interesting (or not) data about site traffic. During this almost 9 months of life for the project the http://thememaker.site/ received 69,570 Page views The most used operating system are:

OSPages views %Hits %
Windows50.1 %52.3 %
Linux35.7 %33.9 %
Macintosh6.4 %5.1 %
Ios4 %2.8 %

The Most used browsers are

BrowsersPages ViewedPercentHitsPercent
Google Chrome1,14866.6%4,47672.1 %
Firefox24113.9 %92014.8 %
Opera1166.7 %3084.9 %
Safari905.2 %2443.9 %
Mozilla633.6 %641 %

p.s. my mother language is Romanian, so I find difficult to write in english. if you find some errors please tell me in the comment section.

Profile picture

Andrei-Daniel Petrica

WebDeveloper

I'm Daniel a 20 years old geek
I've been garanted a Google Udacity Scholarship, I love to experiment new things,and here I'll write about some of my experiences
I'm studying computer sciences in Modena, Italy
I'm developing some projects like ThemeMaker.site, and some telegram bots
like: @cexiobot