If you decide you want to commit a project you have hosted on your machine into BitBucket and you’re using Sourcetree to manage it, you’ll find that there is no straightforward way to do that. When you try to create a new Repo inside Sourcetree, it demands that the project starts in a new, empty folder. There is no option to setup a new repo from existing files. This means it’s actually stupidly impossible to commit existing project files into a fresh repository in one smooth operation.
People have posted alternative ways of getting around this but the simplest way to do it goes like this:
Create a repo inside BitBucket
Create a new folder on your machine which will act as a placeholder
In SourceTree go through the new repository dialogs and link it to the repo on Bitbucket and the folder you created in step 2.
After completing step 3 there will be a .git folder in your placeholder folder, move it to where you actual project files exist
SourceTree will automatically figure out that the folder was moved, you can delete this bookmark
Re-add the project by dragging the folder containing your project files and .git folder into SourceTree
Now you can commit your files into BitBucket from SourceTree
It’s the easiest way because it takes advantage of the fact that .git folders can be easily moved without messing things up in SourceTree.
Writing code examples inside the WordPress editor is a lousy experience with most plugins. Most of them involve writing down shortcodes, using clunky input dialogs and messing with spacing because tab functionality doesn’t work properly. Syntax highlighter implementations also tend to be onerous, they are often clunky and bloaty and load too much stuff. In fact I was so fed up with existing plugins that I stopped posting code tutorials on this site.
Ever since Tinymce got updated to the v4+ branch new things have become possible with the editor. One of the coolest things is the ability to live preview shortcode output right inside the (visual) editor, as well as easily adding a graphical user interface for these shortcodes. It is an order of magnitude more user-friendly. I don’t think any of the existing code plugins have jumped on board the live-preview train yet, so I decided to implement a solution myself.
I made some nice progress with a plugin I have dubbed ‘Code Shower’. Below is a sneak peak.
here’s an example of how a (css) code snippet looks on the front-end:
And here is a screenshot of how it looks inside the familiar WordPress post editor:
This shows the live preview inside the WordPress editor displaying my css code snippet
And below is what the graphical interface looks like when inserting a new code snippet. It still needs some polish, but it should give you an idea.
This is a pop dialog that shows when adding or editing a code snippet inside the editor.
There is still some work to do. Right now I am testing the plugin and it does have a dependency on a commercial plugin I’ve developed called Super Content Widget Pro. I’m probably going to make a it free for customers of Super Content Widget Pro, but we’ll see. Would you be interested in a plugin like this? Let me know.
So this is an issue I have from time to time and it had me dumbfounded. I would lose a handful of windows of programs I had open and running. The usual trick to retrieving lost windows, or windows that have gone ‘off’ screen is to try one of these:
hit alt + tab, click the program thumbnail to select it, then use a keyboard shortcut to move it back on screen
hit windows + left arrow key or windows + right arrow key will move a window from left to right. Pressing this repeatedly will move this across screens in a multi-monitor setup
hit windows + d to show all windows, or windows + shift + m to restore windows
right click the windows taskbar and choose one of the windows display options from the menu
This wasn’t working for me because the application windows in question weren’t being recognized. If you check the task manager (navigate to it with control + alt + del) and you see the program in question running in the processes tab, your program is in fact still running. Then you can try this:
If you do any kind of development on WordPress, you probably are using localhost to develop on your local machine. It’s noticeably faster than working with a live server, especially while working in the Admin screens of WordPress. For this reason, many people will be familiar with the oh so fun process of setting up local sites and moving sites to live servers. Well in this post I’m going to cover a product that makes local development a much more productive and efficient experience.
The process of setting up a local site for development and moving changes up to an online server is a tedious, painful, needlessly time consuming process. Just setting up a fresh WordPress site on your amp stack is annoying as it involves having to create a database manually, making changes to some configuration files, updating the hosts file and then running the WordPress installation. I was pleased to find a tool that automates all these tasks and it happened to be a tool that is perfect for WordPress development.
Enter DesktopServer
DesktopServer is a brilliant piece of software that is essentially a regular server stack that you will be used to if you have used WAMP, LAMP, XAMPP, MAMP or Uniserver. It actually is packaged with XAMPP Lite, the lite version of XAMPP. The real magic however comes from the logic they’ve included to work with XAMPP Lite. It comes with some powerful automation tools that make it very easy to create, import and export sites and do development on WordPress sites using popular tools.
Turning 10 minutes into less than a 1 minute
Setting up a locally hosted WordPress site in a snapNow manually setting up a local site on your own machine isn’t terribly difficult once you know all the different steps, but it is a pain. If you’re used to something like Cpanel, which makes installing WordPress really easy, it feels even more annoying to have to manually create a database, configure a virtual host, adjust your hosts file and run through the installer. It can take a good 5-10 minutes if you know exactly what you are doing.
With DesktopServer you can painlessly create a new local site through a simple UI in a matter of seconds. It does all the configuration for you. That in itself is worth jumping for joy, but that’s only a start.
Quickly installing a preconfigured WordPress setup
DesktopServer uses a blueprint model for creating WordPress installations. In that blueprint you can preconfigure WordPress to install with certain plugins and themes. You can even auto-import settings. This is just awesome stuff and saves so much time having to install sets of plugins manually.
Quick Deploy a local site to a live server
A recently improved feature in DesktopServer Premium called quick deploy lets you upload a WordPress site complete with files and database directly to any server that supports Filesystem Direct (supported by many hosts). The resulting magic is facilitated through a plugin that you install on the destination site (you need to have WordPress pre-installed, a fresh install is fine). This is a really nice feature that cuts out a bunch of steps you would otherwise have to perform.
Migrating or moving a site is not a fun task and can be quite challenging. This built in solution let’s you do things at the push of a button while taking advantage of DesktopServer’s automatic scrubbing, so you don’t need to worry about fixing URLs after moving a site online.
Mobile Development options
Another great feature provided by DesktopServer solves the tricky issue of testing local sites on mobile devices. Through Lan sharing (which makes use of the computers IP address on the network), you can make a local site accessible on your mobile phones and tablets. The only caveat here seems to be that you can only share a single site at a time. While I haven’t given it a test turn yet, it also looks like you can make a site available to the web so that people outside your network can view your development site. This feature also uses an IP address which viewers will have to know to access the site. (Side note: I’ve previously covered some other ways to share local sites)
My concerns, squashed
I had a number of concerns prior to trying DesktopServer Premium and I figured I’d write it up in Q&A form.
I want to run a local site that has an extension other than .dev, is that possible?
No problem as it turns out. As you’re really running XAMPP lite, you can manage your own virtual host mappings as you see fit along side any .dev site DesktopServer creates. Setting up non .dev sites can be done manually like you would normally on any AMP setup. I use pagekite to host a private site straight from my computer and I was able to do so without any conflicts. Perfect! The only downer is that DesktopServer only manages and installs .dev sites through its GUI as far as I can tell.
Will it mess with my custom hosts file?
Got a hosts file that you’ve customized with a certain configuration? You won’t have to worry about DesktopServer overwriting anything. It’s smart enough to manage it’s own additions within the file without touching any pre-existing mappings in the file.
Does it automatically adjust hardcoded site urls when migrating?
One of the beautiful things about DesktopServer is that you don’t have to run any kind of find and replace scripts when you move a site to a different domain. It will do it for you and it even will search your php, css and js files so you’re covered all around.
Minor Niggles
My first month of using DesktopServer was largely positive, I did note a few minor things I’d love to see work their way into an upcoming release.
Live Deploy Progress Indicator
This is what happened when my hosting server failed during quick deploy. My Starcraft honed APM came in good hand closing all these alert boxes.
The live deploy feature is missing an informative progress indicator. As deploying can take a long time and it is co-dependent on whatever hosting you are using, it would be great to know what it is actually doing or where it is slowing down. Deploying to a live site can be unnerving experience. In my tests I did notice things do take quite long to transfer, but this is very much dependent on the hosting provider and the server’s upload speeds. If you happen to run into a problem during the transfer process, you might have a bit of a problem on your hands.
During one of my tests my (shared) hosting happened to crash, which left me with an incomplete install and a white screen. Of course, no matter what method you use, any migration process won’t fare well under those conditions, but it’s useful to have some kind of indication in case the connection does go wrong. If you’re uploading up a large site, it’s even more important.
One PHP version
DesktopServer ships with the most common PHP/Mysql configuration seen in the wild. If you want to test different versions of PHP, you’re out of luck as DesktopServer doesn’t let you do this out of the box. That would be a fantastic feature to add in the future.
Unmentioned goodness
DesktopServer plays very nicely with a host of other common developers tools, such as Dreamweaver, Xdebug, Coda 2, PHP Storm and popular backup utilities such as Backup Buddy, Duplicator and Infinite WP. So far I have only tested Duplicator, a fantastic free backup plugin and that worked very smoothly indeed.
It’s also worth noting that DesktopServer is not just for WordPress stuff. You can use DesktopServer to create non-WordPress sites for all your other site development and testing purposes
Bottom Line
If you are building WordPress themes/plugins or developing entire sites or applications on WordPress, this software should be part of your tool kit. It’s amazing to me how long this product has been around and I hadn’t really discovered it until recently. More people should be spreading the word.
* Note *
This review was written after using DesktopServer version 3.5 for about a month (I managed to get a review copy). I wasn’t paid to do this review and I do not have any financial ties to Virtuosoft, the company behind of DesktopServer.
If you are developing sites on your own machine, you probably have run into a situation where you wanted to share what you’re working on with another person. Or, you want to test your locally hosted site on another device, say a mobile phone.
Most web developers will develop locally because it’s a lot faster and convenient. But there is one major pain point: you’re stuck looking at the site from just that machine. That is, unless you somehow expose the locally hosted site through the network. And there are quite a few ways to do this, with each having it’s own pros and cons. I felt it worthwhile to post my research into the various different ways to accomplish this.
Accesssing local sites via IP addresses
The most direct way to share your local site with your LAN is to simply work with IP Addresses. In many cases locally hosted sites have urls such as ‘http://local.mydevelopmentsite.com’. The local part refers to a site hosted on the machine itself, so this address will only work on the machine the site is running on. Alternatively though, you can reference your local site through an ip address – such as http://192.168.1.9/mydevelopmentsite/ – and make the necessary configurations so that you can type in that IP address and browse the site from another computer on the network.
This solution is simple enough and it works. It’s a great solution if you want to just test a site over your LAN. The downside is you have to use ugly ip addresses. Setting up multiple sites is a pain, as you have to screw around with multiple ip addresses or work with subfolders. It doesn’t work out of the box outside your LAN, so if you want to share a site with a client or friend, you need something else. Also, if the IP address changes, it’s an even greater pain (You would have to make sure your router and devices get a fixed ip address instead of appointing these dynamically). Keep in mind that if you’re working on a WordPress site, you’ll have to make the changes in the settings table of your database every time the domain name changes.
DesktopServer
This is a software product primarily aimed at WordPress developers. It makes setting up local WordPress sites ridiculously easy, taking out the pain of going through much of the configuration manually. It also has a neat feature which automates the process of making your sites accessible over your Lan (not over the internet). I believe it works with the ip address of your local machine, much like is mentioned above (except this software automates most of the setup). I haven’t tested this software myself yet, so I can’t really vouch for it yet. But if it does indeed use ip addresses, the same caveats apply as listed above. Also, I’m not sure if you can set up multiple sites or just one.
Turning a pc into a server
You can use your computer as a server and make your local site available to the rest of the internet. The Lamp/Wamp/Xamp/Mamp stacks are all capable of making your sites public.The benefit here is that you can share your site outside of your network, but you still have to deal with ugly ip addresses, which may change due to your internet service provider. It also makes your computer a bigger target to hacking attacks.
Of course, lots of programmers have their own dedicated servers running at home for private use. You could easily convert an unused pc as a dedicated server. These things are a little more complex and you generally really need to know what you’re doing to keep things secure. And let’s be honest, maintaining a server is not on top of everybody’s wish list.
Dynamic DNS
DNS is a system that does true magic: it converts human friendly domain names into the actual numeric addresses that computer networks understand. The web relies on DNS to convert domains names into addresses. Some routers may let you setup Dynamic DNS just for your own local network, allowing you to appoint domain names for the addresses on your network. This is great because these only work within your network and people outside your network won’t be able to access the domain names successfully.
You can also use a service such is provided by DYN. They let you setup domain names for your local sites, or any device you want to make accessible for that matter. That way, you (and anyone else) can access those sites from anywhere, even from other locations. The heavy lifting DYN does is making sure your domain names resolve to your sites ip address from anywhere in the world. Because the IP may change quite frequently, you have to update it with the DNS to keep it working. That’s a tricky thing, but easily solved with DYN. A software client is downloaded to your device that will monitor for any IP changes and correct the settings with the DNS setup automatically. As you might have guessed, this isn’t a free service, but it isn’t expensive either at $29.95/year.
Localtunnel
Localtunnel is a free service sponsored by Twilio which lets you share localhost over the web. It’s a pretty straightforward affair: you install LocalTunnel on your homeserver and set up subdomain under localtunnel.com (for example: mytestsite.localtunnel.com). Your local site can then become accessible through that subdomain. It’s really simple and it’s free. So what’s the caveat? There are three potential drawbacks. First, you’re stuck with localtunnel as the root domain. Second, you need to be able to install Localtunnel on your home server and your stack might not be able to run it amicably alongside your apache/php/mysql setup. And third, you have to rely on Localtunnel and the people administering it, which might not make it suitable for every use case. While there is no reason to mistrust the good folks, there are no guarantees of uptime and security for a free service like that.
Note: There are other services that operate just like Localtunnel, many of these are paid services. They all work pretty much the same. You can even run Localtunnel yourself as it’s open source.
Tonido plug
Tonido plug is a plug computer, which is effectively a little server that you can hook up to a hard drive. It’s a really tiny device that draws little power. Tonido is geared toward providing your own private cloud, making your files accessible to your other devices as well as perhaps your friends, family or colleagues. The device comes with a server stack that is compatible with say, WordPress sites, with a bit of configuration. What this means is that you can have a very low cost server running 24/7 for your local sites. Really, I see this as the holy grail if it weren’t for the configuration that is needed. Right now installing something like WordPress alongside Tonido’s own cloud software looks non-trivial and there are no guides available. If only they would make creating local sites as easy as a click of a button. That would be sweet indeed.
Other Plug Computers
Tonido is not the only plug computer in the game, in fact there are quite a number of them, many which are cheaper to boot. But these other plugs require more setup steps to get everything running and you have to figure this all out on your own as they don’t come pre-loaded with all the right things installed and configured.
Pagekite
Pagekite is a service run by an Icelandic company. They are somewhat similar to Localtunnel, except the setup is even easier and you don’t have to worry about compatibility issues with your server stack. The process involves installing python (if your system doesn’t have it already) and running their python script. You need an account with their site to set up your ‘kites’, aka your local sites. You can set up any number of these using subdomains off of the pagekite.net root domain. They support SSL connections which is good for security and privacy, but as Pagekite is the middleman, you have to implicitly trust them (no reason not to though as they are a privacy/security conscious group). Pricing is good also, you can get a free trial and pay a pretty low fee anywhere from $4/month and upwards after the trial finishes.
Syncing
If all your site’s local assets are static, syncing your site’s files is actually pretty easy to do. You could even use something like dropbox to keep folders in sync and let other devices run the site from that folder. If you are using a local database, it’s technically possible, but not really advisable if the site is very active as you could easily create conflicts while storing data in the database.
Portable
There are portable versions of many AMP stacks available that let you install your server on a thumbdrive, which you can then load up on any computer you please. Sharing your sites can then be as easy as sharing your thumb drive. It’s very handy for developers on the go. This solution doesn’t scale well obviously and it doesn’t get around the use case of testing sites on mobiles, but for some situations it’s the easiest and simplest solution.
Please build this product
While there are plenty of methods to sharing local sites online, it could be a lot easier. I would love to see a plug computer which is optimized for the task of making local sites accessible across your local network or over the internet. It can be done with today’s plug computers, but it’s a solution that involves a lot of configuration steps. And a setup that is so easy that regular consumers could use would open up the door to new kinds of applications that could compete with today’s ubiquitous cloud based services.
Update 30/10/2013: A new way to share your WordPress site
A few months ago I came across the ArkOS initiative. It’s a linux based operating system targeted toward plug devices such as the Raspberry Pi. One of the coolest things about it is that it comes with a WordPress installer straight from their interface, which makes setting up WordPress sites on a plug computer super easy. I’ll be giving this a go in few months.
Stylesheet files can get ridiculously long. The Twenty Eleven theme has over 2500 lines of css (unminified). That can be a pain if you’re trying to make significant adjustments to a theme. Quite a few theme frameworks take a more modular approach to css and separate their CSS into different files. That is a big improvement, but it does come at a cost. The more files you import, the more requests you’re making to the server. Secondly, persons who have to work with the CSS now need to figure out what files contain what style specifications. Thirdly, the built-in editor in the administration screen is not that user-friendly when you have to hunt down specific files instead of editing the basic style.css file.
I use the LESS language these days which makes CSS management heaps easier. You can have multiple less files and you can generate a single css file from those files. The question now becomes: what’s a good way to organize the less files?
There are quite a few different ways to organize your CSS logically and the problem here is that you can easily run into overlap situations. Do you put your CSS targeted for small screens in a separate file, or do put them in the file that targets those specific elements? If we have a file dedicated to structure as well as for different content elements, from widgets, to post-formats, how do we make the separations? If you have CSS for your images, do you include them with the file that handles galleries, or do you put them in the file that addresses media elements. These are just a few examples.
So far, I haven’t come up with a system that has perfect clarity. I don’t think it’s possible. The conclusion I’ve come to is that you have to do what’s most in alignment with your workflow. If you have to figure out what file to make an adjustment, there should be no more than 2 obvious candidates to choose from, and they should be obvious. If I want to make an alignment adjustment to a widget area for tablet screens, I don’t want to have to check a widgets file, a structure file, an alignments file and a responsive file.
I’ve been taking advantage of the LESSphp library to get around some of these file organization dilemmas. You can drop in your media queries like you would do a mixin. That way you can keep all the CSS relating to a group of elements organized in one logical area. There is one downside at the moment: the output isn’t perfect yet since it can cause your CSS to contain a lot of redundant data (similar media query statements aren’t grouped automatically into a single media query). I’m working on a css post-processor (the Flawless Styles Compiler plugin) to fix this and make the output cleaner and lighter in general.
Here’s my current file organization setup for those that are interested:
variables.less
mixins.less
reset.less
structure.less
typography.less
general.less
navigation.less
header-area.less
footer-area.less
page-templates.less
post-formats.less
media-elements.less (images, video, audio etc)
form-elements.less (input elements, search box, contact forms etc)
ui-elements.less (button’s etc)
sliders.less
gallery.less
comments.less
states.less
print.less
widgets.less
misc.less
Potential tweaks to this organization? I’m thinking further separation of individual page templates and post formats. Post types can fall into either page template or post format category but it might make sense to have a dedicated file for post types as well.
LESS and convenient file organization make things a lot easier. But I want managing a site’s design to be even easier and this is why I’m building a plugin called ‘Flawless Styles Compiler’ which will take CSS development for WordPress to a whole new level.
Google Chrome is the most popular browser on the desktop at the moment, but is it the best? I was a reasonably early adopter of Chrome and fell in love with its speed. Nowadays I don’t use Chrome at all. What happened?
When I first started using Chrome, the things I loved that set it apart from the rest was a feeling of greater responsiveness, a fantastic web developer tool which felt quicker and lighter than firebug on firefox and last but not least: the ability to drag singular windows and create new tabs. Back in the day, there was an experimental feature called side tabs, which let you have your tabs in a vertical listing. This feature was dropped and has still yet to make its way back in (don’t hold your breath). That was and is a major annoyance, but not the biggest.
There are two main reasons I stopped using Chrome. For one, it’s too tightly integrated into Google. I consider that a bad thing. Over the years Google’s products have crept into almost everything I do online. With every new product it takes a bigger piece of the pie of my personal data (and of others). When Chrome started becoming a bit too integrated with Google’s other services I took it as the right timing to start reducing my footprint. Giving Chrome the boot was a good place to start, which brings me to reason number 2:
There are better browsers than Chrome. While Chrome once appeared to lead the pack in terms of speed, which is a huge factor, other vendors have caught up. Even Internet Explorer has decent performance in version 9 and 10. But, the real contenders that are on par with Chrome are Opera, Firefox and… drumroll please…Comodo Dragon. Comodo what you say? Comodo Dragon.
Most people have used Firefox at one point or another. It has a reputation for being a memory hog and updating the browser was a pain compared to Chrome. Right now, version 16 (now in Beta) has finally got a silent updates feature, which means there’s no more nagging for updates and users will be more likely to have the latest and best version running at all times. That’s fantastic. Firefox also closed a longstanding memory leak issue, which makes it a lot lighter to run. They have also introduced a nice set of unique web developer tools, such as the 3d view, a new command line interface and Responsive Design View. Of course, you get vertical tabs enabled with an addon, which is a huge productivity booster if you’re like me and are regularly running several dozens of tabs.
Opera is another interesting player. They have a small market share in terms of percentages, but it still equates to millions of desktop users using on the desktop (their mobile browser has a much greater share of the market though). Opera has always been one of the most innovating browsers that has been copied. Separate Tabs, sidebar tabs, sessions…these features all started life in Opera first. Opera Desktop still is a very good browser, it’s fast, and to my mind it is probably the stablest browser when running a gigantic number of tabs. It has a fast boot up time as well. There are a few issues working against Opera’s favor. Some websites don’t offer proper Opera support and you’ll often find that Firefox and Chrome support newly developing web standards earlier than Opera will. As a web developer, that is a bit of detractor.
Comodo Dragon is hardly known, but it runs the same stuff Chrome does: Chromium, which is the open source machinery driving Chrome. Comodo Dragon is essentially Chrome without Google’s hands in every corner. Comodo the company is a marketleader in internet security and it comes to no surprise that their browser offering offers a multitude of security and privacy perks. If those are things you value (and they should) and you like Chrome, Comodo Dragon is a significant upgrade. An upgrade with no downsides as far as I can see.
Right now Comodo Dragon is my main browser, but with FireFox 16 I find myself falling back in love with Mozilla’s product. What’s your favorite browser, and why?
