Become a Copy-Coder! Creating WordPress Websites With Avocode

Hi @Mic_Sumner. Thanks for sharing! In return, we’d like to give your readers a 10% discount promo code. Feel free to put it on your website. To use the discount, enter "micsumner-10-off" at checkout. This works for any plan and both yearly and monthly subscriptions. – Juraj

— Avocode (@avocode) October 17, 2018

But honestly, using the Avocode app does wonders if you would like to get all the design elements onto a website within the shortest amount of time as possible.

8 Things That Avocode Can Help With

Avocode comes with unique selling points that make it a lot better than XD, Photoshop, and Sketch. You can already start drooling with #1:

1. Copying repetitive CSS code (works for SCSS too to input $variables)
2. Quickly measuring distance between 2 elements
3. Exporting and automatically optimising/compressing images at the same time
4. Immediately exporting assets (images, SVG, etc.) into your /images/ folder
5. Assigning SCSS variables to your copy-codes
6. All the tools you’ll need to compose a design onto a website
7. Versioning design documents (so you can switch between design documents handed over to you)
8. Collaborative comments between the developer and the designer (e.g. asking if an image can have a transparent background to it)

1. Copying Repetitive CSS Code

The time saved having to type the code may not make much of a difference. But if you speak of a human having to (a) figure out the code, (b) type out the code with fast typing skills, (c) rinse and repeat; you can easily see how a person can easily get burnt out from what is now a 1-click utility.

2. Quickly Measuring Distance Between Two Elements

These are easily doable in other design apps like Photoshop and XD, so it is great that Avocode gets to carry across the functionality of measuring distances between elements.

As a bonus tip to this measuring, the measurement will still show up if you switch windows to your text editor / IDE. Meaning that if you have 2 monitors: 1 for avocode, and 1 for the text editor; and you switch to your text editor, you will see on Avocode (the inactive window) that it still has the measurement in case you might’ve forgotten to type in that margin-top: 93px.

3. Exporting and Automatically Optimising Images at the Same Time

Avocode does an okay job of automatically optimising images, but I would recommend TinyPNG.com’s image compression if that is what you’re looking for.

The difference is that TinyPNG.com (which also does TinyJPG) find more room for optimisation by close to 35-50% compression upon briefly testing 20 images.

As for SVG, you will want to keep with the SVG tools you know and love, like the SVGOMG tool.

4. Immediately Exporting Assets (Images, SVG, Etc.) Into Your /images/ Folder

What used to work was saving the images somewhere like saving the first image and drilling down the folders to your theme’s /images/ folder, and hoping that the next thing you save on your computer will not be in another folder.

Avocode subtly lets you select where to save the images you export as a given, thus eliminating the hassle of remembering an operating system’s recent destination folder.

5. Assigning SCSS Variables to Your Copy-Codes

Whilst you are copying the CSS code you will notice that the color: #fff properties can make room for CSS pre-processor variables like SCSS $variable: #fff.

If that’s the case, you will be able to assign $variable within your property so that the code now reads as color: $variable. Make sure that you declare your $variable as #fff too.

6. All the Tools You’ll Need

Avocode has got the Hand tool, Move tool, Ruler tool, Eye-dropper tool, and the Slice tool. And the rest of its magic comes from copying over code and sizing (it can also copy top and left and position: absolute codes if you’d like).

7. Versioning Design Documents

If during your development phase that your designer might have updated the design, you will be able to quickly add it to your collection of designs, and quickly refer to a previous version for example without fussing on storage folder names.

Having to not need to rename a folder with different versions already is great within itself! Same thing for your designer not having to name versions.

8. Collaborative Comments Between the Developer and the Designer

And if you might have reached a point in developing your custom theme that it becomes difficult for you to work with a raster image’s background in white (because it might have to be used in a dark mode version of the site), you will have to communicate this specific image back to your designer.

Fortunately, you don’t have to point it out by hand or through a telephone call. But instead, simply pin a comment onto that point on the screen, and switch your Avocode workspace into the Comment mode.

Takeaway

Avocode definitely is a great tool that you must try out. See if it might help speed up your development time, and at the same time keep up the flow in your web development, as well as reduce the loss of focus in having to deal with menial tasks.

The tool comes with a 14-day free trial. But 1-day will be more than enough to let you see the benefits it provides for theme development!