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

WordPress web development, WordPress eCommerce development, WordPress plugin development, hire a WordPress developer

Getting to Know Zao: Our Front-End Developer, Liz Karaffa

One of the cornerstones of how Zao works is the way we prioritize collaboration. We build long-term partnerships with our clients, rather than acting as one-off vendors. We’re invested in their success, and build technology that lays a foundation for them to meet their business goals.

Since we work so closely with our clients, we thought it important that you know who we are. Here’s the third part of a series introducing our team, featuring our front-end developer, Liz Karaffa.

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

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

A sign saying thank you

The Importance of Generosity and Gratitude in Business

There are billions of books, articles, journals, and thoughts about how to run a successful business and be the most profitable. Search “run a good business” in Google and you get 441,000,000 hits. Clearly, a lot of people have a lot to say about this, yet there isn’t enough time in a lifespan to cover it all.

While I’m by no means an expert in the business realm, I’m a small business employee and I have a tangible experience and perspective in the job market. So, naturally, I do have my own two cents on the subject. Generosity and gratitude can have one of the most profound effects on your business, beyond what is easily measurable.

Continue Reading

Zao, learning to code, WordPress developers, WordPress ecommerce, learn to build WordPress, learning to build in WordPress, learning WordPress, how to use WordPress

Five Things I Wish Someone Told Me When I Learned to Code

I haven’t been in the software development industry for loads of time, but thanks to some amazing people who championed my growth, I slingshotted in quicker than some other peers who did it all on their own. (Props to you individuals, by the way, that wrestled it all out by yourself–you are unstoppable!)

After thinking a bit about my experience I came up with five things I wish I had known when I started developing:

1. It’s 100% normal to feel like you’re drowning

I stumbled my way into coding; it initially started as a hobby.

At first, everything was bite-sized and easy. I was blissfully unaware of how little I knew. Once that bubble popped, my lack of knowledge was overwhelming. Everywhere I turned there was something I could not do.

I remember the first time I tried poking around in the Codex. I ran away thirty seconds later because it all seemed like Greek! I literally did not have the capacity or supporting framework to “get it.” I wish I had known in advance how often it would feel like drowning and that it was fine.

2. Just Keep Learning, Just Keep Learning

Go after all the low hanging fruit that you can. It might seem like a waste of time to spread yourself so wide, but if you are truly a newbie and have no context for the developing world, the wider you go, the wider your foundation will be. Although you won’t be fully aware of it at the time, you’ll fill in the gaps of your understanding so you can level up.

When I felt like I was drowning, I continued to chip away at the pieces I could master and walked away from the pieces that made no sense to me. It paid off in the long run.

You can only handle so much drowning before you give up. By moving on, I kept my overload threshold in the green and experienced small wins that boosted my confidence.

Every so often, I would return to the Codex and give it a go again. When it still wasn’t useful for me, I moved on. I remember the day I was working on something, jumped around several Codex pages…and realized it made sense to me. Suddenly, the Codex was in my toolbox. By expanding my understanding in other areas, I built a framework that allowed me to tackle the previously impassable problems.

I wish I had given myself the permission earlier on to move on when it suited me. While there is a satisfaction to mastering something, I have found the field to be so wide, deep, and complex that it is rare to master something the first go around. Spending all your resources to come out utterly defeated is more costly than saying, “I don’t get it, so I’m going to move on to something else and return to it another time.”

It changed my experience from perpetually drowning to recognizing that I need to play in the wading pool a bit longer.

Note: This should go without saying, but don’t put yourself in a situation where you have committed to do something that is beyond your abilities for a client…because then, you don’t have the permission to walk away from it.

3. Hone in on your trusted sources

The internet is amazing and Google a robust resource, but not all of the resources out there are reliable.

As helpful as Stack Overflow is, quality control is not always a guarantee. Many of the solutions provided are hacks, instead of the industry standard approach to the problem. When you’re starting out, it’s hard to know who you should and shouldn’t listen to. It’s imperative to find good sources that you can soak up. This might require reaching out to experts in the business and find out who they trust.

My introduction to coding started with a free online coding tutorial resource. It was great for the most basic things. However, the further I got down the rabbit hole, I discovered that some of what they were teaching was completely wrong. Fortunately, friends who are professional developers pointed me to some credible resources.

It is hard to unlearn something foundational if you learned it wrong the first time. You only have so much time and you can spend eternity reading about all the different approaches.  Find approaches you can build on so it’s not considered time wasted later.

Team Treehouse proved to be an invaluable resource for me. They are trustworthy and they are actually good at teaching–a huge bonus because not all developers are good at breaking down what is natural for them into bite sized pieces for newbies.

4. After you learn it, build it

I cannot tell you how often I’d go through a tutorial and think to myself, “This makes complete sense. I get it!”

I followed with the tutorial and find myself at the end with the desired product. Ta-da! I learned it, right?

More times then I can count, I noticed that stepping away for the weekend would be enough for me to completely forget it. I found that after completing a tutorial, it was really helpful to go through and build the entire project again without the tutorial.

That was the real test of what I had actually learned, versus what I was regurgitating. It is great to follow along with a tutorial, but that’s only the first level. You need to practice it several times before you get it. The more you build it, the more muscle memory you create.

I wish I rebuilt the same things over and over instead of moving on to the next skill before mastering what I initially focused on.

One final point on building: going through other people’s tutorials is a great way to gain knowledge. However, reproducing something that already exists does not activate your creative thinking.

I discovered if I tried to implement a skill in a different context than the tutorial, I understood the steps to build one specific solution, but didn’t always grasp the concept in its entirety and how it could be applied to different situations. After you master a project on your own without the tutorial, try it again but with a different outcome as the goal. This will keep the skill pliable for you.

5. Get excited about pet projects

One of my biggest struggles when learning to code was that I had no idea what to build on my own. I desperately wanted to practice and try things out, but I had zero idea where to start.

As I mentioned earlier, you can only drown for so long before you give up. The antidote to this is passion. If you are really passionate about what you are building, you will have more endurance to push forward when the going gets tough.

Additionally, the great things about pet projects is that they are often side projects. You probably have other pressing matters that need attending, and so your project will get put on the back burner. This is fantastic!

When you return to it you will see your work through the eyes of a new developer. You will learn first hand the importance of commenting because you’ll probably have forgotten about why you did some of what you did and what all the moving pieces do.

As you improve your skills, you’ll find that when you return to your old work, you’ll be embarrassed by some of your approaches. The upside: you’ll have an opportunity to practice refactoring. These skills are super important and less painful to learn on your own project then in a group project where you’re impacting your peers and clients.


I wish I had known all of this sooner.  What about you? What things do you wish your baby developer self knew?

working remotely, why should i have a remote team, why remote teams work, benefits of remote teams, why working on a remote team is better for the company, why remote work is good for companies, is remote work good for companies,

Small Teams Thrive by Working Remotely

One of nicest perks about being in the tech industry is the ability for employees/contractors to work remotely.

Obviously, if you own a brick and mortar store, you cannot have your employees work remotely because someone needs to stock the inventory, someone needs to manage the till, and someone needs to ensure the employees are getting their breaks.

However, when your product is virtual, the necessity to have all employees come to a physical location to perform their duties is nonessential. As a remote developer, you can literally work anywhere in the world…so long as you have access to the internet every now and then.

The flexibility of remote work improves quality of life.

Check out this post’s featured image. That’s my foot in my kid’s pool, taken while I was cooling off outside during a ninety degree day. I was able to write some CSS and get work done–all while I got to enjoy my kid’s laughter in the background as she played in the sprinkler. Having a more pleasant work environment is a huge morale boost. I remember thinking to myself, “I can’t believe I get paid to have it this good.”

While every organization wants to have the right employees, the impact of having the right (and conversely, wrong employees) on a small team is magnified.

Allowing employees to work remotely can position employers to expand their selection pool of candidates. This allows more flexibility when searching for a good fit for their company. At Zao, our team is spread out around the world. We have employees in Oregon, North Carolina, and Romania. We’ve tapped into unique skill sets and experience because we aren’t limited by physical proximity to our headquarters.

Remote work is also great for everyone’s bottom line.

Working remotely can also be a great bargaining chip. Lots of small companies have a smaller budget to work with. Many employees are open to taking a smaller salary in exchange for the perks that working remotely brings.

For example, employees can locate to areas where the cost of living is lower or be near an ailing family member. Employees can choose to buy groceries for lunch instead of eating out. Also, let’s not forget skipping the costly and often time expensive daily commute to the office. Working remotely prevents small companies from missing out on great talent because of budget constraints.

If your company values family and wellness, remote work is the way to go.

Most companies have core values that they do business by. It is very easy to have grandiose ideas of the dream organization, but much harder to make it a reality. Family is one of our core values at Zao. All of us have families. Working remotely adds a level of flexibility to our schedule to be present for our families. Even in crunch times, we can tuck our kids in and say goodnight before burning the midnight oil. Additionally, we can prioritize kid plays, sports games, swim lessons, anniversaries, etc., and show up for those moments we don’t want to miss.

To have our actions back up our core values at Zao is worth its weight in gold. Living with integrity, both personally and professionally, has benefits beyond what can easily be quantified. The byproducts include higher team morale, increased productivity, higher job satisfaction, and ownership of results. This equates to a more thriving and powerful team.

Do you work remotely? What are some of the perks you appreciate?

Portland Skyline

Just like in the movies

#zaomeetup2016

We just got back from our first ever company meetup where all four of us where in the same place at the same time…with all of our spouses and children. To say it was epic is an understatement.  This was the first time all of us met in the flesh. In actuality, the weekend was full of a lot of firsts.

It was almost immediately apparent that our entire group (17 in total: 4 employees, 4 spouses, 7 kids, and 2 babies) had chemistry and was able to gel without effort.  Usually in a group this size there is going to be an odd duck, or “they’re nice, but [fill in the blank]”, yet that wasn’t the case.  Even our kids all got along and kept each other entertained.

kids

This instantaneous connection enabled bonding, camaraderie, and access to our truer selves that would have otherwise required more effort and time to get there.  Not to say we walked away as besties with the deepest understanding of our life stories, but unequivocally, we feel like a collective family instead of a handful of employees doing work on the web.  The increased trust and familiarity with one another will only serve to strengthen and shore up Zao as we plunge forward.

It was also really enlightening seeing our strengths and differences play out in everyday normal life.  Even things like playing pool or grocery shopping revealed our personalities, processes, and frameworks. I constantly caught myself thinking, “This makes so much sense!”  There were so many connections for me between how someone approaches code with how they approach their everyday life.

Our differences were really highlighted to me as well.  I’ve never thought much about how I’m the only female on our team, but it was striking to me in different situations.  Similarly, I don’t often think outside the American framework, and having non-Americans in our midst opened my eyes to things I don’t normally see.  For whatever reason, it’s easy for me to homogenize our team when 90% of my communication with everyone is only in written words and the occasional /giphy.  I feel like now I’ll be more aware of our differences in our future communication after this.

I feel like this weekend was laying a fantastic foundation for what future Zao will hold.  In a lot of ways it felt like getting engaged.  We’ve permanently established that we like each other, we want to be together, and we work well with each other.  Now I believe we’ll start facing and conquering the pain points and challenges that come in every business, relationship, group, etc.

Ultimately, I could not be happier with the group I get to work with.  I couldn’t imagine a better setup.  We’re a dream team that’s just like in the movies*.

*Ed. – When Mihai came in from Romania, nearly every new experience was appended with the statement, “It’s just like the movies!

Man expressing sadness

When Projects Crash and Burn

** Queue sad music **

Once every 5 years or so we run into a project where things go so south we have to exit the project before completion.  This is painful for everyone involved and not something we ever like to do.  Additionally, on occasion we take on projects where once completed we never want to think about said project again.

To avoid these problematic projects in the future we’ve committed to learning from our mistakes.  Here’s a bit of our painfully earned wisdom in no particular order:

Listen to your gut

While this sounds like a no brainer, 9 times out of 10 we had red flags along the way in our initial communication with a client that we ignored and decided to move forward with the project anyways.  Had we kept to our “thanks, but no thanks” stance we would have saved ourselves many a headache and late night.

Be wary of asset overload

Sometimes potential clients come to us with a tiny budget and a TON of information on scope and assets in an effort to be helpful.  While this sounds like a great thing, especially since sometimes it’s like pulling teeth to get a nailed down scope, if there aren’t the resources to thoughtfully explore those assets it’s easy to miss crucial details of the project that would have stopped us from moving forward to begin with.

Get another set of eyes on it

This is related to the gut check.  Sometimes things might feel great to you but once you bring in another set of eyes, they see things you totally missed or push back enough to create the right expectations for the project so that things don’t go south.  If you’re on your own and don’t have any other team members that can take a look, try reaching out to a trusted colleague in your sphere.

Define your ideal client/project

There’s got to be some saying to the effect of “if you measure it, it will come”. Having a clearly prescribed and defined list of traits your ideal client and/or project will help hold you accountable to only taking on work that will be successful.  Make your list to have must-haves and nice-to-haves so you can create some space for negotiation and compromise.  Then, if a potential project violates one of your must-haves, do not cave in and take it unless you are destitute, without food and shelter, and must get paid no matter the cost…aka that should hopefully be never.

What about you? Any hard earned lessons you’ve learned?