CSS Grid, Front-end development, front-end development tips and tricks

Why CSS Grid Should Be In Your Front-End Development Toolbox

I recently had the privilege of taking Wes Bos’ free course on CSS Grid (thanks, Mozilla!). If you’re a front-end developer, this is a must take course. At first, I was a little skeptical about CSS Grid given how much I love Flexbox. Additionally, I wasn’t seeing support for Android’s default browser when I’d checked it before, but according to caniuse.com at the time of this post, Grid has 86.59% browser support and Android is now golden.

While CSS Grid is not as supported as Flexbox, it pretty much has similiar support for the vast majority of our target audience. Opera Mini is the main browser that has no support for Grid. According to Rad Devon, most Opera Mini users are in Africa for users with incredibly low data plans (think 10 MB per month). So it feels pretty safe to me, when it comes to the clients we’re working with, to view CSS Grid as a viable option.

I primarily work in the WordPress realm, so I’m constantly dealing with themes and child themes. I was especially encouraged by Wes’ full bleed episode which feels very applicable to doing some really neat layouts especially with dynamic content that a user is populating on their pages or posts. Full Bleed layouts in the past were either a nightmare to make with all sorts of wrappers, or very hacky with negative margin. With CSS Grid we can quickly and easily allow for full content while having the majority of the layout support the optimal text length.

Continue Reading

Zao WordPress web development, Zao WordPress team, WordPress web development, WordPress web developers,

Zao: A Look Back at 2017

Last year, we celebrated a huge 2016 with excitement and anticipation for what the future would bring.

We’re happy and humbled to report that 2017 didn’t disappoint. We added a Project Manager to our team, we posted some rad content, worked on some incredible projects, and learned a lot along the way.

Here are the highlights of what went down in Zao’s 2017:

Continue Reading

using quickbooks in WordPress, WordPress plugins, WordPress Quickbooks plugin,

Quickbooks and WooCommerce: It Was Only a Matter of Time

At Zao, one of our passions is building modular tools that solve client problems, and (our favorite part) releasing them to the public.

We were tasked with integrating QuickBooks Online with WooCommerce for one of our super rad clients, Brooklyn Tweed. Specifically, Brooklyn Tweed needed to be able to create QuickBooks invoices every time a manual wholesale order is generated (sidenote: If you’re familiar with WooCommerce, you know there is no such thing as a manual wholesale order [yet], but stay tuned for a future blog post and plugin release).

Naturally, the first step was to look for a WooCommerce/QuickBooks plugin. It might surprise you, as it did me, to find that there is not much available. Sure, there are a few SAAS options available, but nothing looked quite plug and play for what our client needed and wanted.

Continue Reading

troubleshooting print stylesheets, troubleshooting in CSS, troubleshooting CSS, CSS tutorials, CSS print stylesheet tutorials, WordPress tutorials

How to Troubleshoot Print Style Sheets: Common Problems and Solutions

If any of you have played around with a print style style sheet on a complex theme or site you might already be familiar with the fact that print CSS does not always operate the way you would expect or desire. If you have not yet experienced the familiar urge to ram your head through your computer screen, I hope to save you from that experience with a few tips and tricks I picked up while learning to troubleshoot print style sheets.

Before we jump in, I want to ensure you’ve got some useful tools right off the bat to help set you up for success.

What you need

First, make sure you’re working on a browser that allows you to turn on a print emulator. This will make troubleshooting go a lot faster. However, be forewarned, while the print emulator shows the elements you will be printing and their style sheet rules, it does not necessarily visually represent perfectly what the printed page will actually look like. Frequently check your changes by either printing or viewing/downloading them as a PDF to confirm you’re getting the desired results. You will be sorely disappointed to get things pixel perfect in an emulator only to discover the printed result is vastly different.

Additionally, make sure your browser’s print scale is set to 100%. While you don’t have control over what your users will do with their browsers, there is a good chance many users won’t have changed their browser print settings. Therefore, you want to save yourself any headaches where you think you’ve developed correctly only to discover that you had been in the wrong scale.

how to troubleshoot print style sheets, printing style sheets in WordPress, printing style sheets from WordPress, working in CSS, CSS troubleshooting, CSS tutorials

I pretty much exclusively develop on Chrome and then check on other browsers to ensure things are working as desired. This Stack Overflow will show you how to turn on Chrome’s print emulator in various different chrome versions. Google “Print Emulator [browser name]” if you prefer to work in something besides Chrome.

Below is a list of issues I have commonly faced and some solutions that rectified them. I hope they can save you time and hours of googling or shooting in the dark.

Continue Reading

Using the WooCommerce API with wp-api.js

As of WordPress 4.7, we’ve had a really fantastic, fully featured REST API in WordPress. It is relatively well-known that the infrastructure for the API was introduced in WordPress 4.4, with the content endpoints being introduced in 4.7.

What is somewhat less well-known is that 4.7 also shipped with a Backbone.js client you can use to interface with the core API.  It’s super simple to enqueue:

wp_enqueue_script( 'wp-api' );

Using it for core objects is pretty straight-forward:

var post - new wp.api.models.Post( { id : 2 } );
post.fetch();
alert( post.attributes.title.rendered ); // Renders "rendered" title of post.

But what if you want to use it with non-core objects that are in custom namespaces, or maybe not even on your own site? Thinking that you’ll probably have to write some PHP, maybe your own library or framework for interfacing with these, and your own JS models? Ugh, amirite?

Good news! None of that is necessary.

Continue Reading

learning JavaScript, building a game with JavaScript, how to learn JavaScript, practice JavaScript

Learning JavaScript Through Game Building: Let’s Play Yahtzee!

Recently, I shared some of my thoughts about what I wish I had known when I first started developing. The time came to take some of my own advice and put it into practice. I’m trying to level up my front-end developer skills, and I needed to improve upon my JavaScript skills. I signed up for a free trial at Treehouse and jumped into learning JavaScript.

Right off the bat, I was super encouraged. Professionally, I haven’t done anything in JavaScript. We have experts on our team and they handle our JavaScript work. Yet when I stepped into the courses, I was surprised by how much I knew. I found myself pausing the tutorials, working ahead to execute what I knew they were about to show me, and then let them confirm that I did things correctly. This was a huge affirmation to me that even though I had not been actively learning this language, broadening my foundation paid off and I was a lot faster, more accurate, and more understanding of the material than I expected.

The course starts with the JavaScript basics. My abilities were beyond that, so I could have opted to skip ahead, but I didn’t (and I’m glad). There were a few holes in my understanding that were filled in while refreshing the basics. I was able to race through the introductory courses, but still glean some valuable context.

The learning was good, but I knew that without practice it wouldn’t stick like I wanted it to. I needed to marinate in it. Therefore, I decided to build something with JavaScript that would really put my skills to the test. Recently, I got back into the game of Yahztee. It’s nice to play when you’re waiting in line or for an appointment. Ironically, the Treehouse tutorials had us build a random number generator based off a die. The connection of the two inspired me to build my own Yahtzee game.

Continue Reading

WordPress tutorials, CMB2 tutorials, CMB2 meta fields, CMB2 how to, CMB2 WordPress plugin,

How to Save a Backslash (\) to CMB2 Meta Fields

Recently, we had a user request that their backslashes be preserved when saving their CMB2 fields. Typically, when a user wants non-standard sanitization, our canned response is to use the provided field parameter sanitization override, 'sanitization_cb'. If you’re not aware of this field parameter (and it’s cousin, 'escape_cb'), let me explain a bit.

By default, CMB2 does quite a bit of heavy-lifting for you when it comes to sanitizing your users’ input, as well as escaping that value for proper display. This is just one of the aspects of CMB2 that I appreciate; that I don’t have to “think” about the sanitization/escaping of my fields.

“It just works.”

Except, of course, when it doesn’t.

Continue Reading

Zao Mock API: A WordPress Plugin for Testing API Responses

Right now, REST API usage is at an all-time high, especially now that WordPress, which powers 27% of the web, has its own REST API. And it makes absolute sense. There are so many great services and data sources in the world wide web, and there has been a need for those sites/services to “talk” to each other for almost as long as the web has been a thing. REST APIs have long been a subject we are passionate about at Zao.

If you’re not familiar with REST APIs, I recommend doing some reading, and bookmark this article (and plugin) for later.

Continue Reading

Zao Adopts Asset Queue Manager on background of WordPress code image

Zao Adopts Asset Queue Manager

You’ve already heard our good news about CMB2…but wait, there’s more! We recently adopted Asset Queue Manager, a WordPress plugin that allows experienced front-end performance engineers to take control over the scripts and styles enqueued on their site(s).

About Asset Queue Manager

AQM is a well-liked and regarded plugin built by a developer from the UK named Nate Wright.

When plugins are bad citizens, they enqueue their assets everywhere on the front-end, which means their style sheets and JavaScript files are loaded everywhere, regardless of where they need to be. AQM allows you to manage whether or not those assets are actually enqueued. It’s a fantastic tool based on a great idea, and it has a really cool UI.

Continue Reading