How I built a website editor In 6 Days
Last month I made a challenge to myself, develop a proof of concept in 6 days of a visual web editor browser extension I call Tweak.
Hi, my name is Ilmi
I’m a web developer who resides currently in Germany, but originally I’m from Finland, yep the one in the north. I have been making games, comics and apps for myself since I was a kid, but only recently started sharing them with others.
The Problem
Like most ideas, Tweak started with a very clear problem. Develop a landing page quickly for a side project that I am working on (no not Tweak, another one) called crewspace.io.
With some time on Google, I came across Instapage and I felt instantly in love with it (no pun intended)!
Instapage allowed me to design my page visually on the browser. I have never been the one to use dedicated design software like Sketch . Except from a period when I used Photoshop with Dreamweaver to create websites…dark times that should be forgotten.
Despite all my love for Instapage there was two problems I faced:
- Instapage doesn’t make it easy to add your own custom code and you have to pay extra for it.
- The pricing is a bit too high for me….cause hey, I’m a student with only a part time job!
I needed the visual editor aspect of Instapage with the option of having your own underlying HTML, CSS and JavaScript.
Then an idea emerged.
Build a browser extension in 6 days
For me jumping from an idea to building something has never been hard. However where I face difficulty is with managing my time and having a deadline.
Why 6 days? Because of the limited time I have (I work part time, study in university and oh yeah work on another side project…no pressure).
Another reason was that recently I learned an important lesson when a proof of concept I made in 2 days made more impact than an MVP I had been building for 6 months!
Because of my other side project I have been working with browser extensions lately. I was attracted to the idea of making a page editable with a click, and with browser extension this was achievable.
Page Structure
One of the key aspects of the editor was to be able to position the elements with click and drag. This meant the elements had to be absolutely positioned relative to their parent.
Absolute positioning elements! What about responsiveness and all that!
Responsiveness is not the goal. The goal is to have a page that fits most devices, responsiveness is just one way of doing that.
I made a simple structure that tweak editing relies on:
- Section
- Inner section
- Component
I am going to be honest this structure was directly inspired by Instapage. I had no time to come up with a complete new structure so I remade one that was already proven.
Section
Section represents a 100% width row in a page, the page is built of sections stacked on top of each other. Each section can have it’s own background colour.
Inner section
Inner section is a child of section. It has the maximum width of 960px and is the container of components. On hand held devices inner section is 100%, any component outside it’s width borders on the mobile view is not drawn on the screen.
Component
Component is the containing div of elements that can be positioned using Tweak. Component is absolutely positioned relative to inner section. Component can contain any HTML element (p, div, span, h1, h2, h3, etc).
Generated code
Next step was code generation, mainly CSS generation. The HTML generation is very straight forward as I make a copy of the current state of the DOM.
The CSS was a bit more tricky, as the user manipulates the coordinates and dimensions of the components in both desktop and mobile view. The answer was a cache that kept track of all coordinates and dimensions of elements in both desktop and mobile view.
When the user is finished with their changes a CSS file is generated out of this cache and the declaration is appended into the generated HTML file.
Six days later
After six days Tweak was coming along very well. I had a basic tool that had the following features:
- Make your page visually editable with a click
- Define your own page specific library of elements and sections
- Design mobile layout view
- Export the changes as HTML file and CSS file of all the edited element attributes
Limitations
There was quickly some browser limitations I ran into, which was mainly having no access to local files. Because of this the changes have to be downloaded with Tweak instead of having a simple save button that would save the changes (Update: currently this limitation is solved with Tweak server).
Next step validate the idea
Building proof of concept was the easy part. Next step was for me to validate if this tool is actually usable to people. After showing it to some web developer friends of mine, they saw also the potential value of the tool.
I created a landing page and video for Tweak, the landing page was done with Tweak of course! Tweak beta is out now with these additional features:
- Save changes
- Live reload (for CSS files)
- Templates (more coming monthly)
You guessed it right, this is me validating the idea.
The pricing is currently 14$ one time payment and have life time access with updates. Why 14$? Well because I need to eat :D. But no worries, get started with 30 days free trial!
Is Tweak something you would use? Got some feedback you want to give me? You think the idea sucks balls and I should not waste my time on it? Think it’s cool and want to get it now? If so follow the link to the landing page!.
Oh yeah if you are this far would appreciate a heart and maybe a follow, if you are not too busy!
