Neat Rapid PHP Workflow/Window Arrangement

Discuss general web development questions. Help others and get help from others.

Moderator: kfury77

Neat Rapid PHP Workflow/Window Arrangement

Postby midipixel » Tue Feb 01, 2022 3:43 am

Hello all,

I've been using a certain window layout on Rapid PHP for a number of years, and I feel it really unleashes the hidden super powers of the included Chrome Preview. I'm very productive working this way, as it allows me to stay inside Rapid PHP instead of having another Chrome window open. Because I assume it's not ultra intuitive to use the software this way, I decided to share so some of you may benefit from it! Here's how I organize my panels:

(Open the window at a new tab for a full preview, or you won't get the full picture)

Image

The left side is pretty standard, with the open files and side panel. You should use your prefered setup here. The right side is where the trick is. Instead of using the native V-Split Preview, I create my own, by opening a new dummy empty file, setting it to "preview" and docking it to the right side of the screen. I then point it to my Live Reload server instead of "Generate Preview File". I also use "Inspect Element" to open the Chrome Inspector and then keep it docked to the left side of the preview panel. In this screenshot, you can notice that this is a perfect setup to work in the mobile aspect ratio. There's also a trick to work with higher viewport sizes on small monitors such as mine, where I'll work on a zoomed out view of the website. It's not perfect, but it works. Afterwards, I can make adjustments on Chrome.

What are the advantages of working this way?

1) Live Reload servers are far better than the "Generate Preview File" option, since they'll reload the website when you update any relevant file, whereas the preview panel only watches the HTML file itself. This means you can comfortably edit CSS files and watch the preview pane beautifully reload as you go. I know it requires an external server, but odds are you're using it anyway, unless you've been living under a rock.

2) Being able to tweak values in the Chrome Inspector and having it directly beside you own CSS file is just phenomenal. What's more, with the recent CEF update, you can debug grid and flexbox super fast and adjust your CSS accordingly.

3) I don't to well with dual-monitor setups, so this setup has also allowed me to work pretty well on a single monitor.

What are the disadvantages?

1) I have to repeat this process everytime I start Rapid PHP, since it doesn't save the Window Panel Layout.
2) The included CEF Preview doesn't allow the Device Toolbar. I don't really know why.
3) Blumentals only updates the CEF Preview (and thus, the Chrome version) on major updates. So you'll be always lagging behind the real deal.

Well, that's it. I hope this setup inspires somebody out there. As much as I love Rapid PHP and have been using it for more than a decade, it lacks some of Visual Studio Code niceties. However, the possibility to work with this setup alone keeps me as a loyal user. AFAIK, no other IDE allows me to work this way. And I've tried a boatload of them!
User avatar
midipixel
 
Posts: 31
Joined: Mon Jun 09, 2008 6:33 am

Re: Neat Rapid PHP Workflow/Window Arrangement

Postby pety » Fri Apr 22, 2022 5:33 am

It looks great ! Thanks for sharing it !
pety
 
Posts: 187
Joined: Fri Mar 02, 2012 7:17 pm


Return to Web Developer Talk

Who is online

Users browsing this forum: No registered users and 14 guests

cron