marko krstić

Scripts Organizer – The most Advanced Code Editor for WordPress

My Role: Product Owner, Art direction, Build a maintained design system, Front end development.

Platform: WordPress

Production Year: 2021

Results: Developers workflow reinvented. Build application to change how developers work. Bypass FTP syncing and speed up process by working directly on the website without need of localhost.

Current problem

At the moment developers and designers are still working in localhost. Create staging website. Pull database to sync. Then push changes to the server to present it it to the client. Pull database to sync. Merge Staging to Live. Work again.

Not try to introduce two more developers.

Solution with Scripts Organizer

With Scripts Organizer everything is easier. We are using Native WordPress post approach. You can Clone Live to Stage. Developers login and write code same as any other content. Everyone can see live changes and current status. No need to pull, push, merge branches.

Key Features

Same as any other post editing you will see if someone else is currently editing. That will solve duplicated work.

Application supports all needed languages for WordPress. HTML inject, PHP, JS and SCSS (CSS)

For running code with best performance there is option to send code to the header or footer.

To keep structure organized you can split SCSS into partials. That will make maintenance easier and several developers can work on one task.

Every code block can be triggered on the entire website or you can use conditions to target specific post or pages.

No need to refresh browser to see code change. There is preview inside code editor that will refresh changes on every save.

Themes

Most of the devs prefer dark mode as it's easier to look it on the longer run.

But there are people who don't see well and need bigger contrast. Once you are in the code editor that is a button to toggle theme.

Focus

Code settings and toolbars can be distraction. You can focus on what is important by toggling "Focus Mode" and hide everything except:

Short product walkthrough that was recorded for version 3.0

We added more features in version 3.1 and 3.2 that is currently in alpha

Let's Connect

Feel free to reach out for collaborations or just a friendly hello 😀
mailme@markokrstic.com
linkedininstagramdribbblefacebook-official