DEV Community: Carly Ho 🌈

Tech, Bread, and Roses🌹

Carly Ho 🌈 — Fri, 08 Mar 2019 17:52:40 +0000

There’s a lot that’s been said about surviving the early stages of a career as an underrepresented minority in tech. We think a great deal about how to get through, tell our stories of triumph over adversity. We tell each other to put our own oxygen mask on first, before assisting others.

We don’t so much talk about what you do when you’re ready to help others.

I’m not just talking about getting more women and gender minorities into code via mentorship, or volunteering with women in tech orgs—which is still essential. For more kinds of people to succeed—and for us to create balance for better—we need to create systems that will lift them up.

Learning to code is just one part of building a solid career. You can be the best programmer in the world, but without sufficient compensation, adequate healthcare benefits, access to parental leave, time to relax and lead a personal life, and the ability to feel safe in the workplace, you won't get very far. Stress takes its toll. Those of us of any gender at the senior level know that our voices carry weight, and we have a responsibility to advocate for both our co-workers, and the rest of the workers in the industry.

Creating comfortable lives for those who work in our industry—whether they're programmers, project managers, designers, administrative staff, or housekeepers—certainly can be said to be beneficial from a financial standpoint. I don't think it would surprise anyone to hear that happy employees mean better productivity and quality of work. However, it's my firm belief that those in positions of leadership have an ethical imperative to improve the standard of living for those around them.

If you're senior level or above, do you know if your company has:

A clear and public policy on harrassment?
A good healthcare plan for all employees that includes mental health care?
LGBTQ-inclusive healthcare, including transition care and fertility treatment?
Public salary information?
A clear understanding of nonbinary pronouns and what constitutes misgendering?
Parental leave for all genders?
Adequate work/life balance for all employees?
A continuing education budget available to all employees?
Equal access to restrooms, including gender-neutral ones?
A flexible work-from-home policy?

If it doesn't, find out who has power to implement those things, and bring it up and don't stop bringing it up to them. There is a bit of "if you build it, they will come" to diversity; even if you have the numbers, there'll still be turnover if employees don't feel supported in their day-to-day life.

Furthermore, as leaders in technology, we have responsibility to make sure that what we create will help bring balance for better. Stories abound of apps that don't properly recognize facial features on dark-skinned people, internet-connected devices being used for emotional terrorism by abusers, and sensitive information being leaked to untrustworthy entities. We have the ability to make sure that tech is both used to include, and also that it isn't used to exclude or make people unsafe.

"Computing professionals’ actions change the world," the Association for Computing Machinery's code of ethics begins. "To act responsibly, they should reflect upon the wider impacts of their work, consistently supporting the public good." This will rarely be found in a job description—but, it is our job regardless.

No more the drudge and idler / ten that toil, for one reposes / but a sharing of life's glories / bread and roses, bread and roses.

#bestofdev on Inclusion

Carly Ho 🌈 — Thu, 08 Nov 2018 06:15:45 +0000

Dev.to has become a great home for diversity, equity and inclusion content related to the tech industry, including this year's great #shecoded/#theycoded series for International Women's Day. It's spread out across a lot of tags, though, so with the help of the dev.to admins, we're working to make it a nice, fancy tag home under #inclusion.

We (Carly, Fen, and Jess) are three developer friends who care a lot about Diversity, Equity and Inclusion (DEI) and work to drive it as part of our day jobs as well as through meetups and online organizing. Today, we've put together a quick round-up of some of our favorite DEI-related articles on Dev.to so far!

Britain in the 70s killed its tech industry because of sexism

rhymes ・ Sep 25 '18

#discuss #womenintech #technology

Article No Longer Available

On lowering the bar

Massimo Artizzu ・ Aug 25 '17

#diversity #hiringprocess #inclusion #damoresmanifesto

What could be better than pizza and beer? Why you need to provide more inclusive food at your tech event.

joe larson ・ Jun 19 '17

#food #events #tech #inclusion

A.I is very biased and we should stop it

Uchi Uchibeke ・ Sep 19 '18

#ai #machinelearning #diversity #womenintech

Those are some of our favorites! What are yours? (From here or elsewhere!) Are there any DEI topics you wish there was more written about?

#AdventOfCode: What language are you using?

Carly Ho 🌈 — Tue, 06 Nov 2018 19:22:18 +0000

Advent of Code is a December code challenge, with code puzzles running from the first through Christmas, put together by Eric Wastl. I completed it last year, and I know a lot of folks here have done it in the past!

I did Python last year, but I was considering choosing something I'm less familiar with this year (something in the set of Go, Haskell, Rust, Elixir, maybe). As we're coming up on AoC 2018, does anyone else planning to participate have their language picked out for this year?

Let’s make life easier for autistic folks at work!

Carly Ho 🌈 — Tue, 09 Oct 2018 19:25:15 +0000

About Me

My name’s Carly Ho, and I’m a Senior Engineer at Clique Studios in Chicago; I’m also an autistic adult. I was diagnosed during college as part of getting help for my executive function problems. I sometimes have difficulty with getting overwhelmed by sounds, often find eye contact incredibly uncomfortable, and can get really fidgety in long meetings if I’m not actively engaged somehow.

I’ve made it to a place I’m pretty happy with, career-wise, but it’s not all been smooth sailing, and over the course of my years in tech I’ve learned a lot of things about myself and the environments I work best in. To pay it forward, I wanted to put together some information to help make more workplaces a comfortable place for autistic folks.

Some Terminology: What is autism?

Autism is hard to pin down, since its markers exist on a spectrum. Autistic people “may communicate, interact, behave, and learn in ways that are different from most other people,” in the words of the CDC, but “there is often nothing about how people with ASD [Autism Spectrum Disorders] look that sets them apart from other people.”

The differences in how autistics communicate and perceive the world often cause them (us!) social and behavioral challenges in understanding and being understood. While there are no hard limitations on what autistic people are capable of, the way society is structured can make many things significantly more challenging.

While “person-first” terminology is recommended for referring to people with disabilities, many autistics prefer identity language (“autistic” versus “person with autism”). This doesn’t cover 100% of the autistic community, so it’s always good to double-check with people who have a personal stake in it.

“Neuroatypical” is also a way to refer to people with neurological differences, often specifically referring to autism, but sometimes also other neurological conditions and developmental disorders. (“Neurotypical” being the inverse.)

How are work environments stressful for neuroatypical folks? And how can we fix it?

There's a lot of things in the workplace—and particularly in the tech workplace—that can be a struggle for autistic folks to handle. While tech has long been considered something of a career refuge for autistic people in that it's more acceptable to stay heads-down programming most of the day and not socialize much, that's not how all autistic people prefer to work, and there are still a lot of hurdles.

A lot of this advice is also what in accessibility is called a "curb cut" effect—while it's helpful for autistic folks, they're also things that might help people with other neurological conditions, or even neurotypical employees.

Interpersonal Communication

Communication is often a struggle for autistic folks. Some are entirely nonverbal, and others can talk but struggle to express themselves or read tone from others in spoken communication. As a result, many autistics prefer email or chat programs for communication, where they can consider their words more carefully, and where emojis and parentheticals can clarify emotional tone.

Furthermore, communication in general can be stressful; social anxiety is a frequent companion of autism due to the fact that autistic people go through a lot of uncertainty in social situations. If you’re sending someone a message, even if it’s just friendly conversation, lead with your intent; open-ended messages can stress people out, since they don’t know if it’s bad news, a request, or just chatter.

Try and get to know how individuals like to receive communication and feedback. I know some people (including me!) have “readme” files about how they prefer to communicate at work. If your organization hosts events, consider also having color-coded badges at events to allow people to set their own level of engagement.

Noise and External Stimuli

Many autistics have difficulty with various forms of sensory processing. Noise is the most common office hazard out of all of those—open office environments, which are ubiquitous in tech, often come with noise and distractions that can make it even more difficult for autistic employees to work, since autism can make it harder to filter out distracting noise.

Try and have an emcee or event leader keep cross-talk/multi-directional noise to a minimum at events for people who have sensory overload problems, and provide rooms in the office for people to take phone calls and have conversations away from desks. If you have an open-office environment, consider subsidizing noise-cancelling headphone purchases. It can also be nice to have work events in quieter settings than the usual venues of restaurants or bars.

Long Meetings and Stimming

Many autistic people have difficulty maintaining focus through long meetings. The expression of autism can sometimes overlap with that of ADHD—fidgeting and poor attention span. A lot of autistic people feel most comfortable when allowed to engage in stimming, which often involves some kind of repetitive movement. Doing this generally helps autistic people maintain a sense of calm and focus, but can be misconstrued as being inattentive or disruptive.

Autistic adults in the workplace generally know how to regulate their own behavior in a way such that it's not attention-grabbing. However, specifically allowing people at meetings to do other things to occupy their hands and not necessarily sit completely still as long as they're engaged is something that might help autistic employees feel more comfortable in knowing that their behavior won't be interpreted as disengagement.

If it's necessary to have long meetings or education sessions, consider building in things that invite attendees to participate and have stretch breaks.

Dealing with priority and schedule changes

A common feature of autism is difficulty with executive function—which is to say, organization and successfully executing all the steps to complete a task. It can sometimes interfere with memory, planning, and time management, among other things. Autistic adults in the workplace generally have some measure of executive function, but will sometimes need different accommodations than neurotypical employees.

Let folks know about schedule changes and plan changes with as much lead time as possible. This is polite, but also helps autistic co-workers re-plan their time.

If you can, make requests or tasks in written form in addition to verbally so that there’s a reference able record. Also, try to be specific as possible about priority of tasks if there’s a distinct order; what may seem obvious to you might not to others.

And above all else…

Include neuroatypical folks in your diverse hiring efforts, and listen to them about what accommodations they need. The saying goes that “if you’ve met one autistic person, you’ve met one autistic person,” and it holds true for a lot of other types of neuroatypicality. Different neuroatypical folks have very different skills, needs, and difficulties, but we also tend to have a good handle on what will help us best if you make it clear that it’s possible to be accommodated.

What helps you?

Readers at home: those of you who are autistic or neuroatypical, what challenges do you find in the office? What accommodations and strategies do you find helpful?

What's in a name (validation)?

Carly Ho 🌈 — Mon, 08 Oct 2018 18:56:02 +0000

This article was adapted from my talk at AlterConf Chicago 2017, which has also been adapted into a handy zine version!

Validating Names

Let’s talk about names!

See how my name’s right at the top of this thing? Names are generally one of the first things we ask for and one of the first things we offer in conversation as part of getting to know someone.

Names are also a pretty personal thing. It’s one thing to dislike your own name for your own reasons, but having someone else mangle your name can range from annoying to genuinely hurtful. So, it’s important to think about how we validate names as we work to create more inclusive technology.

So names are pretty important information. However: names can take a lot of forms, and it's hard to account for all of them. If we want to build validation into our forms, how do we validate names? Can we?

What is a name?

What are things that you’ve seen forms assume about how a name should be formatted?

Some assumptions:

Everyone has one first name and one last name.
Everyone has one first name and two last names!
A name has a minimum of three characters. - you'd be surprised how often this comes up. Hilariously some of them accept "Ho!" and not "Ho"
A given name comes first, and a family name comes last.
Names are composed of letters.
Names are composed of letters from the Latin alphabet, or can be losslessly translated into letters from the Latin alphabet.
Names don't change, or only change at a few very specific points in time.
Everyone has one canonical full name.

These are all actually wrong! As it turns out, basically all assumptions you can make about names are wrong.

So what IS a name, actually?

What people take for granted as being a "name" anywhere is not true in the majority of other places—and even within their own country.

In the USA, we still often assume western euro norms

While the USA is extremely diverse, there still tends to be a lot of expectation that names conform to a certain "Americanized" standard

This goes back to way before web forms--immigrants did and still do often adopt more "American" names in hopes that assimilating would lead to more opportunity. People with names that don't sound European even today often find themselves marked as perpetual foreigners, even when they were born here, and their parents were born here, and so on.

These expectations, when extended to web forms, both are really obnoxious and do cause problems. I actually was looking into pitching a different talk to another conference earlier this year, but it turned out their form validated names to be a minimum of three characters. To their credit, they were very graceful and fixed the problem after I let them know, but it's possible other people just gave up. (Hilariously, I have occasionally gotten around forms set up like that by adding an exclamation point.)

Names: a way to refer to someone.

That's pretty much it. It's very difficult to define a name as anything other than this very basic, very vague thing, without any incorrect premises.

Sorry, there's no good way to validate them!

So what can you do?

So, okay. Names are nigh-impossible to pin down, but you want to make sure you have data that's useful and serves the intended purpose. What can you do about that?

What do you need the name for?

So, when we're gathering name information via a web form, the point of a validation is not actually to figure out what is and isn't a name; the point is actually to get the information we need to use elsewhere. Sometimes we just want to be able to greet a user in emails or on their dashboard, sometimes we need it to respond to a personal communication, sometimes we need to know what to put on a packing label, and so on.

Do you need to ID them by name?

Do you really need to identify a user by a name? If the information isn't used in any way other than cosmetically, and you have other ways of identifying a user uniquely, such as email, you might be able to just drop it.

Do you need to separate first name/last name?

If there's never any reason for you to need only the given name or names, or only the surname or surnames, you can replace first name/last name with a single full name field. That way people can enter their name in a way that feels right to them.

Do you only need one part of a name?

Like, just the personal name, or just the surname(s)? If so, consider collecting only that data, and labeling it in a way that makes sense to users from any cultural context, such as: "How should we address you?" "What's your full formal title?" or something similar.

Let the user help you by telling them what you'll use the name for

If a user knows you want a name for how to address them in emails, or for addressing a petition to a Congressperson, or to mail them a package, that's useful context that will help the user enter information that's helpful to both of you.

If you know, for example, that some of your users have multiple names that they go by (e.g., some people adopt an "English" given name on immigrating, or to do business with English-speakers, but retain a different legal name), your form might need to ask for both of those names if you anticipate situations where both are needed.

Don't assume which part is the surname/family name

Some people have multiple given names, multiple surnames, or additional name parts that signify gender, generation, marital status or religious identity, among other things.

The world is also not uniform on whether the given name or the family name is written first. For example, many people with Spanish names coming to the United States encounter the issue that only their second family name gets read as their "real" surname, whereas in most Spanish-speaking countries the first one is generally the emphasized one.

Make sure your ui accommodates both long + short names

Twitter, for example, only allows a 16-character display name, which is not much! While it means they don't have to adjust their placement of items in their UI, it means that a large number of people can't enter their whole name on Twitter.

Compassionate Validation

Your system might not be able to process all possible names

Some systems are old, and have limited ability to be changed to accommodate larger character sets, spaces, punctuation, etc. due to the size or sensitivity of the data. That's understandable. I think we're all familiar with airline systems, for example, which stubbornly refuse to process hyphens and tend to squeeze out spaces.

Don't position it as a problem with the user's name

If you can't process a name as-entered in your system, don't position it as a problem with the user's name.

John Graham-Cumming wrote in a 2010 blog post about encountering this issue: "What they actually meant is: our web site will not accept that hyphen in your last name. But do they say that? No, of course not. They decide to shove in my face the claim that there's something wrong with my name." If it's their name, it can't be invalid.

Admit the system limitation in validations + work to improve

The best thing you can do is admit the system limitations in your validation messages (Graham-Cumming suggests "Our system is unable to process last names that contain non-letters, please replace them with spaces", for example) and continue to work on any improvements you can make so that more names can be correctly processed.

How to Get Into Mastodon

Carly Ho 🌈 — Tue, 02 Oct 2018 04:43:09 +0000

Maybe you’ve heard of the newish social network Mastodon, or maybe you haven’t, but between Facebook’s repeat mishandling of data and Twitter’s general toxicity, maybe you’re looking for a new way to keep in touch with your friends and professional networks! Here's a quick guide on how to get started.

What is Mastodon?

Mastodon is a social network similar to Twitter in format, where users post statuses that can be seen in a stream, and can follow each others’ updates. The default layout on the web is similar to Tweetdeck, in fact! The main difference is that Mastodon is a distributed system broken into instances that anyone can host.

Mastodon also has some nice extra features; posts can go up to 500 characters by default, rather than Twitter’s 280 (and some instances set their limit even higher). You can also control the privacy of specific tweets (only to who you’re following, or only to specific users) and set content warnings for your posts. Some instances also have even stricter codes of conduct and limitations on what content is allowed, if you don’t want to deal with spam or adult content.

Mastodon isn’t so different from other parts of the internet, but it has its own variations on a lot of social media terms:

Toots = tweets, statuses
Boost = retweet
Fediverse = a collection of servers used for web publishing that work by an agreed-upon standard. Mastodon is a Fediverse.
Favorite = like
Locked account = private account

Instances, and Picking Yours

The original Mastodon instance is mastodon.social, but you can search the whole list of instances at instances.social or on the Mastodon informational website. Instances are sometimes themed and have a particular culture to them; there are some targeted at artists, some for tech, some that are for posting selfies or birds only, some just for running mastodon bots.

You’ll probably be fine on a general instance such as mastodon.cloud if you don’t have a particular preference, since you can follow anyone on any Mastodon instance. Your instance matters for two things: your full username/URL (so if you want to be @yourname@webdev.network, sign up on webdev.network), and who shows up in what’s called the “Local Timeline,” which is a stream of all posts on that instance. The “Federated Timeline” shows all posts across all instances, apart from any that your instance has blocked.

Before you sign up on any one instance, consider clicking around to look at what instances exist, whether they’re open for new signups (some instances have a user cap or are invite-only) and if you like their vibe and the content available in their public timeline! You don’t need to make friends with everyone in your instance, but it’s good to get a feel for the culture. It’s also good to look at their stats for how many users they have and how many statuses have been posted on that instance; depending on how you want to use Mastodon, you may prefer a smaller, quieter instance, or a larger and more talkative one.

Signing Up and Setting Up Your Account

Once you’ve picked an instance, sign up! If an instance is open for signups, you’ll usually find it in the left-hand sidebar on the front page.

Logged in, you’ll see a column for typing statuses, one for your timeline, one for your notifications, and one where you can open your local or federated timelines, or view your direct messages, favorites or lists.

Above the status box, you’ll see a search bar, and then above that a gear icon, which is where you can manage your account settings.

Edit Profile contains some controls for the look of your profile; you can edit your display name and bio, as well as add a profile image and header just like on Twitter. You can also choose to lock your account here, which will require followers to be approved by you, which is useful if you plan to make tweets private to followers. You can also enter up to 4 items of custom metadata for your profile, which you can use to display things like your website or pronouns.

Profile metadata entry fields

Preferences contains a number of settings for how you read and write on Mastodon, including selecting what language you’d like for the interface, and what languages to show in your timelines. This can be helpful for filtering out content you can’t read from the Local and Federated Timelines. Preferences also contains settings for hiding your posts from the Local/Federated timelines if you don’t want to be findable that way, and opt out of search engine indexing. You can also control what content to hide or display by default from here.

Your account-level privacy settings

A lot of the other settings sections are pretty straightforward, though worth exploring since they give you some other useful privacy controls. Authorized followers in particular is useful if you’re a locked account; this is where you can set your list of who can see your posts.

You’ll also want to look into Filters, which is under Settings; it allows you to filter out certain keyword content from any or all of your timelines, which is great if there’s a topic in the news you’d prefer not to see or if all your friends are really into a TV show you’re not into.

Writing a Toot

It’s time to write your first toot if you haven’t already! You have up to 500 characters, unless your instance allows more. If you’d like to add images, click the icon of a camera. The globe icon allows you to adjust the privacy of your status; you can make any individual toot unlisted from public timelines, or post to your followers only. You can also just send a toot to specific users, like a direct message on Twitter.

Your post privacy options, which override your account post privacy settings

The other tool you have in writing toots on Mastodon is content warnings; you can manage them under the “CW” icon. If your toot contains sensitive content or a common phobia, you can label why you’re hiding your content with a warning, and then put the actual content underneath. Some Mastodon users also use this to tell jokes—they write the setup in the “warning” field and the punchline in the status box.

An example of posting a toot with a content warning

Then hit the Toot! button! That’s it, you’re live on Mastodon!

Finding People to Follow

If you’re looking to see who you already know that’s on Mastodon, you can use Mastodon Bridge, which lets users connect their Twitter and Mastodon accounts so their followers on either platform can find their account on the other. You can also opt to add your information to the database so that people can look you up on Mastodon as well!

Apart from already knowing people, the primary way to find people to follow is looking at your Local and Federated timelines to see what people are posting and following folks who look interesting. Many people will also add hashtags of things they like to post about to their profile to make them easy to search for, if you’re looking for people into the same topics!

Crossposting To and From Twitter

If you want to still post content for your followers on Twitter but start ramping up your Mastodon presence, you can log in with both your Twitter and Mastodon accounts on the Twitter-Mastodon Crossposter, which will automatically crosspost in either direction, with the option to include retweets/boosts, replies, mentions, etc.

Multiple Accounts?

As mentioned above, you can follow anyone on any mastodon instance from one account, so if you’d like to follow someone on birb.site when you’re on witches.live, there’s no need to create a birb.site account. You can also create curated lists of users, just like on Twitter, if you want to see a feed of just people you follow for tabletop gaming, or music, or people you know IRL. However, there are definitely reasons you might want to create more than one account:

Maintaining an account for a particular type of professional content (art, web development, etc) without getting your personal talk mixed in there
Participating in an instance for posting a specific kind of content (bird pictures, selfies, etc)
Managing an account for an organization, meetup group, or company
Creating bots for Mastodon

For most of those cases, I’d suggest setting up accounts on different Mastodon instances; there isn’t a whole lot of support for being logged into two accounts on one Mastodon instance like Tweetdeck provides for Twitter, but you can keep two instances open in two separate tabs, and some mobile Mastodon clients allow you to be logged into multiple instances.

If you want to switch to using a different account (even one on a different instance!), you can find a setting to redirect your account under Edit Profile in your settings.

Running Your Own Mastodon Instance

You might consider running your own Mastodon instance if you want really fine control over some instance-wide settings, if you want to fill a niche that isn’t already present, or if you want to have an instance that’s curated to a specific group of people, such as family or friends.

An easy way to run your own is to use masto.host, which will manage a Mastodon instance for you. You can also run one off of your own server, if you have one and want to control your hosting. The resources Mastodon requires generally are related to how many users the instance has, which is why many instances have user caps or are invite-only. If you’re interested, you can find more info about running your own instance here.

Follow me on Mastodon!

My ulterior motive in writing this is to get more folks on Mastodon so I can hang out with them! You can find me at carly@kitty.town.

Dynamically Sizing Text for a Tag Cloud Effect

Carly Ho 🌈 — Wed, 16 May 2018 06:28:10 +0000

It's common to see data presented in a tag cloud format—which is to say, a chunk of keywords or terms displayed inline, with each term sized to show its relative importance or frequency out of all the existing terms.

A lot of times we see these tag clouds built into content management systems or generated via plugins, but how do we make something like this if we want to do it from scratch? In this tutorial I'll walk through how I built this feature for my own website, to display the relative amounts of time I've worked with different technologies.

Setting up

I tried to keep the markup pretty simple:

<ul>
  <li data-year="2001">HTML</li>
  <li data-year="2002">CSS</li>
  <li data-year="2003">PHP</li>
  <li data-year="2010">Javascript</li>
  <li data-year="2012">Ruby</li>
  <li data-year="2010">Python</li>
  <li data-year="2017">Node.js</li>
  <li data-year="2010">MySQL</li>
</ul>

It's a simple unordered list. The only thing here that's special is that each <li> has a data-attribute, data-year, which denotes the year I started working with that particular technology. If you were creating a tag cloud for the number of articles with a given tag on your blog, you might instead call the data-attribute data-count, and set it to the number of articles with that tag.

Moving on to the styles, again keeping it pretty simple. Mostly I stripped out the default formatting, aligned the content to the center, and set list-items to display: inline-block so they coalesce into one block of text.

ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

ul li {
  margin: 0 5px;
  display: inline-block;
  vertical-align: middle;
}

The Scripting

First, let's wrap everything in an event handler for the window's load event, just to make sure everything's in place before we start applying our font-sizing. I'm using a bit of jQuery here to speed the process along, but there's no reason you couldn't do it in vanilla Javascript.

$(window).on('load', function() {
  //...
});

If your font sizes change at certain screen size breakpoints, you may also want to re-trigger this on resize as well as load.

Now that we've got that done, we need to get the range of numbers represented in our tag cloud.

  var nums = $('ul li').map(function() {
    return parseInt($(this).data('year'));
  }).get();

  var maxVal = Math.max(...nums);
  var minVal = Math.min(...nums);

The map function iterates over every list item and returns the value of the data-year attribute, parsed as an integer; the .get() method formats the output into an array.

We then pass the numbers into Javascript's Math.max and Math.min functions to get the largest and smallest values, respectively. (nums preceded by the ... to denote that it should be read as an array.)

Now, we'll calculate the sizing for the fonts.

  var currentDate = new Date();
  var currentYear = currentDate.getFullYear();
  var baseFont = $('ul li').css("font-size");
  var fontsplit = baseFont.match(/([0-9\.]+)\s?([a-z\%]+)/);
  var minFont = parseInt(fontsplit[1]);
  var maxFont = parseInt(fontsplit[1])*3;
  var fontUnits = fontsplit[2];

In this case, we're getting the value of the current year since we want to have the program do the math on how long I've worked with a technology. If you're getting something like a number of blog posts or inventory count instead, you can skip that step!

Then we get the base font size from the CSS. It comes with the units, so I've inserted a regular expression to match a number and a unit abbreviation. The current font size becomes the minimum font size for the tag cloud, assigned to minFont; the maximum font size is the minimum times three. You can adjust these to taste—for example, if you want your minimum to be 80% of the base font size, you'd set minFont = parseInt(fontsplit[1])*.8.

Now it's time to actually apply the font sizes!

  $('ul li').each(function() {
    var itemYear = parseInt($(this).data('year'));
    if (itemYear) {
      var num = currentYear - itemYear;
      var fontSize = (((maxVal - itemYear )/(maxVal - minVal)) * (maxFont - minFont)) + minFont;
      $(this).css("font-size", fontSize+fontUnits);
      $(this).attr("title", (currentYear - itemYear)+" years");
    } else {
      // if we can't determine the year, just set it to 90% size
      $(this).css("font-size", (minFont*.9)+fontUnits);
    }
  });
});

First it performs a quick check to make sure that data-year is actually set before trying to access it. Then we do a little math, subtracting the value of data-year from the current year to determine the years experience (again, this step is skippable if you're not trying to determine years since).

We determine the font size by figuring out what percentage the current number is between the minimum and maximum value, multiplying that by the difference between maxFont and minFont, and then adding that to minFont. We then set the css font-size value to that number and tack the units back on at the end.

Also, just to make sure that the information is represented in a way that's accessible to non-visual media, we set the list item's title attribute to "[N] years."

Final Product

All of this adds up to a result that looks a bit like this!

You can also see a live data version on my personal website if you scroll down to the bottom.

Line-Based Truncation Methods

Carly Ho 🌈 — Wed, 25 Apr 2018 03:29:09 +0000

I frequently get the request to truncate content excerpts on websites I build to a certain number of lines. While it sounds like a straightforward task, it’s difficult to implement for two main reasons: firstly, since we build websites to scale responsively to a variety of device sizes, we can’t assume that a content box will be the same width at any given screen size, and secondly, unless we’re using a monospace font, the number of lines any text will take up is dependent on the content, since in most fonts characters have different widths.

Let’s take, for example, this snippet of code:

<article>
    <h3>This is a really long heading that we’re going to need to truncate for the sake of the layout since it goes on for several lines.</h3>
    <div class=“excerpt”>
        <p>Cras dolor orci, mollis eget mi vel, faucibus malesuada velit. Phasellus egestas nec nisi non bibendum. Vestibulum faucibus mauris ac ipsum viverra volutpat. Sed lobortis justo sapien, eget ornare orci convallis ut. Nullam pulvinar, urna at faucibus dignissim, orci elit varius quam, non sodales lacus elit a nunc. Morbi eleifend velit quis tellus tempus, sed vehicula neque vulputate. Vestibulum sit amet tempus nibh, sit amet semper mi. Integer sit amet quam eget ligula luctus pulvinar at non ligula. Suspendisse a fringilla lorem, cursus sodales odio. Aliquam ac odio eget nulla consectetur dictum eu quis massa. Sed volutpat ante non felis condimentum vestibulum. In tempor tristique varius. Nunc est nunc, tincidunt quis metus et, semper molestie eros. <a href=“#” class=“readmore”>Read More</a>
    </div>
</article>

What are some approaches we can take?

CSS-Based Clipping

A very simple solution would be to use CSS to set a maximum height for the container that the text is inside. If we know the line-height, we can multiply that by the number of lines we want to show to get the height the box should be to clip it properly.

h3 {
    line-height: 26px;
    height: 52px;
    overflow: hidden;
}

.content {
    line-height: 24px;
    height: 100%;
    overflow: hidden;
    max-height: 72px;
}

.content p {
    margin: 0;
}

This solution requires no javascript and therefore is very good for performance. You could also add a tiny amount of javascript to be able to reveal the hidden content by setting the max-height of the .content container to a height much longer than any content in it might be, such as 9999999px, which is also friendly to transition animations.

However, if you need to include a “More” or “Continue” link at the end, or want to add an ellipsis to indicate that the text has been truncated, you’ll need something a little more robust, since this solution will hide the end of a segment that happens to be over the specified number of lines long.

Pros: Minimum performance change, no modification of markup needed
Cons: Can’t use readmore links or ellipses at the end of the text, specific to certain CSS selectors

Javascript-Based Clipping

By using Javascript (and in this example, jQuery, although I’m sure you could write it without) to manipulate the HTML document, we can achieve more flexible results.

In this case, if we know, the line-height of the element and it remains constant, we can separate out any readmore links, split the text by spaces, and then iterate over each word until we find that the content is now taller than the box we want to fit it to. We should also store the original text in an attribute so that we can update the excerpt when the container size changes.

$(window).on(‘resize load’, function() {
    $(‘.content p’).each(function() {
        var lineHeight = 16; // content's line-height
        var lines = 3; // number of lines to show
        // only truncate if the text is longer than the desired size; if not, skip it
        if ($(this).height() > lineHeight * lines) {
            if ($(this).find('a.readmore').length > 0) {
                    $(this).attr('data-link', $(this).find('a.readmore')); // if there's a readmore link, separate it out and put it on a data attribute
                    $(this).find('a.readmore').detach(); // remove the link from the HTML
            }
            if ($(this).attr('title')) {
                    $(this).text($(this).attr('title'));
            }
            $(this).attr('title', $(this).text().trim()); // set the text as the title attribute to preserve it
            $(this).text(""); // empty the content
            var str = "";
            var prevstr = "";
            var words = text.split(" "); // split text into words
            var link = this.attr('data-link');
            for (var i = 0; i < words.length; i++) {
                if (this.height() > lines * lineHeight) {
                    // if we've spilled over onto the next line, roll it back a word and break the loop
                    this.html(prevstr.trim() + "&hellip; " + (typeof link !== 'undefined' ? ' ' + link : ''));
                    break;
                }
                prevstr = str;
                // update the working string with the next word
                str += words[i] + " ";
                // update the content in the document
                this.html(str.trim() + "&hellip;" + (typeof link !== 'undefined' ? ' ' + link : ''));
            }
            // if the last iteration caused us to spill over a line, roll back one word
            if (this.height() > lines * lineHeight) {
                this.html(prevstr.trim() + "&hellip; " + (typeof link !== 'undefined' ? ' ' + link : ''));
            }
        }
    });
});

Pros: Can maintain readmore links and ellipses
Cons: Specific to certain CSS selectors

Javascript Truncation on Arbitrary Items

The above solution is pretty flexible, but needs to specify the line-height. What if we want to apply the solution to an arbitrary element, or what if this particular element has a different line-height specified at some CSS breakpoints?

With many attributes one could just get the property, either from vanilla Javascript or by using the $(elt).css(“line-height”) method, but many browsers return the line-height value slightly differently, and, furthermore, we can’t guarantee what kind of units the line-height will be in.

I wish I had a really easy brilliant solution that anyone can DIY, but I got very tired and just downloaded the line-height module and included it ahead of my own scripting. (The line-height module was, unsurprisingly, also written to supplement a line-based truncation solution.)

Using that, we can replace the static number assigned to the lineHeight variable with window.lineHeight(this[0]);, which should return the line-height value in an easy-to-use way. At this point, this is pretty easy to turn into a custom function we can call with an element and a given number of lines, or even as a jQuery plugin we can use as a method on any element.

Pros: Maintains readmore links and ellipses, can be re-used easily
Cons: Uses an external library for line-height

Demo!

And here's the whole thing put together in a Codepen demo, with everything wrapped into a jQuery plugin:

The Hardest Thing is to Keep Going

Carly Ho 🌈 — Thu, 08 Mar 2018 00:52:20 +0000

Or: to my younger self, with love.

Listen: things will be hard, and then they will be easy, and then they will get hard again, because you have earned the skills to imagine the ways in which you can be better. Even when you're learning you'll think: wasn't this easier to take in before? And maybe it was, or maybe you're learning harder and harder things.

Sometimes impostor syndrome comes from within—not in comparing to your co-workers and classmates and the Silicon Valley luminaries you followed on Twitter, but in comparing yourself to you as you were when you were ten years old and burning with the enthusiasm of someone discovering her new world and the way she could impose her will upon it, or even you as you just thought you'd be by now. We often have the least patience for ourselves.

Keep learning, and try not to lock yourself into the futures you can see yourself in now. You don't think you could ever be a manager, but those skills are things that will come to you easier with practice, too, just like code, and those skills are just as important. To be able to estimate, to have confidence in your implementation ideas, to be able to communicate—those are things that demonstrate mastery of craft, too. But it's okay not to force it before you're ready, too.

The tools you use may change and the people you work with may change, but what won’t change is that this work is something that calls to you and drives you to be your best self in a way that will, someday, make you feel like an expert. Someday you’ll be an expert. Someday you’ll feel confident saying “I don’t know, but I’m sure I can figure it out” and it’ll be true.

When you can’t see what lies ahead of you with any certainty or any knowledge of payoff, the hardest thing is to keep going. What I can tell you is that if you keep going, if you find friends and peers and mentors to support you (and you will) and take care of yourself (it helps, I promise), you’ll eventually find yourself in a place where you realize that you have everything that you need.

There will be days when everything feels like it’s fine and you’ll feel fulfilled by your work and still feel like you’d prefer to just lie down because (for better or for worse) you're not a formless energy cloud of programming knowledge and your body has just decided to rebel. Sometimes work will be great but some dude you’ve never even heard of somewhere across the country will unleash a waterfall of hot takes about whether people like you should be programmers and you’ll just feel so very tired. Give yourself a break, do what you need to get back on your feet. The needs of the mind and the body are needs you’re allowed to have. The productivity can come later. You have plenty of time yet.

You’ll never be done learning or improving, and you’ll never get a trophy that says you get to be done and that everything will be perfect smooth sailing from here on out. But like all hard things, carrying on gets easier with practice.