DEV Community: Ryan Wilson

I’m Going to be WFH Today

Ryan Wilson — Mon, 16 Mar 2020 21:14:07 +0000

Tips & Tricks for being a successful remote employee

Due to recent events, lots of people are now "Work From Home (WFH)". If you have never worked from home for long periods of time, it can feel a little weird at first. You might find yourself easily distracted by the TV, streaming services, chores, or your bed might be calling your name. Working from home can be a great experience - start with little changes to get comfortable. I want to share some of the things that have helped me in being a full-time remote employee for Bitovi for the past four years.

Be Productive

This requires focus (which may require more coffee). If you are the type of person who gets easily distracted, or if the task you are working on isn’t one that you really want to be doing, you need to start by stepping up your attention game. There are many ways to help to remove distractions from your working space – my coworker Jennifer covers some automated options here – I like the StayFocusd extension to blacklist the distracting sites and apps that are the biggest time-sucks.

Remove distractions, image from giphy.com

Set Aside Space

One of the first things I did when I got my remote job was to create a space for me to do my work. This seems obvious, but you’d be surprised how easy it is to get distracted when you don’t have a designated workspace. Think of it like this – at an office job you have your desk where you do your work. Having your own space to do work at home helps you to get into the “work time” mindset. This doesn’t mean you can’t float around your house to add some variety to your day. However working from your bed can lead to being less productive (not to mention unprofessional looking meetings).

Set up a new work space, image from pexels.com

Have a Routine

When I first started working from home, a friend of mine suggested wearing a tie to signify that it was work time. I like the point of the suggestion; put yourself in the mindspace of “work”. Keep your daily routines to help get yourself into the headspace to do your work. Get up in the morning, shower, get dressed, eat breakfast, etc – whatever you would normally do on a day that you would leave for work, and then go sit at your designated workspace and kick off your day.

Get the Tech

The absolute worst part of any video call is when someone on the call has a crappy set of headphones where their microphone cuts in and out. Or, even worse, someone is using their computer microphone and it causes everyone to hear echo and feedback. Buy a nice set of headphones with a good microphone – it will help to make everyone’s day better. [ I recommend these Bose wired headphones (wired? Yeah, no one wants to wait in a meeting for your headphones to connect ;)]

Additionally, when you start working from home, that is the time to bump up your home internet connection. This will help with laggy screen sharing and choppy video calls. If you have good internet speeds and you still have these issues, you probably need to invest in a mesh wifi network for your home. I have 300 Mbps internet, but at my desk I was getting 9Mbps because of all the walls between my router and my desk. As soon as I set up my mesh wifi, I was getting 250 Mbps at my desk.

Mesh wifi, image from pexels.com

Do Meetings Right

Distractions hurt production, so meetings for the sake of meetings really hurt productivity. If a meeting can be an email or Slack message with a thread, go for written over getting bodies in virtual rooms every time. When you do need to have video-face-to-video-face meetings, keep them short and on top topic to be respectful of everyone’s time.

I hate Mondays, image from dilbert.com

Successful meetings are done over video where you can see everyone.

Step one, make sure you are wearing clothes (I could stop here) that represent you and your company well. I keep a button down close to my desk that I can toss over a t-shirt if there is an impromptu client meeting.

Step two, turn your camera on for the entire meeting so everyone can see you. This practice will make you more memorable and recognizable. If you are working on things that are visual, share your screen while you are talking (show & tell).

Step three, master your mute button – no one else wants to hear you typing (or worse, slurping your coffee into the microphone) while someone else is talking. Stay muted until it is your time to talk.

Over Communicate

When working from home it is easy for you to fall off the map for your other coworkers. Reach out to say hi to your office friends on Slack. Check-in with your team and client regularly. Be clear in your written communication and remember that sarcasm does not work well in text (winky face emoji). A couple years ago, a coworker and I started a Slack channel #coffee-break for when you need the time to still stay work-centered, but want to have some interpersonal watercooler chat with your work friends.

Slack channel #coffee-break

Keep Documentation/Feel Confident

One of the biggest issues that I have found among my colleagues with remote work is the concern that the perception is that they are not “working hard”. When you are at an office, managers can see butts in seats, they can drop in a check on timelines, etc. When working from home, no one is looking over your shoulder. I’ve found that this causes me to overwork myself to show that I’ve been working hard enough. Do not fall into this trap, there is no escape.

At Bitovi, we do a daily stand up – teams do it either as a short, succinct video call or as a brief update in a Slack thread. In either medium keep it short (this is not a place for solving problems, schedule those meetings after stand up):

Teams text stand up channel

Wrap Up

Working from home can be a great experience if you approach it with the right mindset. Choose one or two tips and focus on getting good at those first. Remember, it is a constant evolution to determine what works best for you.

Yes, no one is around to watch you now. It is more difficult for someone to drop in at your desk. This is your time to choose if you are going to succeed as a remote employee, or leave a lasting impression as the coworker in sweatpants who played video games while on the clock.

–––––

At Bitovi, we're a remote-first company. We pride ourselves on being technical experts, as well as experts in communicating, coaching, and mentoring in remote environments, and we have a history of successful projects to prove it. We love all things JavaScript, UX, front-end, and DevOps: if your team needs help in a remote capacity with getting a new project out the door, mentoring and coaching on best practices, or adding expertise and velocity to your team, please reach out!

Creating an SVG Icon Typeface

Ryan Wilson — Thu, 15 Aug 2019 19:35:57 +0000

Icons are used in applications, websites, marketing materials, you name it. They communicate complex topics, create visual interest, punctuate topics, and draw user focus. One of the easiest things to do to ensure that icons are used correctly across applications is to create and share an icon typeface. These icons can then be added to documents on a computer as a font, or used in your stylesheet to display the icons online or in an application.

Creating Your Icons

The first step is to create your icons. I prefer to start by sketching on paper and pencil to flesh out ideas. Once you have your concept(s), open your favorite vector design program. If this is a single icon or avatar, your Artboard size doesn't really matter, but remember vector is infinitely scalable, so you just need to hit the size that isn't too small and isn't too big.

I have created example files for these icons if you would like to download and follow along:

Demo files: IconSketch File | Icon Illustrator File

If you are creating a set of icons that are meant to have similarity and work together, it is important that all of your Artboards are the same size. For a uniform icon set:

Use a square Artboard
Consider designing your icons based on a grid so they have a similarity (this is the grid I used in the demo )
Find a stroke size that works at small and large sizes
If your icon is going to be single-color, set it to solid black in your design program. This can be modified in app, or in stylesheet to the appropriate color
Outline strokes and text

Demo files: Raw SVGs

If you have grouped layers, circles, or ellipses you should convert them to compound paths. This will simplify your SVGs, gaining both smaller file sizes and ensuring that they display correctly across multiple platforms.

TIP: There is more detail on these items and more in my Best Practices for Working with SVGs post.

In the demo file you can see the similarity between the arc of the line on the banana, the monkey's smile, and the smile and frown of the suns. The similarity is also carried over with the placement of design assets where they cross the grid, and also where the bezier curve handles hit. The sun icons have been included to demonstrate what happens with multi-color icons when creating an SVG icon.

Creating Your Icon Typeface

Add ID Tags

Once your icons are complete, export and optimize your icons as SVG format. After you have optimized your SVGs, open the files in a code editor and add a unique ID tag to each SVG tag.

Demo files: Optimized SVGs

Choosing a Generator

Creating a typeface is much easier than it might sound and doesn't require expensive font building programs. There are lots of free online font generator options to choose from. These are the two I regularly use with clients: fontello.com | icomoon.io Both generators offer the same basic service; choose icons from existing sets or upload your own, and generate your icon typeface as the standard system fonts that are also used on the web. Both have their own shortcomings, which I will discuss below; it is because of these shortcomings that we use one generator or the other depending on the needs of the project.

Importing Your Icons

Once you have chosen your online font generator, you are going to want to import your SVG icons to the generator. Some require creating and naming a new project, others jump right in to uploading your icons.

TIP: There are some shortcomings (discussed in this article) of each that I demo here, so make sure you know your design requirements before making a typeface generator choice.

Make sure your icon set looks good at small, medium, and large sizes using the generators preview options – some generators display larger sizes than other. If something doesn't look right, go back to your editing application and make adjustments to your icon, export, optimize, and replace the SVG in the font generator. You will notice in the image below, Fontello stripped the color of our multi-color icons. This is a shortcoming of using Fontello; I have an issue out for this, hopefully it will be resolved soon.

TIP: If your artboards are all the same size, your icons are aligned on the artboard correctly, this will reduce any issues with icons not looking as intended in the font generator.

Setting Up Your Download

Once your icon set looks good, you are almost ready to download your typeface. Each generator does this a little differently. Make sure to name your typeface and add a class prefix if needed. This is also when you can change the Unicode hex code.

Tip: Adding keywords to each of the icons in your set will help you and others find icons easier, especially if you have a large icon set. Be descriptive. You can separate names with a comma, like banana, fruit, plantain.

Tip: Unless you are replacing an existing icon typeface, don't worry about changing your Unicode Hex values.

Encoding and embedding is automatic in Fontello. There is an option to encode and embed your font in CSS in Icomoon, but that is only included with a premium account. This is a shortcoming of Icomoon. Encoding your typeface will output a DataURL for your typeface giving you the option to BASE64 embed your typeface. You will want to generate at least .ttf, .eot, .woff, .woff2, and .eot font files if not also BASE64 encoding.

Tip: Embedding a DataURL in your @font-face rule is a trade off – you reduce DOM requests, but add more data to your stylesheet. If your stylesheet file that contains the BASE64 DataURL changes a lot, you pay that data cost more.

Downloading Your Icon Typeface

Download and open the stylesheet file (most likely named styles.css or the name you gave to your typeface .css) , copy and paste the @font-face declaration, icon declarations, and font smoothing into your project CSS and move any associated typeface files (.ttf, .eot, .woff, .woff2, and .eot) to the appropriate folder. It depends what what typeface files you reference on how backwards facing you want your browser support to be. CSS-Tricks has a great article on that if you are interested: CSS-Tricks – Using @font-face

Tip: Retain a copy of the .json file included in your download. You can use this file to quickly re-create your icon typeface in the font generator you originally used to create the typeface. Also, keep the SVG files for the individual icons as a backup in case you need to modify an icon later.

Using your Icon Typeface

Now you can reference the class for your icon within your markup based on the classes created by the generator:
-or-

Tip: Semantically, there is a difference between the <i> tag and the <span> tag. Technically, in HTML, <i> stands for 'italic', but many font generators and icon sets like fontawesome.com use it as a shorthand for 'icon', but you might have that tag defined differently, so it is better (and best practice) to use <span>.

Demo files: IcoMoon Generated Typeface | Fontello Generated Typeface

Installing Locally & Sharing Your Typeface

This step is optional, but helpful if you are creating mockups and prototypes for your design – Install the .ttffile on your computer to use your new icon typeface in any application, even word processing applications. This font file can be shared with other people in your company to do the same as well.

Tip: When testing your website, it is best to disable this typeface on your computer so you can test if your icon typeface is loading correctly as anyone without the typeface installed would see it. If you can't see it, the client can't either: check the path to your icon typeface files, or if using in a online prototyping application like Axure or Sketch, you will need to embed the typeface within that program.

Closing

Creating an icon typeface is a simple and easy solution for using and sharing your product or company icon set. If you are interested in learning more about the sketching process, please check out my article Finding Ideas Through Sketching. If you are interested in learning more about creating optimized SVGs please check out my article Best Practices for Working with SVGs
.