![]() Aside from the usual responsive techniques, I had to watch the window size and adjust the tab position when the screen becomes too narrow. I don’t think many developers really code on phones, but I wanted this to work on mobile devices anyway. The center has a logo shamelessly plugging my own service. The right side of the status bar has a “Clear” and “Clean + Copy” button. The Dark Mode UI is based on a toggle that updates the styles.Īt the bottom, I created a status bar that shows live stats about the code including the current mode, indentation settings, number of lines, number of characters, and document size in bytes. Instead of wasting space with instructions, I used a placeholder that disappears when you start typing. The editor itself takes up most of the screen, but it blends in so you don’t really notice it. I knew I wanted the code editor to be the main focus of the tool, so I created a thin menu bar at the top that controls the mode (i.e. ![]() The next day, I took a break from my usual routine to turn it into a something real. I was immediately inspired after drawing the wireframe. I kicked off the design process by hand-drawing wireframes for the app. There’s just something about pencil and paper that makes the design part of my brain work better than staring at a screen. I wanted a simple tool that worked well without the hassle, so last week I grabbed some paper and started sketching one out. The idea isn’t unique, but every time I use someone else’s tool, I find myself reapplying the same settings and dodging advertisements every single time. I’d been thinking about building a new code beautifier for a while. The whole project took less than two days to complete. The next day, I decided to turn it into a real tool. I recently drew up a wireframe for a code beautifier.
0 Comments
Leave a Reply. |