s

Our WFH Best Practices

Our first remote office opened in 2007 when a designer and a developer left our HQ office and moved to Durham. Ever since we've been fine-tuning our ability to collaborate across locations. Today, we have team members across the country in our four offices, and we have fully remote employees in Charleston, Kansas City, New York City, Dallas, and Charlottesville.

Because of the coronavirus outbreak, a lot of people recently started working from their homes across the world, the country, and Viget. We wanted to share some of our best practices for being great teammates and doing great work, regardless of locale, and we’d love to hear yours in the comments.

Communicate Often and Write It Down

We want every person at Viget to be informed and connected. We do this in a few ways. We have a company Knowledge Base, which contains critical information including HR policies, office processes, brand guidelines, project resources, etc. We also have a well-organized Google Drive that everyone can access.

My favorite communication tool we use, however, is our Internal Lab Report. Every week, we create a Google Doc with HR updates, birthdays, upcoming events we’re attending, relevant publicity we or a client received, and timely updates on projects, sales, and recruiting. This report allows the entire team to have the same information, regardless of PTO schedules, and it provides a record that can be referenced weeks, months, or years later.

I have also found our Slack habits really helpful. We try to make our availability easily known, mostly via a passive Slack status. We each update our status daily, sometimes multiple times, so people can see if we’re working from home, out of the office for an appointment, in a meeting, or offline for a personal phone call. We also have a few Slack Channels we use very specifically to announce PTO, important announcements, and recently, one that is specific to the updating coronavirus situation.

My work from home station.

Figure Out Your Boundaries

This looks different for everyone and can be an ever-changing target. Understanding your boundaries requires you to be honest with yourself – Are you easily distracted? Can you successfully work in pajama pants? Will your dog actually allow you to get work done? Does working from the couch result in good work, or do you need a designated work spot? For some, working from home requires setting boundaries to ensure the work gets done. For others, working from home requires setting a start and stop times to ensure you don’t overwork yourself.

Viget has a flexible work policy, so many of us work from home fairly often and have gotten our routines set up. As such, we have written about this before! Check out Trevor’s article about working remotely.

Show Your Face

When I first started at Viget, I’d never worked anywhere that used a Google Hangout for nearly every meeting. At first, I was tempted to call into meetings and leave the camera off because I found it exposing. Now, I can’t imagine not using it, and I’ve even embraced it in my personal life with friends and family. I realized the value in face-to-face conversations even in virtual form, the ability to see body language, and the connection you establish when you see each other's faces — even if your hair isn't perfect or you haven't arranged your plants just-so in the view behind you. Whenever possible, use your camera during a meeting. It increases trust, communication, and in my personal-not-backed-by-science-opinion, lightness, which frankly, I think we can all use a bit more of right now.

Here's a screen shot from our Saint Patrick's Day Happy Hour.

Create Shared Experiences

As a company with project teams often distributed across our four locations, cross-office experiences are vital to our culture, and we’ve spent years working to keep our remote offices in sync. A few of our ongoing group activities include a monthly virtual Book Club, our weekly full-team Free Lunch Friday tradition, Donut for Slack, and, of course, our Pointless Weekends.

The current global health crisis now requires almost all of the company to work remote, so we’ve gotten creative with our attempts to increase non-project time together, in order to keep up the vibes we’ve worked hard to create.

What we’ve recently started:

    • Last Weekend this Morning - Monday mornings, we have an optional virtual coffee, where anyone who’d like to chat can join and share the latest gardening lesson or bingeable tv show. It lets us start our week off as we would when we’re all in the office — saying hello to each other.
    • Virtual Happy Hours - We are a company that likes to socialize, and a bit of distance doesn’t stop us. This week, we set up an after-hours Happy Hour for St. Patrick’s Day.
    • Daily Lunch Table- If you’ve ever visited our HQ office in Falls Church, you’ll notice our large kitchen table. We have an informal tradition of gathering around noon to eat together, whether it’s just a couple folks or the whole team. We now do this lunch virtually. So far, we’re mostly taking turns discussing who is eating what, and of course, sharing said recipes.

I crowdsourced some ideas from the Viget team, and here are some noteworthy takeaways:

"In remote meetings, minimize all your other windows and be fully present. It’s easy to allow your attention to accidentally drift if you see a new Slack channel light up, especially if you’re in a larger meeting. Suddenly, you find yourself multitasking. Treat the meeting as if you were there in person: unless you’re taking notes, minimize your other tabs, and give the conversation your full attention."
- Paul Koch

“I try to reach out to more folks I don’t consistently work with. Since there’s less interaction in general, I want to be more intentional about staying connected.”
- Laura Sweltz

“Good habits are hard to form and bad habits are hard to break, and it’s often hard to find the right time to make a change. Most of us are experiencing a disruption to our usual behaviors right now, but that doesn’t have to be entirely bad. Be deliberate now and when this is over, we might all end up with some new work habits worth keeping.”
- Emily Bloom

“I’ve found it helpful to create a physical space similar to the one I had at work. While this isn’t exactly possible, small things like setting up a laptop stand and second screen make it so I’m less likely to get distracted and wander to the couch or kitchen (aka the snack danger zone.).”
- Aubrey Lear

“It’s easy to get stuck in one spot all day, so be proactive about moving around, or creating excuses to do so. Whether that’s making yourself a cup of coffee, eating lunch away from your computer, or going for a quick walk outside for some fresh air. This will help reduce the risk of going stir crazy.”
-Zach Robbins

True to Viget form, our remote work is all about “Progress, Not Perfection.” While remote collaboration is ingrained in our company, we’re looking for opportunities to fine-tune our approach and improve our habits.

We’d love to hear from you: What are your best practices? Lessons learned?




s

CLI Equivalents for Common MAMP PRO and Sequel Pro Tasks

Working on website front ends I sometimes use MAMP PRO to manage local hosts and Sequel Pro to manage databases. Living primarily in my text editor, a terminal, and a browser window, moving to these click-heavy dedicated apps can feel clunky. Happily, the tasks I have most frequently turned to those apps for —starting and stopping servers, creating new hosts, and importing, exporting, deleting, and creating databases— can be done from the command line.

I still pull up MAMP PRO if I need to change a host's PHP version or work with its other more specialized settings, or Sequel Pro to quickly inspect a database, but for the most part I can stay on the keyboard and in my terminal. Here's how:

Command Line MAMP PRO

You can start and stop MAMP PRO's servers from the command line. You can even do this when the MAMP PRO desktop app isn't open.

Note: MAMP PRO's menu icon will not change color to reflect the running/stopped status when the status is changed via the command line.

  • Start the MAMP PRO servers:
/Applications/MAMP PRO.app/Contents/MacOS/MAMP PRO cmd startServers
  • Stop the MAMP PRO servers:
/Applications/MAMP PRO.app/Contents/MacOS/MAMP PRO cmd stopServers
  • Create a host (replace host_name and root_path):
/Applications/MAMP PRO.app/Contents/MacOS/MAMP PRO cmd createHost host_name root_path

MAMP PRO-friendly Command Line Sequel Pro

Note: if you don't use MAMP PRO, just replace the /Applications/MAMP/Library/bin/mysql with mysql.

In all of the following commands, replace username with your user name (locally this is likely root) and database_name with your database name. The -p (password) flag with no argument will trigger an interactive password prompt. This is more secure than including your password in the command itself (like -pYourPasswordHere). Of course, if you're using the default password root is not particular secure to begin with so you might just do -pYourPasswordHere.

Setting the -h (host) flag to localhost or 127.0.0.1 tells mysql to look at what's on localhost. With the MAMP PRO servers running, that will be the MAMP PRO databases.

# with the MAMP PRO servers running, these are equivalent:
# /Applications/MAMP/Library/bin/mysql -h 127.0.0.1 other_options
# and
# /Applications/MAMP/Library/bin/mysql -h localhost other_options

/Applications/MAMP/Library/bin/mysql mysql_options # enter. opens an interactive mysql session
mysql> some command; # don't forget the semicolon
mysql> exit;
  • Create a local database
# with the MAMP PRO servers running
# replace `username` with your username, which is `root` by default
/Applications/MAMP/Library/bin/mysql -h localhost -u username -p -e "create database database_name"

or

# with the MAMP PRO servers running
# replace `username` (`root` by default) and `database_name`
/Applications/MAMP/Library/bin/mysql -h localhost -u username -p # and then enter
mysql> create database database_name; # don't forget the semicolon
mysql> exit

    MAMP PRO's databases are stored in /Library/Application Support/appsolute/MAMP PRO/db so to confirm that it worked you can

ls /Library/Application Support/appsolute/MAMP PRO/db
# will output the available mysql versions. For example I have
mysql56_2018-11-05_16-25-13     mysql57

# If it isn't clear which one you're after, open the main MAMP PRO and click
# on the MySQL "servers and services" item. In my case it shows "Version: 5.7.26"

# Now look in the relevant MySQL directory
ls /Library/Application Support/appsolute/MAMP PRO/db/mysql57
# the newly created database should be in the list
  • Delete a local database
# with the MAMP PRO servers running
# replace `username` (`root` by default) and `database_name`
/Applications/MAMP/Library/bin/mysql -h localhost -u username -p -e "drop database database_name"
  • Export a dump of a local database. Note that this uses mysqldump not mysql.
# to export an uncompressed file
# replace `username` (`root` by default) and `database_name`
/Applications/MAMP/Library/bin/mysqldump -h localhost -u username -p database_name > the/output/path.sql

# to export a compressed file
# replace `username` (`root` by default) and `database_name`
/Applications/MAMP/Library/bin/mysqldump -h localhost -u username -p database_name | gzip -c > the/output/path.gz

  • Export a local dump from an external database over SSH. Note that this uses mysqldump not mysql.

# replace `ssh-user`, `ssh_host`, `mysql_user`, `database_name`, and the output path

# to end up with an uncompressed file
ssh ssh_user@ssh_host "mysqldump -u mysql_user -p database_name | gzip -c" | gunzip > the/output/path.sql

# to end up with a compressed file
ssh ssh_user@ssh_host "mysqldump -u mysql_user -p database_name | gzip -c" > the/output/path.gz
  • Import a local database dump into a local database
# with the MAMP PRO servers running
# replace `username` (`root` by default) and `database_name`
/Applications/MAMP/Library/bin/mysql -h localhost -u username -p database_name < the/dump/path.sql
  • Import a local database dump into a remote database over SSH. Use care with this one. But if you are doing it with Sequel Pro —maybe you are copying a Craft site's database from a production server to a QA server— you might as well be able to do it on the command line.
ssh ssh_user@ssh_host "mysql -u username -p remote_database_name" < the/local/dump/path.sql


For me, using the command line instead of the MAMP PRO and Sequel Pro GUI means less switching between keyboard and mouse, less opening up GUI features that aren't typically visible on my screen, and generally better DX. Give it a try! And while MAMP Pro's CLI is limited to the essentials, command line mysql of course knows no limits. If there's something else you use Sequel Pro for, you may be able to come up with a mysql CLI equivalent you like even better.



  • Code
  • Front-end Engineering
  • Back-end Engineering

s

Scurry: A Race-To-Finish Scavenger Hunt App

We have a lot of traditions here at Viget, many of which you may have read about - TTT, FLF, Pointless Weekend. There are others, but you have to be an insider for more information on those.

Pointless Weekend is one of our favorite traditions, though. It’s been around over a decade and some pretty fun work has come out of it over the years, like Storyboard, Baby Bookie, and Short Order. At a high level, we take 48 hours to build a tool, experiment, or stunt as a team, across all four of our offices. These projects are entirely separate from our client work and we use them to try out new technologies, explore roles on the team, and stress-test our processes.

The first step for a Pointless Weekend is assembling the teams. We had two teams this year, with a record number of participants. You can read about TrailBuddy, what the other team built, here.

The Scurry team was split between the DC and Durham offices, so all meetings were held via Hangout.

Once we were assembled, we set out to understand the constraints and the goals of our Pointless Project. We went into this weekend with an extra pep in our step, as we were determined to build something for the upcoming Viget 20th anniversary TTT this summer. Here’s what we knew we wanted:

  1. An activity all Vigets could do together, where they could create memories, and share broadly on social
  2. Something that we could use in a spotty network at C Lazy U Ranch in Colorado
  3. A product we can share with others: corporate groups, families and friends, schools, bachelor/ette parties

We landed on a scavenger hunt native app, which we named Scurry (Scavenger + Hurry = Scurry. Brilliant, right?). There are already a few scavenger apps available, so we set out to create something that was

  • Quick and easy to set up hunts
  • Free and intuitive for users
  • A nice combination of trivia and activities
  • Social! We wanted to enable teams to share photos and progress

One of the main reasons we have Pointless Weekends is to test out new technologies and processes. In that vein, we tried out Notion as our central organizing tool - we used it for user journeys, data modeling, and even writing tickets, which we typically use Github for.

We tested out Notion as our primary tool, writing tickets and tracking progress.

When we built the app, we needed to prepare for spotty network service, as internet connectivity isn’t guaranteed at C Lazy U Ranch – where our Viget20 celebration will be. A Progressive Web Application (PWA) didn't make sense for our tech requirements, so we chose the route of creating a native application.

There are a number of options available to build native applications. But, as we were looking to make as much progress as possible in 48-hours, we chose one of our favorite frameworks: React Native. React Native allows developers to build true, cross-platform native applications, using some of our favorite technologies: javascript, the React framework, and a native-specific variant of CSS. We decided on the turn-key solution Expo. Expo has extra tooling allowing for easy development, deployment, and debugging.

This is a snap shot of our app and Expo.

Our frontend developers were able to immediately dive in making screens and styling components, and quickly made the mockups in Whimsical a reality.

On the backend, we used the supported library to connect to the backend datastore, Firebase. Firebase is a hosted solution for data storage, with key features built-in like authentication, realtime updates, and offline support. Our backend developer worked behind the frontend developers hooking those views up to live data.

Both of these tools, Expo and Firebase, were easy to use and allowed us to focus on building a working application quickly, rather than being mired in setup or bespoke solutions to common problems.

Whimsical is one of our favorite tools for building out mockups of an app.

We made impressive progress in our 48-hour sprint, but there’s still some work to do. We have some additional features we hope to add before TTT, which will require additional testing and refining. For now, stay tuned and sign up for our newsletter. We’ll be sure to share when Scurry is ready for the world!



  • News & Culture

s

Together We Flourish, Remotely

Like many other companies, Viget is working through the new challenge of suddenly being a fully-distributed company. We don’t know how long it will last or every challenge that will arise because of these unfortunate circumstances, but we know the health and well-being of our people is paramount. As Employee Engagement Manager, I feel inspired by these new challenges, eager to step up, and committed to seeing what good can come of this.

Now more than ever, we want to maintain the culture that has sustained us over the last 20 years – a culture that I think is best captured by our mantra, “do great work and be a great teammate.” As everyone is adjusting to new work environments, schedules, and distractions, I am adjusting my approach to employee engagement, and the People Team is looking for new ways to nurture and protect the culture we treasure.

The backbone of being a great teammate is knowing each other and caring about each other. For years the People Team has focused on making sure people who work at Viget are known, accepted, and cared about. From onboarding to events to weekly and monthly touchpoints, we invest in coworkers knowing each other. On top of that, we have well-appointed offices where people like to be, and friendships unfold over time. Abruptly becoming fully distributed makes it impossible for some of these connections to happen organically, like they would have around the coffee machine and the lunch tables. These microinteractions between colleagues in the same office, the hellos when you get off the elevator or the “what’d you get up to this weekend” chit chat near the seltzer refrigerator, all add up. We realize more than ever how valuable those moments are, and I know I will feel extra grateful for them when we are all back together.

Until that time, we are working to make sure everyone at Viget feels connected, safe, healthy, and most importantly, together, even when we are physically apart. We are keeping up our weekly staff meetings and monthly team lunches, and we just onboarded a new hire last week as thoroughly as ever. There are some other, new ways we’re sparking connections, too.

New ways we're sparking connections:

Connecting IntentionallyWe are making the most of the tools that we’ve been using for years. New Slack channels have spun up, including #exercise, where folks are sharing how they are making do without a gym, and #igotyou, a place where folks can post where they’ve found supplies in stock as grocery stores are being emptied at an alarming pace.
Remote Lunch TablesWe have teammates in three different time zones, on different project teams, and at different stages of life. We’ve created two virtual lunch tables, one at 12PM EST and one at 12PM MST, where folks can join with or without their lunches and with or without their kids, partners, or pets. There are no rules or structure, just an opportunity to chat and see a friendly face as a touchpoint to your day.
Last Weekend This MorningCatching up Monday morning is a great way to kick off your week. Historically, I’ve done this from my desk over coffee as I greet folks coming off the elevator (I usually have the privilege of sitting at our front desk). I now do this from my desk, at home, over coffee as folks pop in or out of our Zoom call. One upshot of the new normal is I can “greet” anyone who shows up, not just people who work from my same office. Again, no structure, just a way to start our week, together.
Munch MadnessYes, you read that right. Most of the sports world is enjoying an intermission. Since our CEO can’t cheer on his beloved Cavaliers and our VP of Design can’t cheer on his Gators, we’ve created something potentially much better. A definitive snack bracket. There is a minimal time commitment and folks with no sports knowledge can participate. The rules are simple: create and submit your bracket, ranking who you believe will win each snack faceoff. Then as we move through the rounds, vote on your favorite snacks. The competition has already sparked tons of conversation and plenty of snack hot takes. Want to start a munch-off of your own? Check out our bracket as a starting point.
Virtual Happy HoursSigning off for the day and shutting down your machine is incredibly important for maintaining a work-life balance. Casually checking in, unwinding, and being able to chat about your day is also important. We have big, beautiful kitchens in each of our offices, along with casual spaces where at the end of any given day you can find a few Vigets catching up before heading home. This is something we don’t want to miss! So we’re setting up weekly happy hours where folks can hop in and say hi to each other face-to-face. We’ve found Zoom to be a great platform so we can see the maximum number of our teammates possible. Like all of our other events, it’s optional. There is also an understanding that your roommate, kid, significant other, or pet might show up on screen (and are welcome!). No one is shamed for multitasking and we encourage our teammates to join as they can. So far we’ve toasted new teammates, played a song or two, and up next we’ll play trivia.

At the end of the day, we are all here for one reason: to do great work. Our award-winning work is made possible by the trust we’ve built within our teams. Staying focused and accountable to ourselves and our clients is what drives our motivation to continue to show up and do our best. In our new working environment, it is crucial that we can both stay connected and productive; a lot of teammates are stepping up to support one another. Here are a few ways we are continuing to foster our “do great work” mantra.

New ways we're fostering great work:

Staying in TouchThe People Team is actively touching base with every employee. Our focus is on their health, productivity, and connection. These 1:1s have given us a baseline for how we can provide the best support for our team, from making sure they're aware of flexible work options to setting them up with the tools they need to be successful. We’ve delivered chairs, monitors, and helped troubleshoot in-home wifi issues. We are committed to making sure every Viget is set up for success.
Sharing is CaringWe’re no stranger to remote teams. We have four offices across the U.S. and a handful of full-time remote folks, and we’ve leaned on our inside experts to share their expertise on remote work. Most recently, ourData & Analytics Director, who has been working remotely full time for five years, gave a presentation on best practices for working from home. His top tips for working from home include:
  • Minimize other windows in remote meetings.
  • Set a schedule and avoid midday chores.
  • Take breaks away from the screen.
  • Plan your workday on your shared calendar.
  • Be mindful of Slack and social media as a distraction.
  • Use timers.
  • Keep your work area separate from where you relax.
  • Pretend that you’re still working from work.
  • Experiment and figure out what works for you.

Our UX Research Director also stepped up to share her expertise to aid in adjusting to our new working conditions. She led a microclass on remote facilitation where she shared best practices and went over tools that support remote collaboration. Some of the tools she highlighted included Miro, Mural, Whimsical, and Jamboard. During the microclass she demonstrated use of Whimsical’s voting feature, which makes it easy for distributed groups to establish discussion topic priorities.

Always PreparedHaving all of our project materials stored in the Cloud in a consistent, predictable way is a cornerstone of our business continuity plan. It is more important than ever for our team to follow the established best practices and ensure that project files are accessible to the full Viget team in the event of unplanned time off. Our VP of Client Services is leading efforts to ensure everyone is aware of and following our established guidelines with tools like Drive, Slack, Github, and Figma. Our priorities are that clients’ needs are met, quality is high, and timelines are honored.

As the pandemic unfolds, our approach to employee engagement will evolve. We have more things in the works to build and maintain connections while distributed, including trivia and game nights, book clubs, virtual movie nights, and community service opportunities, just to name a few. No matter what we’re doing or what tool we’re using to connect, we’ll be in it together: doing great work, being great teammates, and looking forward.



  • News & Culture

s

A Viget Glossary: What We Mean and Why it Matters - Part 1

Viget has helped organizations design and develop award-winning websites and digital products for 20 years. In that time, we’ve been lucky to create long-term relationships with clients like Puma, the World Wildlife Fund, and Privia Health, and, throughout our time working together, we’ve come to understand each others’ unique terminology. But that isn’t always the case when we begin work with new clients, and in a constantly-evolving industry, we know that new terminology appears almost daily and organizations have unique definitions for deliverables and processes.

Kicking off a project always initiates a flurry of activity. There are contracts to sign, team members to introduce, and new platforms to learn. It’s an exciting time, and we know clients are anxious to get underway. Amidst all the activity, though, there is a need to define and create a shared lexicon to ensure both teams understand the project deliverables and process that will take us from kickoff to launch.

Below, we’ve rounded up a few terms for each of our disciplines that often require additional explanation. Note: our definitions of these terms may differ slightly from the industry standard, but highlight our interpretation and use of them on a daily basis.

User Experience

Research

In UX, there is a proliferation of terms that are often used interchangeably and mean almost-but-subtly-not the same thing. Viget uses the term research to specifically mean user research — learning more about the users of our products, particularly how they think and behave — in order to make stronger recommendations and better designs. This can be accomplished through different methodologies, depending on the needs of the project, and can include moderated usability testing, stakeholder interviews, audience research, surveys, and more. Learn more about the subtleties of UX research vocabulary in our post on “Speaking the Same Language About Research”.

Wireframes

We use wireframes to show the priority and organization of content on the screen, to give a sense of what elements will get a stronger visual treatment, and to detail how users will get to other parts of the site. Wireframes are a key component of website design — think of them as the skeleton or blueprint of a page — but we know that clients often feel uninspired after reviewing pages built with gray boxes. In fact, we’ve even written about how to improve wireframe presentations. We remind clients that visual designers will step in later to add polish through color, graphics, and typography, but agreeing on the foundation of the page is an important and necessary first step.

Prototypes

During the design process, it’s helpful for us to show clients how certain pieces of functionality or animations will work once the site is developed. We can mimic interactivity or test a technical proof of concept by using a clickable prototype, relying on tools like Figma, Invision, or Principle. Our prototypes can be used to illustrate a concept to internal stakeholders, but shouldn’t be seen as a final approach. Often, these concepts will require additional work to prepare them for developer handoff, which means that prototypes quickly become outdated. Read more about how and when we use prototypes.

Navigation Testing (Treejack Testing)

Following an information architecture presentation, we will sometimes recommend that clients conduct navigation testing. When testing, we present a participant with the proposed navigation and ask them to perform specific tasks in order to see if they will be able to locate the information specified within the site’s new organization. These tests generally focus on two aspects of the navigation: the structure of the navigation system itself, and the language used within the system. Treejack is an online navigation testing tool that we like to employ when conducting navigation tests, so we’ll often interchange the terms “navigation testing” with “treejack testing”.

Learn more about Viget’s approach to user experience and research




s

Pursuing A Professional Certification In Scrum

Professional certifications have become increasingly popular in this age of career switchers and the freelance gig economy. A certification can be a useful way to advance your skill set quickly or make your resume stand out, which can be especially important for those trying to break into a new industry or attract business while self-employed. Whatever your reason may be for pursuing a professional certificate, there is one question only you can answer for yourself: is it worth it?

Finding first-hand experiences from professionals with similar career goals and passions was the most helpful research I used to answer that question for myself. So, here’s mine; why I decided to get Scrum certified, how I evaluated my options, and if it was really worth it.

A shift in mindset

My background originates in brand strategy where it’s typical for work to follow a predictable order, each step informing the next. This made linear techniques like water-fall timelines, completing one phase of work in its entirety before moving onto the next, and documenting granular tasks weeks in advance helpful and easy to implement. When I made the move to more digitally focused work, tasks followed a much looser set of ‘typical’ milestones. While the general outline remained the same (strategy, design, development, launch) there was a lot more overlap with how tasks informed each other, and would keep informing and re-informing as an iterative workflow would encourage.

Trying to fit a very fluid process into my very stiff linear approach to project planning didn’t work so well. I didn’t have the right strategies to manage risks in a productive way without feeling like the whole project was off track; with the habit of account for granular details all the time, I struggled to lean on others to help define what we should work on and when, and being okay if that changed once, or twice, or three times. Everything I learned about the process of product development came from learning on the job and making a ton of mistakes—and I knew I wanted to get better.

Photo by Christin Hume on Unsplash

I was fortunate enough to work with a group of developers who were looking to make a change, too. Being ‘agile’-enthusiasts, this group of developers were desperately looking for ways to infuse our approach to product work with agile-minded principles (the broad definition of ‘agile’ comes from ‘The Agile Manifesto’, which has influenced frameworks for organizing people and information, often applied in product development). This not only applied to how I worked with them, but how they worked with each other, and the way we all onboarded clients to these new expectations. This was a huge eye opener to me. Soon enough, I started applying these agile strategies to my day-to-day— running stand-ups, setting up backlogs, and reorganizing the way I thought about work output. It’s from this experience that I decided it may be worth learning these principles more formally.

The choice to get certified

There is a lot of literature out there about agile methodologies and a lot to be learned from casual research. This benefitted me for a while until I started to work on more complicated projects, or projects with more ambitious feature requests. My decision to ultimately pursue a formal agile certification really came down to three things:

  1. An increased use of agile methods across my team. Within my day-to-day I would encounter more team members who were familiar with these tactics and wanted to use them to structure the projects they worked on.
  2. The need for a clear definition of what processes to follow. I needed to grasp a real understanding of how to implement agile processes and stay consistent with using them to be an effective champion of these principles.
  3. Being able to diversify my experience. Finding ways to differentiate my resume from others with similar experience would be an added benefit to getting a certification. If nothing else, it would demonstrate that I’m curious-minded and proactive about my career.

To achieve these things, I gravitated towards a more foundational education in a specific agile-methodology. This made Scrum the most logical choice given it’s the basis for many of the agile strategies out there and its dominance in the field.

Evaluating all the options

For Scrum education and certification, there are really two major players to consider.

  1. Scrum Alliance - Probably the most well known Scrum organization is Scrum Alliance. They are a highly recognizable organization that does a lot to further the broader understanding of Scrum as a practice.
  2. Scrum.org - Led by the original co-founder of Scrum, Ken Schwaber, Scrum.org is well-respected and touted for its authority in the industry.

Each has their own approach to teaching and awarding certifications as well as differences in price point and course style that are important to be aware of.

SCRUM ALLIANCE

Pros

  • Strong name recognition and leaders in the Scrum field
  • Offers both in-person and online courses
  • Hosts in-person events, webinars, and global conferences
  • Provides robust amounts of educational resources for its members
  • Has specialization tracks for folks looking to apply Scrum to their specific discipline
  • Members are required to keep their skills up to date by earning educational credits throughout the year to retain their certification
  • Consistent information across all course administrators ensuring you'll be set up to succeed when taking your certification test.

Cons

  • High cost creates a significant barrier to entry (we’re talking in the thousands of dollars here)
  • Courses are required to take the certification test
  • Certification expires after two years, requiring additional investment in time and/or money to retain credentials
  • Difficult to find sample course material ahead of committing to a course
  • Courses are several days long which may mean taking time away from a day job to complete them

SCRUM.ORG

Pros

  • Strong clout due to its founder, Ken Schwaber, who is the originator of Scrum
  • Offers in-person classes and self-paced options
  • Hosts in-person events and meetups around the world
  • Provides free resources and materials to the public, including practice tests
  • Has specialization tracks for folks looking to apply Scrum to their specific discipline
  • Minimum score on certification test required to pass; certification lasts for life
  • Lower cost for certification when compared to peers

Cons

  • Much lesser known to the general public, as compared to its counterpart
  • Less sophisticated educational resources (mostly confined to PDFs or online forums) making digesting the material challenging
  • Practice tests are slightly out of date making them less effective as a study tool
  • Self-paced education is not structured and therefore can’t ensure you’re learning everything you need to know for the test
  • Lack of active and engaging community will leave something to be desired

Before coming to a decision, it was helpful to me to weigh these pros and cons against a set of criteria. Here’s a helpful scorecard I used to compare the two institutions.

Scrum Alliance Scrum.org
Affordability ⚪⚪⚪
Rigor⚪⚪⚪⚪⚪
Reputation⚪⚪⚪⚪⚪
Recognition⚪⚪⚪
Community⚪⚪⚪
Access⚪⚪⚪⚪⚪
Flexibility⚪⚪⚪
Specialization⚪⚪⚪⚪⚪⚪
Requirements⚪⚪⚪
Longevity⚪⚪⚪

For me, the four areas that were most important to me were:

  • Affordability - I’d be self-funding this certificate so the investment of cost would need to be manageable.
  • Self-paced - Not having a lot of time to devote in one sitting, the ability to chip away at coursework was appealing to me.
  • Reputation - Having a certificate backed by a well-respected institution was important to me if I was going to put in the time to achieve this credential.
  • Access - Because I wanted to be a champion for this framework for others in my organization, having access to resources and materials would help me do that more effectively.

Ultimately, I decided upon a Professional Scrum Master certification from Scrum.org! The price and flexibility of learning course content were most important to me. I found a ton of free materials on Scrum.org that I could study myself and their practice tests gave me a good idea of how well I was progressing before I committed to the cost of actually taking the test. And, the pedigree of certification felt comparable to that of Scrum Alliance, especially considering that the founder of Scrum himself ran the organization.

Putting a certificate to good use

I don’t work in a formal Agile company, and not everyone I work with knows the ins and outs of Scrum. I didn’t use my certification to leverage a career change or new job title. So after all that time, money, and energy, was it worth it?

I think so. I feel like I use my certification every day and employ many of the principles of Scrum in my day-to-day management of projects and people.

  • Self-organizing teams is really important when fostering trust and collaboration among project members. This means leaning on each other’s past experiences and lessons learned to inform our own approach to work. It also means taking a step back as a project manager to recognize the strengths on your team and trust their lead.
  • Approaching things in bite size pieces is also a best practice I use every day. Even when there isn't a mandated sprint rhythm, breaking things down into effort level, goals, and requirements is an excellent way to approach work confidently and avoid getting too overwhelmed.
  • Retrospectives and stand ups are also absolute musts for Scrum practices, and these can be modified to work for companies and project teams of all shapes and sizes. Keeping a practice of collective communication and reflection will keep a team humming and provides a safe space to vent and improve.
Photo by Gautam Lakum on Unsplash

Parting advice

I think furthering your understanding of industry standards and keeping yourself open to new ways of working will always benefit you as a professional. Professional certifications are readily available and may be more relevant than ever.

If you’re on this path, good luck! And here are some things to consider:

  • Do your research – With so many educational institutions out there, you can definitely find the right one for you, with the level of rigor you’re looking for.
  • Look for company credits or incentives – some companies cover part or all of the cost for continuing education.
  • Get started ASAP – You don’t need a full certification to start implementing small tactics to your workflows. Implementing learnings gradually will help you determine if it’s really something you want to pursue more formally.




s

5 things to Note in a New Phoenix 1.5 App

Yesterday (Apr 22, 2020) Phoenix 1.5 was officially released ????

There’s a long list of changes and improvements, but the big feature is better integration with LiveView. I’ve previously written about why LiveView interests me, so I was quite excited to dive into this release. After watching this awesome Twitter clone in 15 minutes demo from Chris McCord, I had to try out some of the new features. I generated a new phoenix app with the —live flag, installed dependencies and started a server. Here are five new features I noticed.

1. Database actions in browser

Oops! Looks like I forgot to configure the database before starting the server. There’s now a helpful message and a button in the browser that can run the command for me. There’s a similar button when migrations are pending. This is a really smooth UX to fix a very common error while developing.

2. New Tagline!

Peace-of-mind from prototype to production

This phrase looked unfamiliar, so I went digging. Turns out that the old tagline was “A productive web framework that does not compromise speed or maintainability.” (I also noticed that it was previously “speed and maintainability” until this PR from 2019 was opened on a dare to clarify the language.)

Chris McCord updated the language while adding phx.new —live. I love this framing, particularly for LiveView. I am very excited about the progressive enhancement path for LiveView apps. A project can start out with regular, server rendered HTML templates. This is a very productive way to work, and a great way to start a prototype for just about any website. Updating those templates to work with LiveView is an easier lift than a full rebuild in React. And finally, when you’re in production you have the peace-of-mind that the reliable BEAM provides.

3. Live dependency search

There’s now a big search bar right in the middle of the page. You can search through the dependencies in your app and navigate to the hexdocs for them. This doesn’t seem terribly useful, but is a cool demo of LiveView. The implementation is a good illustration of how compact a feature like this can be using LiveView.

4. LiveDashboard

This is the really cool one. In the top right of that page you see a link to LiveDashboard. Clicking it will take you to a page that looks like this.

This page is built with LiveView, and gives you a ton of information about your running system. This landing page has version numbers, memory usage, and atom count.

Clicking over to metrics brings you to this page.

By default it will tell you how long average queries are taking, but the metrics are configurable so you can define your own custom telemetry options.

The other tabs include process info, so you can monitor specific processes in your system:

And ETS tables, the in memory storage that many apps use for caching:

The dashboard is a really nice thing to get out of the box and makes it free for application developers to monitor their running system. It’s also developing very quickly. I tried an earlier version a week ago which didn’t support ETS tables, ports or sockets. I made a note to look into adding them, but it's already done! I’m excited to follow along and see where this project goes.

5. New LiveView generators

1.5 introduces a new generator mix phx.gen.live.. Like other generators, it will create all the code you need for a basic resource in your app, including the LiveView modules. The interesting part here is that it introduces patterns for organizing LiveView code, which is something I have previously been unsure about. At first glance, the new organization makes sense and feels like a good approach. I look forward to seeing how this works on a real project.

Conclusion

The 1.5 release brings more changes under the hood of course, but these are the first five differences you’ll notice after generating a new Phoenix 1.5 app with LiveView. Congratulations to the entire Phoenix team, but particularly José Valim and Chris McCord for getting this work released.



  • Code
  • Back-end Engineering

s

A Viget Glossary: What We Mean and Why It Matters - Part 2

In my last post, I defined terms used by our UX team that are often confused or have multiple meanings across the industry. Today, I’ll share our definitions for processes and deliverables used by our design and strategy teams.

Creative

Brand Strategy

In our experience, we’ve found that the term brand strategy is used to cover a myriad of processes, documents, and deliverables. To us, a brand strategy defines how an organization communicates who they are, what they do and why in a clear and compelling way. Over the years, we’ve developed an approach to brand strategy work that emphasizes rigorous research, hands-on collaboration, and the definition of problems and goals. We work with clients to align on a brand strategy concept and, depending on the client and their goals, our final deliverables can range to include strategy definition, audience-specific messaging, identity details, brand elements, applications, and more. Take a look at the brand strategy work we’ve done for Fiscalnote, Swiftdine, and Armstrong Tire.

Content Strategy

A content strategy goes far beyond the words on a website or in an app. A strong content strategy dictates the substance, structure, and governance of the information an organization uses to communicate to its audience. It guides creating, organizing, and maintaining content so that companies can communicate who they are, what they do, and why efficiently and effectively. We’ve worked with organizations like the Washington Speakers Bureau, The Nature Conservancy, the NFL Players Association, and the Wildlife Conservation Society to refine and enhance their content strategies.

Still confused about the difference between brand and content strategy? Check out our flowchart.

Style Guide vs. Brand Guidelines

We often find the depth or fidelity of brand guidelines and style guides can vary greatly, and the terms can often be confused. When we create brand guidelines, they tend to be large documents that include in-depth recommendations about how a company should communicate their brand. Sections like “promise”, “vision”, “mission”, “values”, “tone”, etc. accompany details about how the brand’s logo, colors and fonts should be used in a variety of scenarios. Style guides, on the other hand, are typically pared down documents that contain specific guidance for organizations’ logos, colors and fonts, and don’t always include usage examples.

Design System

One question we get from clients often during a redesign or rebrand is, “How can I make sure people across my organization are adhering to our new designs?” This is where a design system comes into play. Design systems can range from the basic — e.g., a systematic approach to creating shared components for a single website — all the way to the complex —e.g., architecting a cross-product design system that can scale to accommodate hundreds of different products within a company. By assembling elements like color, typography, imagery, messaging, voice and tone, and interaction patterns in a central repository, organizations are able to scale products and marketing confidently and efficiently. When a design system is translated into code, we refer to that as a parts kit, which helps enforce consistency and improve workflow.

Comps or Mocks

When reviewing RFPs or going through the nitty-gritty of contracts with clients, we often see the terms mocks or comps used interchangeably to refer to the static design of pages or screens. Internally, we think of a mock-up as a static image file that illustrates proof-of-concept, just a step beyond a wireframe. A comp represents a design that is “high fidelity” and closer to what the final website will look like, though importantly, is not an exact replica. This is likely what clients will share with internal stakeholders to get approval on the website direction and what our front-end developers will use to begin building-out the site (in other words, converting the static design files into dynamic HTML, CSS, and JavaScript code).

If you're interested in joining our team of creative thinkers and visual storytellers who bring these concepts to life for our clients, we’re hiring in Washington, D.C. Durham, Boulder and Chattanooga. Tune in next week as we decipher the terms we use most often when talking about development.




s

Unsolved Zoom Mysteries: Why We Have to Say “You’re Muted” So Much

Video conference tools are an indispensable part of the Plague Times. Google Meet, Microsoft Teams, Zoom, and their compatriots are keeping us close and connected in a physically distanced world.

As tech-savvy folks with years of cross-office collaboration, we’ve laughed at the sketches and memes about vidconf mishaps. We practice good Zoomiquette, including muting ourselves when we’re not talking.

Yet even we can’t escape one vidconf pitfall. (There but for the grace of Zoom go I.) On nearly every vidconf, someone starts to talk, and then someone else says: “Oop, you’re muted.” And, inevitably: “Oop, you’re still muted.”

That’s right: we’re trying to follow Zoomiquette by muting, but then we forget or struggle to unmute when we do want to talk.

In this post, I’ll share my theories for why the You’re Muted Problems are so pervasive, using Google Meet, Microsoft Teams, and Zoom as examples. Spoiler alert: While I hope this will help you be more mindful of the problem, I can’t offer a good solution. It still happens to me. All. The. Time.

Skip the why and go straight to the vidconf app keyboard shortcuts you should memorize right now.

Why we don't realize we’re muted before talking

Why does this keep happening?!?

Simply put: UX and design decisions make it harder to remember that you’re muted before you start to talk.

Here’s a common scenario: You haven’t talked for a bit, so you haven’t interacted with the Zoom screen for a few seconds. Then you start to talk — and that’s when someone tells you, “You’re muted.”

We forget so easily in these scenarios because when our mouse has been idle for a few seconds, the apps hide or downplay the UI elements that tell us we’re muted.

Zoom and Teams are the worst offenders:

  • Zoom hides both the toolbar with the main in-app controls (the big mute button) and the mute status indicator on your video pane thumbnail.
  • Teams hides the toolbar, and doesn't show a mute status indicator on your video thumbnail in the first place.

Meet is only slightly better:

  • Meet hides the toolbar, and shows only a small mute status icon in your video thumbnail.

Even when our mouse is active, the apps’ subtle approach to muted state UI can make it easy to forget that we’re muted:

Teams is the worst offender:

  • The mute button is an icon rather than words.
  • The muted-state icon's styling could be confused with unmuted state: Teams does not follow the common pattern of using red to denote muted state.
  • The mute button is not differentiated in visual hierarchy from all the other controls.
  • As mentioned above, Teams never shows a secondary mute status indicator.

Zoom is a bit better, but still makes it pretty easy to forget that you’re muted:

  • Pros:
    • Zoom is the only app to use words on the mute button, in this case to denote the button action (rather than the muted state).
    • The muted-state icon’s styling (red line) is less likely to be confused with the unmuted-state icon.
  • Cons:
    • The mute button’s placement (bottom left corner of the page) is easy to overlook.
    • The mute button is not differentiated in visual hierarchy from the other toolbar buttons — and Zoom has a lot of toolbar buttons, especially when logged in as host.
    • The secondary mute status indicator is a small icon.
    • The mute button’s muted-state icon is styled slightly differently from the secondary mute status indicator.
  • Potential Cons:
    • While words denote the button action, only an icon denotes the muted state.

Meet is probably the clearest of the three apps, but still has pitfalls:

  • Pros:
    • The mute button is visually prominent in the UI: It’s clearly differentiated in the visual hierarchy relative to other controls (styled as a primary button); is a large button; and is placed closer to the center of the controls bar.
    • The muted-state icon’s styling (red fill) is less likely to be confused with the unmuted-state icon.
  • Cons:
    • Uses only an icon rather than words to denote the muted state.
  • Unrelated Con:
    • While the mute button is visually prominent, it’s also placed next to the hang-up button. So in Meet’s active state you might be less likely to forget you’re muted … but more likely to accidentally hang up when trying to unmute. 😬

I know modern app design leans toward minimalism. There’s often good rationale to use icons rather than words, or to de-emphasize controls and indicators when not in use.

But again: This happens on basically every call! Often multiple times per call!! And we’re supposed to be tech-savvy!!! Imagine what it’s like for the tens of millions of vidconf newbs.

I would argue that “knowing your muted state” has turned out to be a major vidconf user need. At this point, it’s certainly worth rethinking UX patterns for.

Why we keep unsuccessfully unmuting once we realize we’re muted

So we can blame the You’re Muted Problem on UX and design. But what causes the You’re Still Muted Problem? Once we know we’re muted, why do we sometimes fail to unmute before talking again?

This one is more complicated — and definitely more speculative. To start making sense of this scenario, here’s the sequence I’m guessing most commonly plays out (I did this a couple times before I became aware of it):

The crucial part is when the person tries to unmute by pressing the keyboard Volume On/Off key.

If that’s in fact what’s happening (again, this is just a hypothesis), I’m guessing they did that because when someone says “You’re muted” or “I can’t hear you,” our subconscious thought process is: “Oh, Audio is Off. Press the keyboard key that I usually press when I want to change Audio Off to Audio On.”

There are two traps in this reflexive thought process:

First, the keyboard volume keys control the speaker volume, not the microphone volume. (More specifically, they control the system sound output settings, rather than the system sound input settings or the vidconf app’s sound input settings.)

In fact, there isn’t a keyboard key to control the microphone volume. You can’t unmute your mic via a dedicated keyboard key, the way that you can turn the speaker volume on/off via a keyboard key while watching a movie or listening to music.

Second, I think we reflexively press the keyboard key anyway because our mental model of the keyboard audio keys is just: Audio. Not microphone vs. speaker.

This fuzzy mental model makes sense: There’s only one set of keyboard keys related to audio, so why would I think to distinguish between microphone and speaker? 

So my best guess is hardware design causes the You’re Still Muted Problem. After all, keyboard designs are from a pre-Zoom era, when the average person rarely used the computer’s microphone.

If that is the cause, one potential solution is for hardware manufacturers to start including dedicated keys to control microphone volume:

Video conference keyboard shortcuts you should memorize right now

Let me know if you have other theories for the You’re Still Muted Problem!

In the meantime, the best alternative is to learn all of the vidconf app keyboard shortcuts for muting/unmuting:

  • Meet
    • Mac: Command(⌘) + D
    • Windows: Control + D
  • Teams
    • Mac: Command(⌘) + Shift + M
    • Windows: Ctrl + Shift + M
  • Zoom
    • Mac: Command(⌘) + Shift + A
    • Windows: Alt + A
    • Hold Spacebar: Temporarily unmute

Other vidconf apps not included in my analysis:

  • Cisco Webex Meetings
    • Mac: Ctrl + Alt + M
    • Windows: Ctrl + Shift + M
  • GoToMeeting

Bonus protip from Jackson Fox: If you use multiple vidconf apps, pick a keyboard shortcut that you like and manually change each app’s mute/unmute shortcut to that. Then you only have to remember one shortcut!




s

A Parent’s Guide to Working From Home, During a Global Pandemic, Without Going Insane

Though I usually enjoy working from Viget’s lovely Boulder office, during quarantine I am now working from home while simultaneously parenting my 3-year-old daughter Audrey. My husband works in healthcare and though he is not on the front lines battling COVID-19, he is still an essential worker and as such leaves our home to work every day.

Some working/parenting days are great! I somehow get my tasks accomplished, my kid is happy, and we spend some quality time together.

And some days are awful. I have to ignore my daughter having a meltdown and try to focus on meetings, and I wish I wasn’t in this situation at all. Most days are somewhere in the middle; I’m just doing my best to get by.

I’ve seen enough working parent memes and cries for help on social media to know that I’m not alone. There are many parents out there who now get to experience the stress and anxiety of living through a global pandemic while simultaneously navigating ways to stay productive while working from home and being an effective parent. Fun isn’t it?

I’m not an expert on the matter, but I have found a few small things that are making me feel a bit more sane. I hope sharing them will make someone else’s life easier too.

Truths to Accept

First, let’s acknowledge some truths about this new situation we find ourselves in:

Truth 1: We’ve lost something.

Parents have lost more than daycare and schools during this epidemic. We’ve lost any time that we had for ourselves, and that was really valuable. We no longer have small moments in the day to catch up on our personal lives. I no longer have a commute to separate my work duties from my mom duties, or catch up with my friends, or just be quiet.

Truth 2: We’re human.

The reason you can’t be a great employee and a great parent and a great friend and a great partner or spouse all day every day isn’t because you’re doing a bad job, it’s because being constantly wonderful in all aspects of your life is impossible. Pick one or two of those things a day to focus on.

Truth 3: We’re all doing our best.

This is the most important part of this article. Be kind to yourselves. This isn’t easy, and putting so much pressure on yourself that you break isn’t going to make it any easier.

Work from Home Goals

Now that we’ve accepted some truths about our current situation, let’s set some goals.

Goal 1: Do Good Work

At Viget, and wherever you work, with kids or without we all want to make sure that the quality of our work stays up throughout the pandemic and that we can continue to be reliable team members and employees to the best of our abilities.

Goal 2: Stay Sane

We need to figure out ways to do this without sacrificing ourselves entirely. For me, this means fitting my work into normal work hours as much as possible so that I can still have some downtime in the evenings.

Goal 3: Make This Sustainable

None of us knows how long this will last but we may as well begin mentally preparing for a long haul.

Work from Home Rules

Now, there are some great Work from Home Rules that apply to everyone with or without kids. My coworker Paul Koch shared these with the Viget team a Jeremy Bearimy ago and I agree this is also the foundation for working from home with kids.

  1. When you’re in a remote meeting, minimize other windows to stay focused
  2. Set a schedule and avoid chores*
  3. Take breaks away from the screen
  4. Plan your workday on the calendar+
  5. Be mindful of Slack and social media as a distraction
  6. Use timers+
  7. Keep your work area separate from where you relax
  8. Pretend that you’re still WFW
  9. Experiment and figure out what works for you

In the improv spirit I say “Yes, AND….” to these tips. And so, here are my adjusted rules for WFH while kiddos around: These have both been really solid tools for me, so let’s dig in.

Daily flexible schedule for kids

Day Planning: Calendars and Timers

A few small tweaks and adjustments make this even more doable for me and my 3-year-old. First- I don’t avoid chores entirely. If I’m going up and down the stairs all day anyway I might as well throw in a load of laundry while I’m at it. The more I can get done during the day means a greater chance of some down time in the evening.

Each morning I plan my day and Audrey’s day:

My Work Day:

Audrey's Day

Identify times of day you are more likely to be focus and protect them. For me, I know I have a block of time from 5-7a before Audrey wakes up and again during “nap time” from 1-3p.I built a construction paper “schedule” that we update and reorganize daily. We make the schedule together each day. She feels ownership over it and she gets to be the one who tells me what we do next.
Look at your calendar first thing and make adjustments either in your plans or move meetings if you have to.I’m strategic about screen time- I try to schedule it when I have meetings. It also helps to schedule a physical activity before screen time as she is less likely to get bored.
Make goals for your day: Tackle time sensitive tasks first. Take care of things that either your co-workers or clients are waiting on from you first, this will help your day be a lot less stressful. Non-time sensitive tasks come next- these can be done at any time of day.We always include “nap time” even though she rarely naps anymore. This is mostly a time for us both to be alone.

When we make the schedule together it also helps me understand her favorite parts of the day and reminds me to include them.

Once our days are planned, I also use timers to help keep the structure of the day. (I bought a great alarm clock for kids on Amazon that turns colors to signal bedtime and quiet time. It’s been hugely worth it for me.)

Timers for Me:

Timers for Audrey:

More than ever, I rely on a time tracking timer. At Viget we use Harvest to track time, and it has a handy built in timer, but there are many apps or online tools that could help you keep track of your time as well.Audrey knows what time she can come out of her room in the morning. If she wakes up before the light is green she plays quietly in her room.
I need a timer because the days and hours are bleeding together- without tracking as I go it would be really hard for me to remember when I worked on certain projects or know for certain if I gave Viget enough time for the day.She knows how long “nap time” is in the afternoon.
Starting and stopping the timer helps me turn on and off “work mode”, which is a helpful sanity bonus.Perhaps best of all I am not the bad guy! “Sorry honey, the light isn’t green yet and there really isn’t anything mommy can do about it” is my new favorite way to ensure we both get some quiet time.

Work from Home Rules: Updated for Parents

Finally, I have a few more Work from Home Rules for parents to add to the list:

  1. Minimize other windows in remote meetings
  2. Set a schedule and fit in some chores if time allows
  3. Take breaks away from the screen
  4. Schedule both your and your kids’ days
  5. Be mindful of Slack and social media as a distraction
  6. Use timers to track your own time and help your kids understand the day
  7. Keep your work area separate from where you relax
  8. Pretend that you’re still WFW
  9. Experiment and figure out what works for you
  10. Be prepared with a few activities
    • Each morning, have just ONE thing ready to go. This can be a worksheet you printed out, a coloring station setup, a new bag of kinetic sand you just got delivered from Amazon, a kids dance video on YouTube or an iPad game. Recently I started enlisting my mom to read stories on Facetime. The activity doesn’t have to be new each day but (especially for young kids) it has to be handy for you to start up quickly if your schedule changes
  11. Clearly communicate your availability with your team and project PMs
    • Life happens. Some days are going to be hard. Whatever you do, don’t burn yourself out or leave your team hanging. If you need to move a meeting or take a day off, communicate that as early and as clearly as you can.
  12. Take PTO if you can
    • None of us are superheroes. If you’re feeling overwhelmed- take a look at the next few days and figure out which one makes the most sense for you to take a break.
  13. Take breaks to be alone without doing a task
    • Work and family responsibilities have blended together, there’s almost no room for being alone. If you can find some precious alone time don’t use it to fold laundry or clean the bathroom. Just zone out. I think we all really need this.

Last but not least, enjoy your time at home if you can. This is an unusual circumstance and even though it’s really hard, there are parts that are really great too.

If you have some great WFH tips we’d love to hear about them in the comments!




s

So You've Written a Bad Design Take

So you’ve just written a blog post or tweet about why wireframes are becoming obsolete, the dangers of “too accessible” design, or how a certain style of icon creates “cognitive fatigue.”

Your post went viral, but now you’re getting ratioed by rude people on the Internet. That sucks! You were just trying to start a conversation and you probably didn’t deserve all that negativity (except for you, “too accessible” guy).

Most likely, you made one of these common mistakes:

1. You made generalizations about “design”

You, a good user-centered designer, know that you are not your user. Nor are you every designer.

First of all, let's acknowledge that there is no universal definition of design. Even if we narrow it down to software design, it’s still hard to make generalizations. Agency, in-house, product, startup, enterprise, non-profit, website, app, connected hardware, etc. – there are a lot of different work contexts and cultures for people with “designer” in their titles.

"The Design Industry" is not a thing, but even if it were, you don't speak for it. Don’t assume that the kind of design work you do is the universal default.

2. You didn’t share enough context

There are many great design books and few great design blog posts. (There are, to my knowledge, no great design tweets, but I am open to your suggestions.) Writing about design is not well suited to short formats, because context plays such an important role and there’s always a lot of it to cover.

Writing about your work should include as much context as you would include if you were presenting your portfolio for a job interview. What kind of organization did you work for? Who was your client and/or your stakeholders? What was the goal of the project? Your timeline? What was the makeup of your team? What were the notable business rules and constraints? How are you defining effectiveness and success?

Without these kinds of details, it’s not possible for other designers to know if what you’ve written is credible or applicable to them.

3. You were too certain

A blog post doesn’t need to be a dissertation. It’s okay to share hunches and anecdotes, but give the necessary caveats. And if you're making claims about science, bruh, you gotta cite your sources.

Be humble in your takes. Your account of what worked for you and why is more valuable to your peers than making sweeping claims and reheating the same old arguments. Be prepared to be told you’re wrong, and have the humility to realize that your perspective is just your perspective. Real conversations, like good design, are built on feedback and diverse viewpoints.

Together, we can improve the discourse in our information ecosystems. Don't generalize. Give context. Be humble.




s

Should you use Userbase for your next static site?

During the winter 2020 Pointless Weekend, we built TrailBuddy (working app coming soon). Our team consisted of four developers, two project managers, two front-end developers, a digital-analyst, a UXer, and a designer. In about 48 hours, we took an idea from Jeremy Field’s head to a (mostly) working app. We broke up the project in two parts:. First, a back-end that crunches trail, weather, and soil data. That data is exposed via a GraphQL API for a web app to consume.

While developers built the API, I built a static front end using Next.js. Famously, static front-ends don’t have a database, or a concept of “users.” A bit of functionality I wanted to add was saving favorite trails. I didn’t want to be hacky about it, I needed some way to add users and a database. I knew it’d be hard for the developers to set this up as part of the API, they had their hands full with all the #soil-soil-soil-soil-soil (a slack channel dedicated solely to figuring out our soil data problem—those were plentiful.) I had been looking for an excuse to use Userbase, and this seemed like as good a time as any.

A textbook Userbase use case

“When would I use it?” The Usebase site lists these reasons:

  • If you want to build a web app without writing any backend code.
  • If you never want to see your users' data.
  • If you're tired of dealing with databases.
  • If you want to radically simplify your GDPR compliance.
  • And if you want to keep things really simple.

This was a perfect fit for my problem. I didn’t want to write any more backend code for this. I didn’t want to see our user’s data, I don’t care to know anyone’s favorite trails.* A nice bonus to not having users in our backend was not having to worry about keeping their data safe. We don’t have their data at all, it’s end-to-end encrypted by Userbase. We can offer a reasonable amount of privacy for free (well for the price of using Userbase: $49 a year.) I am not tired of dealing with databases, but I’d rather not. I don’t think anyone doesn’t want to simplify their GDPR compliance. Finally, given our tight timeline I wanted nothing more than to keep things really simple.

A sign up form that I didn't have to write a back-end for

Using Userbase

Userbase can be tried for free, so I set aside thirty minutes or so to do a quick proof of concept to make sure this would work out for us. I made an account and followed their Quickstart. Userbase is a fundamentally easy tool to use, but their quickstart is everything I’d want out of a quickstart:

  • Written in the most vanilla way possible (just HTML and vanilla JS). This means I can adapt it to my needs, in this case React using Next.js
  • Easy to follow, it does the most barebones tour of the functionality you can expect to get out of the SDK (software development kit.) In other words it is quick and it is a start
  • It has a live demo and code samples you can download and run yourself

It didn’t take long after that to integrate Userbase into our app with more help from their great docs. I debated whether to add code samples of what we did here, and I didn’t because any reader would be better off using the great quickstart and docs Userbase provides—they are that clear, and that good. Depending on your use case you’ll need to adapt the examples to your needs, for us the trickiest things were creating a top level authentication context to manage users in the app, and a custom hook to encapsulate all the logic for setting, updating, and deleting favourite trails in the app. Userbase’s SDK worked seamlessly for us.

A log in form that I didn't have to write a back-end for

Is Userbase for you?

Maybe. I am definitely a fan, so much so that this blog post probably reads like an advert. Userbase saved me a ton of time in this project. It reminded me of “The All Powerful Front End Developer” talk by Chris Coyer. I don’t fully subscribe to all the ideas in that talk, but it is nice to have “serverless” tools like Userbase, and all the new JAMstacky things. There are limits to the Userbase serverless experience in terms of scale, and control. Obviously relying on a third party for something always carries some (probably small) risk—it’s worth noting Usebase includes a note on their pricing page that says “You can host it yourself always under your control, or we can run it for you for a full serverless experience”—Still, I wouldn’t hesitate this to use in future projects.

One of the great things about Viget and Pointless Weekend is the opportunity to try new things. For me that was Next.js and Userbase for Trailbuddy. It doesn’t always work out (in fact this is my first pointless weekend where a risk hasn’t blown up in my face) but it is always fun. Getting to try out Userbase and beginning to think about how we may use it in the future made the weekend worthwhile for me, and it made my job on this project much more enjoyable.

*I will write a future post about privacy conscious analytics in TrailBuddy when I’ve figured that out. I am looking into Fathom Analytics for that.



  • Code
  • Front-end Engineering

s

Global Gitignore Files Are Cool and So Are You

Setting it up

First, here's the config setup you need to even allow for such a radical concept.

  1. Define the global gitignore file as a global Git configuration:

    git config --global core.excludesfile ~/.gitignore
    

    If you're on OSX, this command will add the following config lines in your ~/.gitconfig file.

    [core]
      excludesfile = /Users/triplegirldad/.gitignore
    
  2. Load that ~/.gitignore file up with whatever you want. It probably doesn't exist as a file yet so you might have to create it first.

Harnessing its incredible power

There are only two lines in my global gitignore file and they are both fairly useful pretty much all the time.

$ cat ~/.gitignore
TODO.md
playground

This 2 line file means that no matter where I am, what project I'm working on, where in the project I'm doing so, I have an easy space to stash notes, thoughts, in progress ideas, spikes, etc.

TODO.md

More often than not, I'm fiddling around with a TODO.md file. Something about writing markdown in your familiar text editor speaks to my soul. It's quick, it's easy, you have all the text editing tricks available to you, and it never does anything you wouldn't expect (looking at you auto-markdown-formatting editors). I use one or two # for headings, I use nested lists, and I ask for nothing more. Nothing more than more TODO.md files that is!

In practice I tend to just have one TODO.md file per project, right at the top, ready to pull up in a few keystrokes. Which I do often. I pull this doc up if:

  • I'm in a meeting and I just said "oh yeah that's a small thing, I'll knock it out this afternoon".
  • I'm halfway through some feature development and realize I want to make a sweeping refactor elsewhere. Toss some thoughts in the doc, and then get back to the task at hand.
  • It's the end of the day and I have to switch my brain into "feed small children" mode, thus obliterating everything work-related from my short term memory. When I open things up the next day and know exactly what the next thing to dive into was.
  • I'm preparing for a big enough refactor and I can't hold it all in my brain at once. What I'd give to have an interactive 3D playground for brain thoughts, but in the meantime a 2D text file isn't a terrible way to plan out dev work.

playground

Sometimes you need more than some human words in a markdown file to move an idea along. This is where my playground directory comes in. I can load this directory up with code that's related to a given project and keep it out of the git history. Because who doesn't like a place to play around.

I find that this directory is more useful for long running maintenance projects over fast moving greenfield ones. On the maintenance projects, I tend to find myself assembling a pile of scripts and experiments for various situations:

  • The client requests a one-time obscure data export. Whip up some CSV generation code and save that code in the playground directory.
  • The client requests a different obscure data export. Pull up the last time you did something vaguely similar and save yourself the startup time.
  • A batch of data needs to be imported just once. Might as well stash that in the chance that "just once" is actually "just a few times".
  • Kicking the tires on an integration with a third party service.

Some of these playground files end up being useful more times than I can count (eg: the ever-changing user_export.rb script). Some items get promoted into application code, which is always fun. But most files here serve their purpose and then wither away. And that's fine. It's a playground, anything goes.

Wrapping up

Having a personal space for project-specific notes and code has been helpful to me over the years as a developer on multiple projects. If you have your own organizational trick, or just want to brag about how you memorize everything without any markdown files, let me know in the comments below!




s

"I always hated that word—marketing—and I hate it now. Because for me, and this may sound simplistic,..."

““I always hated that word—marketing—and I hate it now. Because for me, and this may sound simplistic, the key to marketing is to make something people want. When they want it, they buy it. When they buy it, you have sales. So the product has to speak. The product is what markets things.””

- Interview with Tom Ford.




s

"What is deceptive, especially in the West, is our assumption that repetitive and mindless jobs are..."

What is deceptive, especially in the West, is our assumption that repetitive and mindless jobs are dehumanizing. On the other hand, the jobs that require us to use the abilities that are uniquely human, we assume to be humanizing. This is not necessarily true. The determining factor is not so much the nature of our jobs, but for whom they serve.

‘Burnout’ is a result of consuming yourself for something other than yourself. You could be burnt out for an abstract concept, ideal, or even nothing (predicament). You end up burning yourself as fuel for something or someone else. This is what feels dehumanizing. In repetitive physical jobs, you could burn out your body for something other than yourself. In creative jobs, you could burn out your soul. Either way, it would be dehumanizing. Completely mindless jobs and incessantly mindful jobs could both be harmful to us.



- Dsyke Suematsu from his white paper discussed at Why Ad People Burn Out.




s

"In conceptual art the idea or concept is the most important aspect of the work. When an artist uses..."

“In conceptual art the idea or concept is the most important aspect of the work. When an artist uses a conceptual form of art, it means that all of the planning and decisions are made beforehand and the execution is a perfunctory affair. The idea becomes a machine that makes the art. This kind of art is not theoretical or illustrative of theories; it is intuitive, it is involved with all types of mental processes and it is purposeless. It is usually free from the dependence on the skill of the artist as a craftsman.”

- Artist Sol Lewitt on conceptual art.




s

Illustrator Tutorial: How to Create an iPhone Icon

Welcome back to another Adobe Illustrator based tutorial, in which we're going to take a close look behind the process of creating a simple iPhone icon, using nothing more than some basic geometric shapes that we're going to adjust here and there. 1. Set Up a New Project File As with any new project, we’re […]

The post Illustrator Tutorial: How to Create an iPhone Icon appeared first on Bittbox.




s

Illustrator Tutorial: How to Create a Simple Computer Icon

In today’s tutorial, we're going to take a close look behind the process of creating a simple computer icon, and see how easy it is to build one of our one using nothing more than some basic geometric shapes. 1. Set Up a New Project File As with any new project, we’re going to kick […]

The post Illustrator Tutorial: How to Create a Simple Computer Icon appeared first on Bittbox.




s

Illustrator Tutorial: How to Create a Folder Icon

In today’s tutorial, we’re going to take an in-depth look behind the process of creating a folder icon, and see how easy it is to build one from scratch using nothing more than a couple of basic geometric shapes, which we’re going to adjust here and there. So, assuming you already have Illustrator up and […]

The post Illustrator Tutorial: How to Create a Folder Icon appeared first on Bittbox.




s

5 Essentials To Create Your Own Website Presence

Only a website that has a well-established presence can stand out on the internet. Business owners and individuals hire web designers like yourself to create website presences for them. In order to prove yourself, you need to establish your own presence online first. Get to the point where you can showcase your own website during […]

The post 5 Essentials To Create Your Own Website Presence appeared first on Bittbox.




s

Illustrator Tutorial: How to Create a Watch Icon

Welcome back to another Illustrator based tutorial, in which we’re going to learn how to create a simple watch icon, using nothing more than a couple of basic geometric shapes and tools. So, assuming you already have the software running in the background, bring it up and let’s jump straight into it! 1. Set Up […]

The post Illustrator Tutorial: How to Create a Watch Icon appeared first on Bittbox.




s

Illustrator Tutorial: How to Create an Icognito Icon

Welcome back to another Illustrator based tutorial, in which we’re going to take a close look behind the process of creating an incognito icon, using nothing more than a couple of simple shapes and tools. So, assuming you already have the software running in the background, bring it up and let’s jump straight into it! […]

The post Illustrator Tutorial: How to Create an Icognito Icon appeared first on Bittbox.




s

Illustrator Tutorial: How to Create an Ice Cream icon

In today’s tutorial, we’re going to take a quick look at the process of creating an Ice Cream icon, and learn how easy it is to build one from scratch using nothing more than a couple of basic geometric shapes that we’re going to adjust here and there. So, assuming you already have the software […]

The post Illustrator Tutorial: How to Create an Ice Cream icon appeared first on Bittbox.




s

Illustrator Tutorial: How to Create a Notification Bell Icon

n today’s tutorial, we’re going to take a quick look behind the process of creating a notification bell icon, and see how easy it is to do so using nothing more than a couple of basic geometric shapes and tools. So, assuming you already have the software up and running, let’s jump straight into it! […]

The post Illustrator Tutorial: How to Create a Notification Bell Icon appeared first on Bittbox.




s

Illustrator Tutorial: How to Create a Recycle Bin Notification Icon

Welcome back to another Illustrator based tutorial, in which we’re going to learn how to create a recycle bin notification icon, using nothing more than a couple of basic geometric shapes that we’re going to adjust here and there. So, assuming you already have the software running in the background, bring it up and let’s […]

The post Illustrator Tutorial: How to Create a Recycle Bin Notification Icon appeared first on Bittbox.




s

The webinar software – how it can help you?

A lot of business owners who want to be leaders in the online world know that being unique is a key to achieve success. Today, this future success is definitely the webinar tools that are more and more popular worldwide. This article will tell more about it and how does the webinar room work before, […]

The post The webinar software – how it can help you? appeared first on Bittbox.




s

The State – Sort of – of HTML5 Audio

The State – Sort of – of HTML5 Audio Scott Schiller discusses the high level of hype around HTML5 and CSS3. The two specs render ”many years of feature hacks redundant by replacing them with native features,” he writes in an insightful blog. Blogging, he says: CSS3’s border-radius, box-shadow, text-shadow and gradients, and HTML5’s <canvas>, Read the rest...




s

The power of intent tag discussed

Google developer advocate Paul Kinlan has detailed his recent work on a lightweight sharing facility using a very simple intent share protocol. Web Intents began life in 2010. Now, Kinlan and company are looking for feedback. Basically, his intent tag is intended to allow users to more easily mix and match favorite plug-in capabilities, freeing Read the rest...




s

A simple random bit on var selector

Isobar’s Rob Larsen suggests that there is often a need to build CSS selectors dynamically when building applications. ”This is typically some existing pattern paired with a loop counter or something pulled from a data attribute,” he writes on his blog. His choice is to create a variable called ”selector” and ”to craft the selector Read the rest...




s

Adobe buys Nitobi

As it kicked off its yearly developer event, Adobe announced that it had acquired Nitobi Software, maker of PhoneGap open source software for cross-platform mobile application building with HTML5 and JavaScript. In a blog, Nitobi CEO Andre Charland pledged to pursue donation of the PhoneGap code to the Apache Software Foundation ”to ensure open stewardship Read the rest...




s

Intel’s Parallel Extensions for JavaScript

Intel’s Parallel Extensions for JavaScript, code named River Trail, hooks into on-chip vector extensions to improve performance of Web applications. Details of Intel’s attempt to get on the JavaScript juggernaut emerged last month at its developer event. The prototype JavaScript extension offered by Intel is intended to allow JavaScript apps to take advantage of modern parallel Read the rest...




s

Adobe to forgo Flash plug-in for mobile devices

Earlier this week, Adobe VP and General Manager Danny Winokur disclosed that the company has concluded that HTML5 is ”the best solution for creating and deploying content in the browser across mobile platforms.” The company said it would stop building Flash to run on mobile browsers. In a blog post on the new focus of Read the rest...




s

Shim uses node.js to test sites on multiple browsers

Shim was developed within the Boston Globe’s media lab as a way to study how Web sites look on various devices and browsers. A laptop intercepts all wifi traffic – this is redirected to a custom node.js server – which inserts a javascript, or “shim,” at the head of each web page that is visited. Read the rest...




s

Winding road of open-source webOS

HP continues to divulge bits and pieces of a road map for the ill-starred and nearly-orphaned webOS. The company has followed up its December plan to release webOS mobile platform and development tools with a proposed timeline, with a full release set before year’s end.  Some people see a life for the associated Enyo JavaScript Read the rest...




s

Node.js – The objective is absolutely fast I/O

Node.js employs an event-driven architecture and a non-blocking I/O model, and it provides some blindingly fast performance to some types of data-intensive Web apps. It is about JavaScript on the server side. LinkedIn, Yahoo and eBay are among ardent Node.js users, and none other than Microsoft has discussed end-to-end JavaScript coverage on its Azure cloud. Read the rest...




s

Rails cache sweeper redux

Michael Mahemoff writes: To be effective, Rails cache sweepers need to be more fully understood.  They know no standard, so you must employ art. He goes on: Sweepers observe both your models and your controllers, but most workarounds focus on their controller nature.  Importantly: the sweeper must be explicitly added as an observer. Even more Read the rest...




s

Vert.x ramblings: Asynchronous network, your time has come

With the debut of Vert.x, the asynchronous framework is reaching an inflection point, suggests Andrew Cholakian. With Vert.x, the software is packaged together in such a way as to be extremely practical, he states. For some JVM zealots, Vert.x may meet needs recently and apparently addressed by node.js. Vert.x is an asynchronous application server – Read the rest...




s

Hello, BinaryJS

The BinaryJS framework employs websockets to handle binary data bidirectionally between browser-side javascript and server-side Node.js. Ikt supports a BinaryPack serialization format that is JSON-type compatible. It is said to automatically chunk large binary data buffers for streaming performance. BinaryJS currently supports Chrome 15+ and Firefox 11+, IE10. View the Hello World example.




s

Windows 8 HTML5 WinRT RSS reader app

WinJS is a JavaScript framework for Windows 8, and David Rousset uses it here to create a quick RSS reader. He shows how in a tutorial series. This first article shows the way to build a welcome screen that employs WinJS ListView control. Blend and CSS3 are employed. The second tutorial shows work on the Read the rest...




s

Fat Fractal enters the BaaS fray

What has sometimes been described as mobile middleware has taken a new tack. Now, the idea of Backend as a Service (BaaS) has begun to take off in the mobile application development space. Proponents of BaaS say it helps developers easily build mobile apps, or any other applications connected to a cloud backend. Some of Read the rest...




s

Here comes Traversty traversing the DOM

The Traversty DOM utility has as its purpose to allow you to traverse the DOM and manage collections of DOM elements. Proponents admit core Traversty traversal methods are inspired by Prototype’s DOM Traversal toolkit, but now in a multi-element environment that is more like jQuery and less like Prototype’s single element implementation.




s

Mobile Proxies: A New Era Dawns

This week, Chrome For Android M26 was announced. It has the literally-awesome ability to record video via `getUserMedia()`, but enough about making Skype irrelevant. What’s even more interesting is the new data compression feature. Which, to be clear, is experimental, has to be switched on, doesn’t apply to secure (SSL) sites, and it’s only running Read the rest...




s

Scaling up CSS

CSS has a habit of creeping up on you. If you’re not careful, your humble stylesheet can go from a few flourishes to a giant maintenance tangle. Before you can say “12-deep nested div”, your in a world of duplication and complexity that prevents you from making timely user-interface updates. [Medium’s](https://medium.com) one organisation that’s been Read the rest...