Melanie Sumner has this super-specific collection of web-related nouns for describing a group or set of something. You know how there’s a school or fish or a herd of cows? Same sort of thing, but for funny web jargon.
Things like:
A vanity is ten (10) or more domains owned by a single person, where very few are in use.
A parade of RSS feeds is when you have so many RSS feeds that you have to scroll to see them all.
For this fourth and final article of our little series on single-element loaders, we are going to explore 3D patterns. When creating a 3D element, it’s hard to imagine that just one HTML element is enough to simulate something like all six faces of a cube. But maybe we can get away with something more cube-like instead by showing only the front three sides of the shape — it’s totally possible and that’s what we’re going to do together.
Here is a 3D loader where a cube is split into two parts, but is only made with only a single element:
CodePen Embed Fallback
Each half of the cube is made using a pseudo-element:
Cool, right?! We can use a conic gradient with CSS clip-path on the element’s ::before and ::after pseudos to simulate the three visible faces of a 3D cube. Negative margin is what pulls the two pseudos together to overlap and simulate a full cube. The rest of our work is mostly animating those two halves to get neat-looking loaders!
Let’s check out a visual that explains the math behind the clip-path points used to create this cube-like element:
We have our variables and an equation, so let’s put those to work. First, we’ll establish our variables and set the sizing for the main .loader element:
.loader::before,
.loader::after {
/* same as before */
animation: load 1.5s infinite cubic-bezier(0, .5, .5, 1.8) alternate;
}
.loader::after {
/* same as before */
animation-delay: -.75s
}
@keyframes load{
0%, 40% { transform: translateY(calc(var(--s) / -4)) }
60%, 100% { transform: translateY(calc(var(--s) / 4)) }
}
Here’s the final demo once again:
CodePen Embed Fallback
The progress cube loader
Let’s use the same technique to create a 3D progress loader. Yes, still only one element!
CodePen Embed Fallback
We’re not changing a thing as far as simulating the cube the same way we did before, other than changing the loader’s height and aspect ratio. The animation we’re making relies on a surprisingly easy technique where we update the width of the left side while the right side fills the remaining space, thanks to flex-grow: 1.
The first step is to add some transparency to the right side using opacity:
CodePen Embed Fallback
This simulates the effect that one side of the cube is filled in while the other is empty. Then we update the color of the left side. To do that, we either update the three colors inside the conic gradient or we do it by adding a background color with a background-blend-mode:
.loader::before {
background-color: #CC333F; /* control the color here */
background-blend-mode: multiply;
}
This trick only allows us to update the color only once. The right side of the loader blends in with the three shades of white from the conic gradient to create three new shades of our color, even though we’re only using one color value. Color trickery!
CodePen Embed Fallback
Let’s animate the width of the loader’s left side:
CodePen Embed Fallback
Oops, the animation is a bit strange at the beginning! Notice how it sort of starts outside of the cube? This is because we’re starting the animation at the 0% width. But due to the clip-path and negative margin we’re using, what we need to do instead is start from our --_d variable, which we used to define the clip-path points and the negative margin:
But we can make this animation even smoother. Did you notice we’re missing a little something? Let me show you a screenshot to compare what the final demo should look like with that last demo:
It’s the bottom face of the cube! Since the second element is transparent, we need to see the bottom face of that rectangle as you can see in the left example. It’s subtle, but should be there!
We can add a gradient to the main element and clip it like we did with the pseudos:
That’s it! We just used a clever technique that uses pseudo-elements, conic gradients, clipping, background blending, and negative margins to get, not one, but two sweet-looking 3D loaders with nothing more than a single element in the markup.
More 3D
We can still go further and simulate an infinite number of 3D cubes using one element — yes, it’s possible! Here’s a grid of cubes:
CodePen Embed Fallback
This demo and the following demos are unsupported in Safari at the time of writing.
Crazy, right? Now we’re creating a repeated pattern of cubes made using a single element… and no pseudos either! I won’t go into fine detail about the math we are using (there are very specific numbers in there) but here is a figure to visualize how we got here:
We first use a conic-gradient to create the repeating cube pattern. The repetition of the pattern is controlled by three variables:
--size: True to its name, this controls the size of each cube.
Then we apply a mask layer using another pattern having the same size. This is the trickiest part of this idea. Using a combination of a linear-gradient and a conic-gradient we will cut a few parts of our element to keep only the cube shapes visible.
The code may look a bit complex but thanks to CSS variables all we need to do is to update a few values to control our matrix of cubes. Need a 10⨉10 grid? Update the --m and --n variables to 10. Need a wider gap between cubes? Update the --gap value. The color values are only used once, so update those for a new color palette!
Now that we have another 3D technique, let’s use it to build variations of the loader by playing around with different animations. For example, how about a repeating pattern of cubes sliding infinitely from left to right?
CodePen Embed Fallback
This loader defines four cubes in a single row. That means our --n value is 4 and --m is equal to 1 . In other words, we no longer need these!
Instead, we can work with the --size and --gap variables in a grid container:
This is our container. We have four cubes, but only want to show three in the container at a time so that we always have one sliding in as one is sliding out. That’s why we are factoring the width by 3 and have the aspect ratio set to 3 as well.
Let’s make sure that our cube pattern is set up for the width of four cubes. We’re going to do this on the container’s ::before pseudo-element:
.loader::before {
content: "";
width: calc(4 * 100% / 3);
/*
Code to create four cubes
*/
}
Now that we have four cubes in a three-cube container, we can justify the cube pattern to the end of the grid container to overflow it, showing the last three cubes:
.loader {
/* same as before */
justify-content: end;
}
Here’s what we have so far, with a red outline to show the bounds of the grid container:
CodePen Embed Fallback
Now all we have to do is to move the pseudo-element to the right by adding our animation:
Did you get the trick of the animation? Let’s finish this off by hiding the overflowing cube pattern and by adding a touch of masking to create that fading effect that the start and the end:
We can make this a lot more flexible by introducing a variable, --n, to set how many cubes are displayed in the container at once. And since the total number of cubes in the pattern should be one more than --n, we can express that as calc(var(--n) + 1).
Here’s the full thing:
CodePen Embed Fallback
OK, one more 3D loader that’s similar but has the cubes changing color in succession instead of sliding:
CodePen Embed Fallback
We’re going to rely on an animated background with background-blend-mode for this one:
I’ve removed the superfluous code used to create the same layout as the last example, but with three cubes instead of four. What I am adding here is a gradient defined with a specific color that blends with the conic gradient, just as we did earlier for the progress bar 3D loader.
From there, it’s animating the background gradient’s background-position as a three-step animation to make the cubes blink colors one at a time.
If you are not familiar with the values I am using for background-position and the background syntax, I highly recommend one of my previous articles and one of my Stack Overflow answers. You will find a very detailed explanation there.
Can we update the number of cubes to make it variables?
Yes, I do have a solution for that, but I’d like you to take a crack at it rather than embedding it here. Take what we have learned from the previous example and try to do the same with this one — then share your work in the comments!
Variations galore!
Like the other three articles in this series, I’d like to leave you with some inspiration to go forth and create your own loaders. Here is a collection that includes the 3D loaders we made together, plus a few others to get your imagination going:
CodePen Embed Fallback
That’s a wrap
I sure do hope you enjoyed spending time making single element loaders with me these past few weeks. It’s crazy that we started with seemingly simple spinner and then gradually added new pieces to work ourselves all the way up to 3D techniques that still only use a single element in the markup. This is exactly what CSS looks like when we harness its powers: scalable, flexible, and reusable.
Thanks again for reading this little series! I’ll sign off by reminding you that I have a collection of more than 500 loaders if you’re looking for more ideas and inspiration.
Bunny Fonts bills itself as the “privacy-first web font platform designed to put privacy back into the internet.” According to its FAQ:
With a zero-tracking and no-logging policy, Bunny Fonts helps you stay fully GDPR compliant and puts your user’s personal data into their own hands.
Hard for my mind not to go straight to Google Fonts. Bunny Fonts even says they are a drop-in replacement for Google Fonts. It offers the same open source fonts and holds the same API structure used by Google Fonts.
Now, I’m no GDPR expert but the possibility of Google collecting data through its Fonts API is hardly unsurprising or even unexpected. I was curious to check out Google’s privacy statement for Fonts:
The Google Fonts API logs the details of the HTTP request, which includes the timestamp, requested URL, and all HTTP headers (including referrer and user agent string) provided in connection with the use of our CSS API.
IP addresses are not logged.
Comparing that to what Bunny Fonts says in its FAQ:
When using Bunny Fonts, no personal data or logs are stored. All the requests are processed completely anonymously.
In most cases, the data held and collected by bunny.net does not contain any user identifiable data. In some cases, which depend on how you are using bunny.net and how your website is structured, personal data may be collected from your users. Such information includes hosting user uploaded content as well as personal data that might be transmitted in the URL, User-Agent or Referer headers of the HTTP protocol.
Sounds pretty similar, right? Well, it may not have been that similar earlier this year when a German court ruled that embedded Google Fonts violated GDPR compliance. It appears that one line in the Google Fonts privacy statement about IP addresses came after the ruling, once the API scrubbed them from collected data.
So, do you need to ditch Google Fonts to be GDPR compliant? I would imagine not if IP addresses were the sole concern, but I’ll leave that for folks who know the rules to comment on that.
But if you are concerned about Google Font’s GDPR compliance, I guess Bunny Fonts is worth a look! And seeing that it’s powered by bunny.net’s CDN services, you should get pretty comparable performance marks.
HTML, CSS, JavaScript, Python, PHP, C++, Dart — there are so many programming languages out there and you may even be totally fluent in several of them! But as we aim to write more and better code, the way we write and communicate in everyday language becomes more and more important… and perhaps even overlooked.
The way we write about and around code is arguably as important as the code itself. And despite where you fall on that line, we can all agree that our words have the potential to both help and hurt code’s effectiveness.
In this article, I want to outline how these two seemingly distinct fields — programming and writing — can come together and take our developer skills to the next level.
Wait, technical writing? Yes, that’s exactly what I mean. I truly believe we are all writers in one sense or another. And I’m here to give you a primer with writing tips, advice, and examples for how it can make you both a better developer and communicator.
Last year, the team behind the popular Mac Git client, Tower, polled more than 4,000 developers and found that nearly 50% of them spent between 3-6 hours a day writing code.
And yes, that’s one survey polling a pretty niche group, but I imagine many of us fall somewhere in that range. Whatever the case, a developer isn’t writing code 24/7, because as this poll suggests, we’re spending plenty of time doing other things.
That might include:
demoing a new feature,
documenting that new feature,
updating a work ticket related to that new feature, or
backlogging work to support that new feature.
Of course, there’s always time for bathroom breaks and Wordle too.
Anyway, most of the things we typically do involve communicating with people like your team, colleagues, clients, users, and other developers.
So we do spend a good chunk of our time communicating with humans through words in addition to the communication we have with computers through code. Words are written language. And if we wrote our words better, we’d communicate better. When we communicate better, we’re more likely to get what we want.
That’s Technical Writing 101.
And it doesn’t even end here.. Some programmers also like to make their own products, which means they need to make marketing part of their job. Technical writing plays a huge role in that too. So, yeah. I think it’s pretty fair to say that technical writing is indeed everywhere.
What is good grammar?
With so many programming languages out there, the last thing we want is to learn another one.
Grammar is an integral part of English, and it unlocks the full potential of communication. It makes us more formal, professional, and coherent.
Let me give you a quick rundown on language.
The English syntax
Just like programming languages, English has a well-defined syntax, and it starts with words.
Words are the building blocks of English, and they fall into eight buckets:
Nouns
These can be names of people, animals, places, concepts, and objects.
Example: CSS is one of the core languages of front-end development.
Verbs
Verbs convey action. Even “is” can be considered an action.
Example: Marcia codes in the morning and answers emails in the afternoon.
Adjectives
Adjectives are how we describe nouns. They’re like meta that adds more detail to a sentence to paint a vivid picture.
Examples:
CSS is an elegant and poetic language.
The HTML for tables is complex and cumbersome.
The Box Model is important to understand CSS.
Prepositions
Prepositions create a relationship between a noun and other words, often indicating direction, time, location, and space.
Examples:
Did you commit your work to the repo?
What is the best approach for this component?
We conducted interviews with real users.
Adverbs
Sometimes actions need to be more specific, so we use adverbs such as “runs fast” and “compiles slowly.” They often end in “-ly.”
Examples:
This is easily the best idea of them all.
Chip waited patiently for Dale’s feedback.
The team worked diligently on the project.
Conjunctions
Conjunctions connect phrases in a sentence. Remember this classic song from the show School House Rocks?
Examples:
CSS for styling while HTML is for markup.
Yes, I write code, but I also work on design.
That fixes the bug. Yet it introduced a new one.
Transitions
Paragraphs are made of sentences that are connected to each other using transitions.
Examples:
There are many programming languages. However, only a few are used in the web industry.
First, clone the directory.
I like this approach but on the other hand, I know another one.
Pronouns
When nouns become repetitive, we replace them with pronouns such as: “he,” “it,” and “that.”
Examples:
CSS is a stylesheet language. We use it to style websites.
Tony loves to code and he practices every day.
Our customers are tech-savvy because they know code.
Think of these like UI components: they are modular pieces you can move around to construct a complete and robust sentence, the same way you might piece together a complete and robust UI. Do all of the components need to be there all of the time? Certainly not! Assemble a sentence with the pieces you need to complete the experience, just as you would with an interface.
Voice and tone
Vocabulary, punctuation, sentence structure, and word choice. These are all the ingredients of English. We use them to share ideas, communicate with our friends and family, and send emails to our coworkers.
But it’s crucial to consider the sound of our messages. It’s amazing how one exclamation point can completely shift the tone of a message:
I like programming.
I like programming! 🙂
It’s easy to confuse voice for tone, and vice versa.
Voice is what concerns our choice of words, which depends on context. For example, a tutorial for beginners is more likely to use slang and informal language to convey a friendly voice, whereas documentation might be written in a formal, serious, and professional manner in an effort to get straight to the point.
The same message, written in two different voices:
Fun: “Expand your social network and stay updated on what’s trending now.”
Serious: “Find jobs on one of the largest social networking apps and online jobs market.”
It’s not unusual to accidentally write messages that come across as condescending, offensive, and unprofessional. This is where tone comes into play. Read your messages out loud, get other people to read them for you, and experiment with your punctuation and sentence structure. That’s how you hone your tone.
Here’s another way to think of it: your voice never changes, but your tone does. Your voice is akin to who you are as a person, whereas tone is how you respond in a given situation.
Active and passive voice
A sentence always contains an actor, a verb, and a target. The order in which these come determines if the sentence is written in an active or passive voice.
The actor comes first in an active voice. For example: “CSS paints the background.”
Sentences that use an active voice are more straightforward than their counterparts. They’re clearer, shorter, and more understandable — perfect for a more professional voice that gets straight to the point.
With a passive voice, the actor comes last. (See what I did there?) That means our actor — CSS in this case — comes at the end like this: “The background is painted by CSS.”
Readers usually convert a passive voice to an active voice in their heads, resulting in more processing time. If you’ve ever heard that writing in an active voice is better, this is usually the reason why. Tech writers prefer the active voice most of the time, with very few exceptions such as citing research: “It has been suggested that …”
But that doesn’t mean you should always strive for an active voice. Switching from one to the other — even in the same paragraph — can make your content flow more seamlessly from one sentence to another if used effectively.
Avoiding mistakes
Grammar is all about the structure and correctness of language, and there’s nothing better to achieve that than a quick proofreading of your document. It’s very important to rid your writings of spelling mistakes, grammar issues, and semantic imperfections.
At the end of this article, I’ll show you the invaluable tools that professionals use to avoid writing mistakes. Obviously, there are built-in spell checkers in just about everything these days; our code editors even have spell-checking and linting plugins to help prevent mistakes.
But if you’re looking for a one-stop tool for all-things grammar, Grammarly is one of the most widely-used tools. I’m not getting a kickback for that or anything. It’s just a really great tool that many editors and writers use to write clean and clear content — similar to how you might use Emmet, eslint, or any other linter to write clean and clear code.
Writing code comments
The things we write for other developers can have a big impact on the overall quality of our work, whether it’s what we write in the code, how we explain the code, or how we give feedback on a piece of code.
It’s interesting that every programming language comes with a standard set of features to write a comment. They should explain what the code is doing. By that, I don’t mean vague comments like this:
red *= 1.2 // Multiply `red` by 1.2 and re-assign it
Instead, use comments that provide more information:
red *= 1.2 // Apply a 'reddish' effect to the image
It’s all about context. “What kind of program am I building?” is exactly the kind of question you should be asking yourself.
Comments should add value
Before we look at what makes a “good” code comment, here are two examples of lazy comments:
const age = 32 // Initialize `age` to 32
filter: blur(32px); /* Create a blur effect with a 32px radius */
Remember that the purpose of a comment is to add value to a piece of code, not to repeat it. If you can’t do that, you’re better off just leaving the code as-is. What makes these examples “lazy” is that they merely restate what the code is obviously doing. In this case, the comments are redundant because they tell us what we already know — they aren’t adding value!
Comments should reflect the current code
Out-of-date comments are no rare sight in large projects; dare I say in most projects.
Let’s imagine David, a programmer and an all-around cool guy to hang out with. David wants to sort a list of strings alphabetically from A to Z, so he does the obvious in JavaScript:
cities = sortWords(cities) // sort cities from A to Z
David then realizes that sortWords() actually sorts lists from Z to A. That’s not a problem, as he can simply reverse the output:
cities = sortWords(cities) // sort cities from A to Z
cities = reverse(cities)
Unfortunately, David didn’t update his code comment.
Now imagine that I didn’t tell you this story, and all you saw was the code above. You’d naturally think that after running that second line of code, `cities` would be sorted from Z to A! This whole confusion fiasco was caused by a stale comment.
While this might be an exaggerated example, something similar can (and often does) happen if you’re racing against a close deadline. Thankfully, this can be prevented by following one simple rule… change your comments the same time you change the code.
That’s one simple rule that will save you and your team from a lot of technical debt.
Now that we know what poorly written comments look like, let’s look at some good examples.
Comments should explain unidiomatic code
Sometimes, the natural way of doing things isn’t right. Programmers might have to “break” the standards a bit, but when they do, it’s advisable to leave a little comment explaining their rationale:
function addSetEntry(set, value) {
/* Don't return `set.add` because it's not chainable in IE 11. */
set.add(value);
return set;
}
That’s helpful, right? If you were responsible for reviewing this code, you may have been tempted to correct it without that comment there explaining what’s up.
Comments can identify future tasks
Another useful thing to do with comments is to admit that there’s more work to be done.
// TODO: use a more efficient algorithm
linearSort(ids)
This way, you can stay focused on your flow. And at a later date, you (or someone else) can come back and fix it.
Comments can link back to the source
So, you just found a solution to your problem on StackOverflow. After copy-pasting that code, it’s sometimes a good thing to keep a link to the answer that helped you out so you can come back to it for future reference.
// Adds handling for legacy browsers
// https://stackoverflow.com/a/XXXXXXX
This is important because solutions can change. It’s always good to know where your code came from in case it ever breaks.
Writing pull requests
Pull requests (PRs) are a fundamental aspect of any project. They sit at the heart of code reviews. And code reviews can quickly become a bottleneck in your team’s performance without good wording.
A good PR description summarizes what change is being made and why it’s being made. Large projects have a pull request template, like this one adapted from a real example:
## Proposed changes
Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
## Types of changes
What types of changes does your code introduce to Appium?
- [ ] Bugfix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- ...
## Checklist
- [ ] I have read the CONTRIBUTING doc
- [ ] I have signed the CLA
- [ ] Lint and unit tests pass locally with my changes
## Further comments
If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc…
Avoid vague PR titles
Please avoid titles that look like this:
Fix build.
Fix bug.
Add patch.
These don’t even attempt to describe what build, bug, or patch it is we’re dealing with. A little extra detail on what part of the build was fixed, which bug was squashed, or what patch was added can go a long way to establishing better communication and collaboration with your colleagues. It level-sets and gets folks on the same page.
PR titles are traditionally written in imperative tense. They’re a one-line summary of the entire PR, and they should describe what is being done by the PR.
Here are some good examples:
Support custom srcset attributes in NgOptimizedImage
Default image config to 75% image quality
Add explicit selectors for all built-in ControlValueAccessors
Avoid long PRs
A large PR means a huge description, and no one wants to review hundreds or thousands of lines of code, sometimes just to end-up dismissing the whole thing!
Unlike the PR title, the body is the place for all the details, including:
Why is the PR being done?
Why is this the best approach?
Any shortcomings to the approach, and ideas to solve them if possible
The bug or ticket number, benchmark results, etc.
Reporting bugs
Bug reports are one of the most important aspects of any project. And all great projects are built on user feedback. Usually, even after countless tests, it’s the users that find most bugs. Users are also great idealists, and sometimes they have feature ideas; please listen to them!
For technical projects, all of this stuff is done by reporting issues. A well-written issue is easy for another developer to find and respond to.
For example, most big projects come with a template:
<!-- Modified from angular-translate/angular-translate -->
### Subject of the issue
Describe your issue here.
### Your environment
* version of angular-translate
* version of angular
* which browser and its version
### Steps to reproduce
Tell us how to reproduce this issue.
### Expected behavior
Tell us what should happen.
### Actual behavior
Tell us what happens instead.
If it’s a screenshot of a CLI program, make sure that the text is clear. If it’s a UI program, make sure the screenshot captures the right elements and states.
It’s much easier for programmers to solve a bug when it’s live on their computer. That’s why a good commit should come with the steps to precisely reproduce the problem.
Here’s an example:
Update: you can actually reproduce this error with objects:
```html
<div *ngFor="let value of objs; let i = index">
<input [ngModel]="objs[i].v" (ngModelChange)="setObj(i, $event)" />
</div>
```
```js
export class OneComponent {
obj = {v: '0'};
objs = [this.obj, this.obj, this.obj, this.obj];
setObj(i: number, value: string) {
this.objs[i] = {v: value};
}
}
```
The bug is reproducible as long as the trackBy function returns the same value for any two entries in the array. So weird behavior can occur with any duplicate values.
Suggest a cause
You’re the one who caught the bug, so maybe you can suggest some potential causes for why it’s there. Maybe the bug only happens after you encounter a certain event, or maybe it only happens on mobile.
It also can’t hurt to explore the codebase, and maybe identify what’s causing the problem. Then, your Issue will be closed much quicker and you’re likely to be assigned to the related PR.
Communicating with clients
You may work as a solo freelancer, or perhaps you’re the lead developer on a small team. In either case, let’s say you’re responsible for interfacing with clients on a project.
Now, the programmer stereotype is that we’re poor communicators. We’ve been known to use overly technical jargon, tell others what is and is not possible, and even get defensive when someone questions our approach.
So, how do we mitigate that stereotype? Ask clients what they want, and always listen to their feedback. Here’s how to do that.
Ask the right questions
Start by making sure that you and the client are on the same page:
Who is your target audience?
What is the goal of the site?
Who is your closest competitor and what are they doing right?
Asking questions is also a good way to write positively, particularly in situations when you disagree with a client’s feedback or decision. Asking questions forces that person to support their own claims rather than you attacking them by defending your own position:
Are you OK with that even if it comes with an additional performance cost?
Does moving the component help us better accomplish our objective?
Great, who is responsible to maintain that after launch?
Do you know offhand if the contrast between those two colors passes WCAG AA standards?
Questions are a lot more innocent and promote curiosity over animosity.
Sell yourself
If you’re making a pitch to a prospective client, you’re going to need to convince them to hire you. Why should the client choose you? It’s important to specify the following:
Who you are
What you do
Why you’re a good fit for the job
Links to relevant work you’ve done
And once you get the job and need to write up a contract, remember that there’s no content more intimidating than a bunch of legalese. Even though it’s written for design projects, the Contract Killer can be a nice starting point for writing something much friendlier.
Your attention to detail could be the difference between you and another developer trying to win the same project. In my experience, clients will just as easily hire a develop they think they will enjoy working with than the one who is technically the most competent or experienced for the job.
Writing microcopy
Microcopy is the art of writing user-friendly UI messages, such as errors. I’ll bet there have been times where you as a developer had to write error messages because they were put on the backburner all the way to launch time.
That may be why we sometimes see errors like this:
Error: Unexpected input (Code 693)
Errors are the last thing that you want your users to deal with. But they do happen, and there’s nothing we can do about it. Here are some tips to improve your microcopy skills.
Avoid technical jargon
Most people don’t know what a server is, while 100% of programmers do. That’s why it’s not unusual to see uncommon terms written in an error message, like API or “timeout execution.”
Unless you’re dealing with a technical client or user base, It’s likely that most of your users didn’t take a computer science course, and don’t know how the Internet works, and why a particular thing doesn’’t work. Hence, the error.
Therefore, a good error message shouldn’t explain why something went wrong, because such explanations might require using scary technical terms. That’s why it’s very important to avoid using technical jargon.
Never blame the user
Imagine this: I’m trying to log into your platform. So I open my browser, visit your website, and enter my details. Then I’m told: “Your email/password is incorrect.”
Even though it seems dramatic to think that this message is hostile, it subconsciously makes me feel stupid. Microcopy says that it’s never okay to blame the user. Try changing your message to something less finger-pointy, like this this example adapted from Mailchimp’s login: “Sorry, that email-password combination isn’t right. We can help you recover your account.”
I’d also like to add the importance of avoiding ALL CAPS and exclamation points! Sure, they can be used to convey excitement, but in microcopy they create a sense of hostility towards the user.
Don’t overwhelm the user
Using humor in your microcopy is a good idea! It can lighten up the mood, and it’s an easy way to curb the negativity caused by even the worst errors.
But if you don’t use it perfectly, it can come across as condescending and insulting to the user. That’s just a big risk to take.
[D]on’t go out of your way to make a joke — forced humor can be worse than none at all. If you’re unsure, keep a straight face.
(Emphasis mine)
Writing accessible markup
We could easily spend an entire article about accessibility and how it relates to technical writing. Heck, accessibility is often included in content style guides, including those for Microsoft and Mailchimp.
You’re a developer and probably already know so much about accessibility. You may even be one of the more diligent developers that makes accessibility a core part of your workflow. Still, it’s incredible how often accessibility considerations are put on the back burner, no matter how important we all know it is to make accessible online experiences that are inclusive of all abilities.
So, if you find yourself implementing someone else’s copywriting into your code, writing documentation for other developers, or even writing UI copy yourself, be mindful of some fundamental accessibility best practices, as they round out all the other advice for technical writing.
Things like:
Using semantic tags where possible (e.g. <nav>, <header>, <article>, etc.)
Those were six ways that demonstrate how technical writing and development coincide. While the examples and advice may not be rocket science, I hope that you found them useful, whether it’s collaborating with other developers, maintaining your own work, having to write your own copy in a pinch, or even drafting a project proposal, among other things.
The bottom line: sharpening your writing skills and putting a little extra effort into your writing can actually make you a better developer.
In the following tutorial, you will learn how to create a Chinese ink brush in Illustrator and how to draw Chinese characters.
If you don’t have the time to learn how to create a Chinese ink brush in Illustrator, you can always try Envato Elements where you can download calligraphy brushes for Illustrator. You will find anything from Chinese vector brushes to Chinese brush fonts. Besides Illustrator resources, you will also find Chinese brush Photoshop packs.
What You’ll Learn in This Chinese Ink Brush Illustrator Tutorial
How to create a Chinese ink brush in Illustrator
How to save and use Illustrator brushes
How to draw Chinese characters using Chinese vector brushes
1. How to Create the Chinese Ink Brush Design
Step 1
Hit Control-N to create a new document. Select Pixels from the Units drop-down menu, set the Width to 850 px and the Height to 530 px, and then click that Advanced Options button. Select RGB for the Color Mode and set the Raster Effects to High (300 ppi), and then click the Create button. Now that you’re set, let’s see how you can create a Chinese ink brush in Illustrator.
Step 2
Pick the Rectangle Tool (M) and simply click on your artboard to open the Rectangle window. Set the Width to 200 px and the Height to 30 px, and then click OK to create your rectangle.
Keep it selected, remove the stroke color, and select the fill. Open the Gradient panel (Window > Gradient) and click that Linear Gradient button to apply the default white to black linear gradient. Double-click the black gradient slider and switch to RGB color mode, and then replace the existing color with a pure black (R=0 G=0 B=0).
Step 3
Switch to the Direct Selection Tool (A) so you can adjust the corners radius of this rectangle. All you have to do is move to the control panel and enter 15 px in that Corners box.
Step 4
Focus on the Appearance panel (Window > Appearance) to select the existing fill and go to Effect > Stylize > Inner Glow. Enter the settings shown in the following image and click OK.
Step 5
Keep focusing on the Appearance panel and add a second fill for your shape using the Add New Fill button.
Select this new fill and focus on the Gradient panel to edit the gradient that’s already applied. Double-click the left gradient slider, replace the existing color with black (R=0 G=0 B=0), and don’t forget to lower the Opacity to 0%.
Step 6
Make sure that the top fill is still selected and again go to Effect > Stylize > Inner Glow. Enter the settings shown below and click OK.
Step 7
Focus on the Appearance panel and click that Path section to select the entire path, thus making sure that the effects which you’re about to add will be applied to the entire path, not just a fill.
First, go to Effect > Texture > Grain. Drag both sliders to 100 and set the Grain Type to Horizontal, click OK to apply the effect, and then go to Effect > Sketch > Stamp. Set the Balance to 15 and the Smoothness to 5, and then click OK to apply this second effect.
2. How to Create a Chinese Ink Brush in Illustrator
Step 1
Make sure that your shape is still selected and go to Object > Expand Appearance, and then move to the control panel and click the Image Trace button.
Step 2
Keep focusing on the control panel and click the Image Trace Panel button. Drag the Threshold slider to 150 and then click that Advanced arrow button to get access to the rest of the settings. Set the Paths to 60%, Corners to 0%, and Noise to 1 px, keep the Fills box checked and the Strokes box unchecked, disable the Snap Curves To Lines box, and don’t forget to enable the Ignore White setting.
Step 3
Once you’re done adjusting the settings from the Image Trace panel, return to the control panel and click that Expand button. It’s not mandatory, but you can turn the resulting group of shapes into a compound path (Object > Compound Path > Make or Control-8).
Step 4
Make sure that your compound path is still selected and focus on the Brushes panel (Window > Brushes). Click that New Brush button, check the Art Brush box, and click OK to open the Art Brush Options window.
Select Tints from the Colorization Method drop-down menu, which will allow you to change the color of the brush once it’s applied, and then click OK to add your art brush to the Brushes panel.
3. How to Create Chinese Characters Using a Chinese Vector Brush
Step 1
Pick the Brush Tool (B) from the toolbar, select your art brush from the Brushes panel, and simply click and drag to draw the Chinese brushstrokes which will make up your Chinese characters.
Select all of these paths and set the stroke color to R=229 G=194 B=42, which will change the color of your brush.
Step 2
Finally, let’s add a simple background. Pick the Rectangle Tool (M), create a shape that covers your entire artboard, fill it with R=183 G=6 B=8, and don’t forget to send it to the back (Shift-Control-[).
Congratulations! You’re Done!
Here is how your design should look. I hope you’ve enjoyed this tutorial and can apply these techniques in your future projects.
Feel free to adjust the final Chinese vector brushes or draw your own characters. You can find some great sources of inspiration at Envato Elements, where you can download professional calligraphy brushes for Illustrator.
Popular Illustrator Brushes and Chinese Brush Fonts From Envato Elements
Envato Elements is an excellent resource for Chinese brush Photoshop kits, Chinese brush script fonts, or Illustrator brushes. Here’s a short list of some of the most popular assets that you can find.
If you’re in a hurry or you simply can’t be bothered to put together your own Chinese vector brushes, this small pack of dry paint brushes for Illustrator might be the perfect solution.
When finishing off a design project, adjusting a logo, creating headlines, or editing typographic compositions, kerning is a part of the design process that designers take into consideration. Today we are going to explore the meaning of the term „kerning”, discover how adjusting kerning improves design, and learn how to adjust kerning in Photoshop.
What You’ll Learn in This Kerning Photoshop Tutorial
What is the meaning of kerning in typography?
What are the types of kerning?
Why do you need to adjust kerning?
How to adjust font kerning in Photoshop
1. What Is Kerning?
Before we go into what kerning is in Photoshop, let’s first define the term. What is kerning? Kerning defines both the typography term as well as a design process.
In typography, kerning is the name given to the spacing between individual characters and letterforms, to achieve eye-pleasing results and better readability.
Kerning is also the design process of manually adjusting this space between characters to make the text look uniform, legible, and visually better.
Kerning helps improve the appearance and design of your text, which might look awkward if left unadjusted. If you were to equally space the letters of a word, you’d be shocked how your text wouldn’t actually look spaced. An example is shown below.
For example, if the letters 'c’ and 'l’ are too close to one another, at a distance they might mistakenly be read as the letter 'd’. Since letters are not structured and designed with equal curves and shapes, you will sometimes need to manually adjust the distance between two specific letters to make the text legible and match the rest of the letters in the design. Some challenging pairs of letters to kern include ll, rn, wa, ya, yo, tr, ol, li, and cl.
Kerning is about creating the perception of an equal space between letters, according to the human eye. It is mostly applied when designing logos, adjusting headlines, and creating typographic compositions. While you may count on modern software to create kerning of fonts, and some typefaces have their own built-in glyph pairs, your role as a designer is to have more control over the matter and a keen eye for evenly spaced type. Kerning is pretty much an optical adjustment and a visual exercise of manipulating the space between two specific glyphs to create the illusion of a well-balanced space.
Kerning matters. It is a very powerful tool that plays a huge difference in improving your designs. The simple step of separating or minimizing the space between letters can turn something ordinary into something unique, creating impact at first sight. Many brands use typography for their logos, but instead of using the font as it is, they alter its kerning to turn it into something unique. Below are some brilliant examples of how kerning creates an impact in design.
Having good kerning helps make logotypes and text readable and adaptable on different screen sizes, such as tablets, smartphones, and laptops. Legibility is vital in making the text clear and convenient. If words are too close-knit, they may appear messy, and if the characters are too far apart, the words may be slower to read. Adjusting kerning helps the reader focus on the text and makes it easier and faster to read.
Each typeface you encounter will have different spaces between its individual letters, so you will have to adjust the kerning to each one differently, especially when it comes to logotypes and headlines, where spacing is more apparent. To have more control over the type, it’s better to kern the letters yourself as you cannot rely on the font software to kern them correctly for you.
Graphics software programs like Photoshop, InDesign, or Illustrator usually include two default auto-kerning tools: Metric and Optical kerning.
Metric kerning, also known as Auto, is basically the default setting in which built-in kerning pairs are used. These built-in kerning pairs have adjusted spacing suggested by the typeface designer.
Optical kerning, on the other hand, overrides a font’s built-in kern tables. Optical kerning adjusts the kerning between letters based on their shape. It is useful when using fonts with no built-in kern pairs or when adjusting different type sizes and combining different fonts.
Below is an example of Metric vs Optical vs Manual kerning, and the results of these three kerning methods overlayed.
Types of Kerning: Metric, Optical and Manual kerning sample
4. How to Adjust Kerning in Photoshop
Step 1
Now that we know what kerning is in Photoshop designs, let’s learn more about kerning in Photoshop. Spending some time kerning type will help your design look more professional. Let’s learn how to manually adjust kerning in Photoshop, using the Old Movie Night Flyer PSD file from Envato Elements.
Using Photoshop to adjust kerning (or Photoshop text spacing) is easy. To kern your type, you will need to open the Character panel (Window > Character).
Step 2
Select the Horizontal Type Tool (T) and make sure the cursor is between two letters whose spacing you want to change. In this case, we will adjust the white space between the letters VI, NI, and HT in the „MOVIE NIGHT” title.
Step 3
Within the Character panel, you will see a V/A kerning icon. You can either change the number values in the kerning tool by choosing a value from the dropdown menu or type in the value.
Step 4
You can experiment by increasing and decreasing the space between a pair of letters. A useful keyboard shortcut is to click between the two letters and hold down the Option/Alt key then use the right arrow key (to increase) or left arrow key (to reduce) to adjust the kerning.
In Photoshop text spacing, a positive value means you are adding white space between letters, and a negative value means you are decreasing the space between the letters.
Manual kerning helps in achieving control and readability. So take the time to practice kerning on your logos, banners, headlines, and signs.
Want to Gain More Typography Skills?
I hope you liked this quick tip tutorial on what kerning is in Photoshop and how to adjust kerning in Photoshop. If you are looking for more Photoshop resources, check out these articles:
Set up your team to win. Baseball fonts are known for their vintage charm. They have lots of great movement and look great on a new jersey. Whether you like serif typefaces or unique baseball script fonts, this selection includes the best authentic styles from professional designers.
Download the Best Baseball Fonts From Envato Elements
Looking for inspiration and design references can take a while. If you want to find the best fonts created by professional designers in one place, you should check out Envato Elements. You’ll get tons of vintage and baseball fonts for inspiration.
With a small monthly fee, you can also have access to all kinds of fonts, templates, and design resources. Here’s a tiny selection of some of our favorite baseball fonts:
Looking for something similar to the Dodgers font? Clean and pretty straight to the point, the Auckland baseball font is a stunner. This font has an elegant and minimalist design, looks wonderful on fabrics and apparel, and it’s great for a team logo. Download it to get five alternates, ligatures, and swashes.
Or check out this next baseball typeface, the Cosmoball font. Created by designer wacaksara, this baseball script font is bold and fluid. The font similar to the Atlanta Braves font has a handwritten style that gives it a nice casual flair, so it’ll pair wonderfully with eBooks, headlines, and so much more. You won’t find a free baseball font as good as this one. Give it a try!
Looking for a quirky script font? Try out the Megattor Script font. Designed by Letterhend Studio, this cheeky font will add a flirty touch to any traditional sports theme. Create perfect hand-lettering posters with a natural handwriting feel. Try it out!
Some modern baseball fonts feature a unique graffiti vibe. The Agistha baseball font, for instance, is our next example. Easily create creative logotypes or typography by simply installing this font. Use it for graphics, websites, and posters.
Many designers use sports fonts for video game titles, movie intros, and marketing campaigns. The Battams jersey font is made by using a constant line weight with an oval tip line. Customize your titles even further with additional perks like swashes and alternates. This is an ideal cursive varsity font for your team.
This next font is a magnificent script typeface with lots of charisma. If you’re a baseball fan, you might’ve noticed it almost looks like the Dodgers font. Use it for an official logotype or just try it out as a quick test. Bold and modern, this baseball script font is easy to install. Use it on both Macs and PCs. A great choice if you’re looking for a baseball jersey font.
Looking for a cursive varsity font? Make unique 3D typography with the Marsmello baseball. This script is clean and subtle, with a casual appearance that mimics old cartoon graphics. Use it by itself or add a quick shadow like the graphic below. With this font, you won’t need a baseball font generator. Add it to your collection today!
Our next bold script font is the Marttabuck typeface. Created by Letterhend Studio, this vintage baseball font has a full and energetic appearance. Use this baseball cursive font to announce your brand with a special handwritten look. Try out the regular and special font styles for different effects.
Here’s another superb corporate font inspired by college logos and lettering. The Mourbout font family would look stunning as a monogram or logo. An exclusive display typeface with elegant serif details, this typeface features regular and italic versions. It’ll be hard to find a free baseball font as cool as this one.
This next font duo includes sans-serif and script typefaces. Pipetton is a classic retro font with an incredible baseball feel. A complete set of characters are included, as well as alternates, ligatures, and cool swashes. Give it a try!
Or make a long-lasting brand with this incredible vintage typeface. Frankey is an extraordinary baseball cursive font with lots of charm. A mix of old and new, this set includes letters, numbers, and accented characters. Create beautiful designs for web or print work without using a baseball font generator.
Download Vintage Baseball Fonts From GraphicRiver
If you’re looking for a pay-as-you-go alternative, then you should grab one of the amazing vintage baseball fonts from Envato Market. Find thousands of fonts, mockups, and templates available for single purchase.
Batter up, slugger! This next baseball font features a classic retro design, similar to the Atlanta Braves font as well. Just type out your team name or logo into the font tester to see how it fits. Simple and effective, this modern typeface includes condensed, regular, and even script styles. Try it out!
Mix and match unique design elements for the best combination of vintage label designs. Create typographic designs using this baseball letter font. This vintage-inspired font will bring the 80s back to the game.
Bon voyage! Set up your next flyer with the fantastic Bon Voyage baseball jersey font. Featuring a classic sports look, this retro font duo lets you customize the style with ease. Create limitless combinations for a refreshed sports logo with this baseball letter font.
Do you like the Atlanta Braves font style? The Montheim vintage script is a stunning baseball lettering retro font with a full, medium weight. Included in this download is a complete set of letters, numbers, and punctuation. Inspired by retro typography movements, this font looks good on just about any vertical or horizontal layout.
This font is definitely a bold baseball script font. Made with hand drawings, this baseball font represents all the elegance and dynamism of the sport. Create a typographic design for logos, merch, stickers, and posters with this baseball jersey font.
A retro font with over 400 glyphs, the Seren baseball script font looks great with added texture. Customize your logos with additional brush effects to make the most of this font. Letters, numbers, and basic punctuation are all included.
Complete your jersey with an awesome quote. The Milestone jersey font includes all the standard letter characters along with additional ornaments. Add a quick tail to the end of your brand or customize a team name. Enjoy regular and script versions in this set.
Here’s another fantastic baseball font with a classic tail. Perfect for restaurants or modern corporations, this Atlanta Braves font alternative can be used with clean or rough aesthetics. Add a touch of grit for a grunge feel or keep it regular for a nice result. Add it to your collection!
Feeling Inspired?
Find more font inspiration. Whether you’re looking for a classic baseball font or a more modern aesthetic, these retro typefaces are the best baseball fonts around. Remember to bookmark this post to rediscover your favorites.
Looking for more inspiration? Check out these articles:
Learn how to make a chalkboard sign with a chalk text effect in Photoshop using textures and layer styles. This is a great option if you want to make a „first day of school” chalkboard sign, for example.
But if you’re looking for more chalkboard sign ideas or if you need to make a welcome chalkboard sign or a customizable chalkboard sign, you should visit Envato Elements as well. This complete subscription-based marketplace offers you unlimited resources to quickly make chalkboard signs. Find chalk fonts, chalk effect Photoshop add-ons, and more!
And if you prefer video tutorials instead, the Envato Tuts+ YouTube channel is the place to go. There you can watch this new video to learn how to make a chalk effect in Photoshop:
What You’ll Learn in This Chalkboard Sign Tutorial
How to create the background
How to create a speech bubble shape using the Pen Tool
How to create a chalkboard texture
How to create a chalkboard shape
How to create a wooden texture
How to create a chalkboard with a wooden frame
How to add a chalk text effect
How to add chalk pieces
What You’ll Need
The following assets were used during the production of this tutorial on how to make a chalkboard sign:
All the textures that we are going to use in this tutorial (wood and chalk) are made using Photoshop filters.
1. How to Create the Background
Create a new 1000 x 1000 px document. Make a new layer and press Shift-F5 to fill it with #62c3c9 or any other color that you like.
2. How to Create the Speech Bubble Shape Using the Pen Tool
Choose the Pen Tool (P) and draw the speech bubble shape.
To create a curved line, click and hold down the mouse and drag.
To turn a smooth anchor to a sharp point, Alt-Click on the anchor point.
3. How to Create the Chalkboard Texture
Step 1
Set the Foreground color to #1a1a1a and the Background color to #ffffff.
Create a new layer and call it Chalkboard Texture. Press Shift-F5 to fill it with the color #1a1a1a.
Step 2
Go to Filter > Noise > Add Noise and set the Amount to 50%.
Step 3
Go to Filter > Blur > Motion Blur and set the Angle to 50 and the Distance to 19 pixels.
Step 4
Go to Layer > New Adjustment Layer > Levels and use these settings.
Step 5
Select the Chalkboard Texture layer and the Levels adjustment, right-click, and choose Merge Layers. Rename the new layer Chalkboard Texture.
Step 6
Press Control-J to duplicate the Chalkboard Texture layer and call it Chalkboard Text Texture.
4. How to Create the Chalkboard Shape
Step 1
Hide the Chalkboard Text Texture layer.
Right-click on the Chalkboard Texture layer and choose Create Clipping Mask.
Step 2
Press Control-J to duplicate the Speech Bubble Shape layer and call it Chalkboard. Rename the initial layer Wooden Frame.
Step 3
Set the Fill of the Wooden Frame layer to 0% and add a Stroke layer style, color #000000.
Right-click on the layer and choose Convert to Smart Object.
5. How to Create the Wooden Texture
Step 1
Press Shift-Control-N to create a new layer. Name the layer Wooden Texture.
Press Shift-F5 to fill the layer with color #1a1a1a.
Step 2
Go to Filter > Render > Fibers to create the wood texture.
Step 3
Right-click on the Wooden Texture layer and choose Create Clipping Mask.
Step 4
Select the Wooden Frame and the Wooden Texture layers and move them above all the other layers.
Step 5
Add these layer styles to the Wooden Frame layer:
Drop Shadow (color #000000)
Inner Shadow (color #000000)
Bevel and Emboss (color #ffffff and #000000)
Color Overlay (color #c86800)
6. How to Create a Chalkboard With a Wooden Frame
Add this layer style to the Chalkboard layer:
Drop Shadow (color #000000)
Inner Shadow (color #000000)
Inner Glow (color #ffffff)
Color Overlay (color #393838)
7. How to Add the Chalk Text Effect
Step 1
Add the Back To School text layer using the color #ffffff.
Step 2
Add this layer style to the Back to School text layer:
Inner Shadow (color #000000)
Outer Glow (color #ffffff)
Inner Glow (color #000000)
Stroke (color #000000)
Step 3
Also add a Color Overlay, blend mode Normal, opacity 100%, using a color that you like. I will use this green color tone #d1ff6e.
You can also change the color of the Stroke using any color you like.
Step 4
Right-click on the Back to School text layer and choose Convert to Smart Object. Set the blend mode to Screen.
Step 5
To create a more realistic chalk effect, make the Chalkboard Text Texture layer visible. Right-click on the layer and choose Create Clipping Mask for the Back to School text layer.
Also set the blend mode to Multiply.
Step 6
To make the colors more vibrant, let’s add a Levels adjustment. Right-click on the adjustment layer and choose Create Clipping Mask.
8. How to Add Pieces of Chalk
Step 1
Use the Pen Tool to create a piece of chalk.
Step 2
Add this layer style to make the piece of chalk look realistic:
Drop Shadow (color #000000)
Inner Shadow (color #000000)
Bevel and Emboss (colors #ffffff and #000000)
Color Overlay (color #f2f2f2 for the white chalk and #c1e053 for the green chalk)
Congratulations! You’re Done!
In this tutorial, you’ve learned how to make a chalk effect in Photoshop from scratch using filters and adjustment layers. I hope you’ve enjoyed it and can now make your own „first day of school” chalkboard sign!
5 Top Chalk Effect Photoshop Resources From Envato Elements
Now you know how to make a chalkboard sign from scratch in Photoshop. But if you’re in a hurry and want to save time, Envato Elements is the best option. With a subscription, you can download as many assets as you need.
Want to make a „first day of school” chalkboard sign in a few clicks? Check out this chalk effect Photoshop kit.
You’ll get 28 single effects like chalk fills and outlines, as well as three complex chalk effects. It’s a complete kit to make customizable chalkboard signs with actions, patterns, brushes, and more!
If you need to make wedding chalkboard signs, this is the kit for you. It comes with 14 actions, three layer patterns, three chalk brushes, and two backgrounds. You can easily make welcome chalkboard signs, wedding chalkboard signs, and more with this one!
This chalk effect Photoshop kit is specially made for text. If you need a unique welcome chalkboard sign, then this is for you. The download includes 12 fully layered PSD files that work with smart object layers.
If free-hand drawing is more your style, then you’ll benefit from this pack of chalk brushes. The download includes 15 brushes at a size of 2500+ pixels, and they work with any Photoshop version.
Do you want to achieve a nice and realistic chalkboard sign look? This kit answers the question of how to make a chalk effect in Photoshop with a realistic look.
Create your customizable chalkboard sign with these 15 chalk and 15 charcoal effects in a variety of formats.
In this comic book Photoshop tutorial, I’ll show you how to turn a photo into comic book art using filters and textures. Need comic book Photoshop actions?…
Chalkboard menus are trendy and eye-catching. In this tutorial, I’ll teach you how to create a chalkboard drink menu design using InDesign and Photoshop.
