The first time that you sync your files with Google Drive can be a doozy. This is especially true if you are a web developer or graphic designer who likely has tons of smaller files nested within your shared folder. While each file, may upload quickly the system has to check each individual file for changes and then upload them individually, which really slows down the upload process.
A quick intro to Google Drive (solution not in video)
The Solution
Exit out of Google Drive on your local computer if it is running; you will re-enable it once the files are in their proper locations. Then, group your files into separate zip files and then upload them to your drive manually before you start the syncing process. For example, I zip my files in my WAMP directory one website or app at a time. This helps to consolidate things like giant JavaScript libraries while maintaining an easy-to-organize file structure.
Unzip!
Once the files upload, simply unzip them right in the Google Drive online interface. To unzip files, you just need to add an app that can process zip files. Don’t want to have to deal with this? Learn what is the best cloud storage for business.
Add an app to Google Drive
Click the + symbol in the upper left corner and then go to More > Connect More Apps. Then choose an app like Zip Extractor, or another app that has good reviews. Once you add the app and grant permissions, you will then be able to right click on zip files and extract them right in your browser.
Reorganize the files
Make sure to move the zipped files into their proper locations within your Google Drive folder so that the system can match them up with your local files. The end goal is to have matching files and folders in both your local and remote Google Drive folders before you tell it to sync. Then, turn on Google Sync and let it match things up! In my tests, this reduced the sync time by over 50%, but keep in mind that this works best if you have a large number of small files, as most website developers, application developers and graphic designers do.
About Valier
Valier (pronounced “Va-leer”) is a boutique graphic design and website development studio focused on creating unique projects for unique clients. We work with companies and individuals that are pushing the boundaries within their industry and are looking for a partner in media development that can inject life and creativity into their marketing presence. With over 10 years of experience in the graphic design and website development industries, Merritt Lentz (Founder), has a proven track record of producing successful and innovative projects for a wide variety of clients ranging from artists and ski companies to government agencies and payment processing companies. Regardless of the size or complexity of your vision, we will help you hone in on a digital actualization of that vision and deliver a product that is rich and captivating.
Creating the ideal local development environment is a key component of being an efficient developer, but it sometimes takes a bit of trial and error to create the website development environment that works best for you. One important component of this is finding a way to share files between your various dev stations so that you can quickly switch computers and pick up where you left off. For me, I prefer WAMP and Google Drive as my current weapons of choice. This may change over time, as it has many times before, but for now the following important tasks are accomplished with this workflow:
I can develop a website quickly without having to deal with FTP uploads
I can utilize popular tools like an SCSS preprocessor and Chrome Dev Tools to quickly see code changes persisted into the browser
All of the files that I want to share between machines are shared, and the files that I don’t want to sync are left alone
I am able to accomplish this with minimal additional cost as Google Drive includes ample storage with my existing plan
Step 1: Install WAMP
The first step, if you haven’t done this already, is to set up WAMP on your local machine: http://www.wampserver.com. I won’t cover how to install WAMP in this article as it is really straightforward and there is sufficient documentation on their website.
Step 2: Install Google Drive – Google Backup and Sync
Note that you will have to pick a storage plan that fits your storage needs. I am getting by on the 30gb plan that comes with my Google account. Here is the current location for this bad boy: https://www.google.com/drive/download/
During the installation process, you will be asked whether you want to backup folders from your Desktop (I chose not to) and whether you want to “Sync My Drive to this Computer.” The difference here is that My Drive is a special folder that is used for syncing files between multiple devices and the cloud, while the “Desktop” option will only backup your selected files to the cloud. For the purposes of this demo, you will want to choose to sync My Drive. You can also choose to just sync certain folders in your My Drive, which is recommended as it will help you organize your dev files from your standard shared files.
Step 3: Configure WAMP to use the Google Drive for syncing
Now that you have both apps up and running, its time for the fun part:
Go into your WAMP directory (for me I chose to install WAMP directly in my C: drive), click on the “www” folder, and then CTRL+C to copy it.
Navigate to your Google Drive folder. This is your My Drive folder that was set up by Google Drive during the installation process.
Paste the “www” folder in this directory, or in a subdirectory if you prefer to add an extra layer or two of organization.
Go back to your WAMP directory and go to bin\mysql\mysql5.7.24. Copy the “data” folder
Navigate back to the Google Drive folder where you pasted the “www” directory, and paste your “data” folder there.
Start WAMP, click on the tray icon, then go to Apache > httpd.conf to open it in a text editor:
Replace DocumentRoot and Directory variables to point to your new “www” location. In my case, these are on line 263 and 264:
Save that sucker, then open up your httd-vhosts.conf file using the same method as you used to open the httpd.conf file. As you can see in the screenshot above, they are right next to each other in the WAMP tray menu.
Replace DocumentRoot and Directory variables to point to your new “www” location. In my case, these are on line 6 and 7:
In this screenshot, you can see an example where the “www” folder has been nested inside a “Sync” folder. You can place this file wherever you want really. The important part is to make sure that you replace the variables with YOUR www directory location.
SWEET! Now WAMP is set up to look for your files in the Google Drive directory. Now lets get it set up to look for your databases there as well. Open up your my.ini file from the WAMP tray icon:
Replace the datadir variable to point to your new “data” location. In my case, this is on line 47:
Save that file, then restart all WAMP services. That’s it! Your done! Well…kinda. You still need to test it out. You could create a simple test.html file in your new www folder and then navigate to it in a browser. In my case, the URL for the test file would be: localhost/test.html
Syncing with other computers
So now you have one computer that shares its key WAMP folders with the cloud. To also have access to these on another computer, you need to follow the exact same steps as the steps above on each computer. The only difference is that your directory for the “www” and “data” folders will likely be unique for each computer.
Parting notes
When I was setting this up, I ran into a small issue – my file permissions prevented Windows from starting Apache and MySQL. To fix this, you just need to navigate to your Google Drive folder, right click, go to “Properties > Security > Advanced > Enable inheritance.” This process may take a while depending on how many files are in your My Drive folder, but it should fix the permissions issue.
About Valier
Valier (pronounced “Va-leer”) is a boutique graphic design and website development studio focused on creating unique projects for unique clients. We work with companies and individuals that are pushing the boundaries within their industry and are looking for a partner in media development that can inject life and creativity into their marketing presence. With over 10 years of experience in the graphic design and website development industries, Merritt Lentz (Founder), has a proven track record of producing successful and innovative projects for a wide variety of clients ranging from artists and ski companies to government agencies and payment processing companies. Regardless of the size or complexity of your vision, we will help you hone in on a digital actualization of that vision and deliver a product that is rich and captivating.
WordPress has gone through a number of changes over the course of its life cycle. I know of at least one major developer who even considers WordPress to be a legacy application – meaning that it has passed beyond the the peak of its life cycle. From a popularity standpoint I’d say that’s pretty debatable considering the number of sites out there that are using WordPress. However, what they are referring to is just the overall architecture of the WordPress platform and how it compares to some of the new(er) kids on the block.
React app development, for example, has really taken the development world by storm, and in many cases, slower PHP based applications are being phased out in a lot of cases for JavaScript applications. There are pros and cons to either language, but what is important to keep in mind is that WordPress will still continue to have a place in as a marketing tool for years to come. It’s just that popular. Because of this, the demand for WordPress development will keep a lot of developers very busy coding WordPress themes and plugins. So how do we take a 10 year old PHP platform and modernize it using modern libraries like React?
Enter Gutenberg
The biggest change in the WordPress website development world is the implementation of Gutenberg as part of the WordPress core. Gutenberg basically allows WordPress to function as a block editor by replacing the popular but now somewhat dated feeling WYSIWYG editor. The Gutenberg block editor is both great and frustrating to use at times, but it does represent a major milestone in the life cycle of the WordPress platform. Most importantly, it indicates that WordPress is adapting and growing. Guess what Gutenberg is built off of? React. Want to build a new Gutenberg block for your WordPress site? You are going to have to dig into some React development.
Gutenberg offers a number of advantages in terms of being able to organize content in a way that is efficient and consistent. Take the YouTube Gutenberg block for example: in the past you would copy and paste the embed code from YouTube and style the resulting iFrame if necessary. These days? Simply add a new block, select “YouTube” from the list of available blocks, and add the video ID. The best part is that if you then want to move the video to a new place on the page, you can click and drag the block to a new location.
Hey look its a Gutenberg block with a video about Gutenberg blocks. That’s some “Inception” shit right there.
Update your WordPress site and start using Gutenberg
At Valier, pride ourselves in being able to deliver highly customized WordPress packages to our clients. Lately, we’ve been focusing on creating custom blocks for the Gutenberg Editor to give our clients even greater control over how their WordPress site performs, looks and functions. If your WordPress site launched before Gutenberg was released, then there are likely a number features that you are missing out on.
We design, develop, and manage WordPress sites for clients located all over the globe. If you are looking to modernize your WordPress site and start taking advantage of the Gutenberg block editor, get in touch with Valier.
