Surprise your users with a typo-tolerant search. Let them know that you care about them and you’ll try to do your best to show some results.

Hero image with “thypo torelance” as a misspelled form of “typo tolerance”
Hero image with “thypo torelance” as a misspelled form of “typo tolerance”

Everyone makes mistakes. That’s why undo/redo is a must-have for interfaces where you work on something. That’s why we add extra padding around clickable elements for touch screens so it’s easier to catch touches. That’s why Google tries to show some results even if what you typed is far from perfect.

Users absolutely love that and they can’t imagine software without ctrl+z and looking at a "No results" page when they mistyped something. It seems that the bar is high... …


Hero image with two tabs in a browser saying “(1) Titles can do more than you think”
Hero image with two tabs in a browser saying “(1) Titles can do more than you think”

This post was originally published on https://tomekdev.com/posts/effective-titles-and-more. What you see as a GIF here is interactive there.✌️

This is not an SEO guide on how to write effective titles or (maybe I should say) how to create clickbait. No. We are going to talk about the technicals. If you want my writing advice on that I’d say a cliché: “title should be short and descriptive”.

Did mine do a good job? I don’t know, but if you are here reading this, maybe it did.

Site name

I believe you should put the site name into the page’s title because that’s going to…


This post was originally published on https://tomekdev.com/posts/input-and-form. Go there to read a bit more interactive and style richer version ✌️

I often see in Single Page apps a situation where someone uses just an <input> field. Sometimes in the accompaniment of<label> if you happen to work with a pro 🌟. It feels that when we gained control of inputs with two-way binding and we started handling onclick events on buttons with our fancy frameworks, we forgot the old way of doing things.

The old way, and the right way

The headline of this section may suggest that the old way and the right way are two different…


Woman in front with opened mail behind. Mail is surrounded with icons representing rich emails with gifts, charts, media, etc.
Woman in front with opened mail behind. Mail is surrounded with icons representing rich emails with gifts, charts, media, etc.

React Native has changed the way we do mobile apps. We absolutely love it. But there is another technology that deserves an award.

It’s MJML by Mailjet.

Email tech is bad

I don’t know a front-end dev who enjoys creating templates for emails (they rather hate it). It’s just the dark ages again. There are many poorly written email client engines in the wild (e.g. Microsoft Outlook) and that’s even worse than browsers in the hardcore times of IE6–9.

Look at the advert below:


This post was originally published on https://tomekdev.com/posts/anchors-for-headings-in-mdx. What you see as GIF here is interactive there. ✌️

How to add anchors to headings in MDX? It’s surprisingly easy to do. I assume you are already familiar with MDX so somewhere in your code you should have a blog page layout component that uses <MDXProvider>, like that:

MDX consists of components itself. So if there is a code like this then the interpreter changes the inner value (children) into the same content but wrapped with <code></code>.

The same applies to all the headings, lists, paragraphs, etc. Our job is to override…


A bunch of people is adding Alignment meeting to a calendar. Instead of a regular cross icon they use Tomster’s face.
A bunch of people is adding Alignment meeting to a calendar. Instead of a regular cross icon they use Tomster’s face.

We are getting very religious about it but we love our bi-weekly Alignment meetings so much that we have to share a few words about it.

Who enjoys meetings?

Once a sprint, in the first week of work we gather all our front-end developers for an hour and talk about stuff that connects all our tribes (teams): Ember and front-end codebase.

I’ve never seen developers so happy for a meeting. Well, I’ve seen them happy about a meeting but only when it was canceled 🤭.


Highlight text in JavaScript
Highlight text in JavaScript

This post was originally published on https://tomekdev.com/posts/highlight-text-in-javascript. What you see as GIF here is interactive there.✌️

In the previous post about search with typo tolerance, I added a few interactive elements to demonstrate the idea of how we can improve search functionality on the page by being more tolerant to typos. You might be curious how I made highlighting of matching text within results. So here it is.

It’s not super complicated but I’ll give you a very nice hint you might not know :) Here is the demo. …


Ember & Phorest logos connected with a plus symbol
Ember & Phorest logos connected with a plus symbol

… and will be in 2021 in my opinion. Here is why, but first:

A bit of background

Phorest is a company with a product that has evolved a lot in the last decade. Its main application is a desktop app that talks to a database in the Cloud (AWS). Being in the process of moving that desktop app to web, we had to choose (and bet on) a front-end framework that will help us accomplish our goals quickly and with high quality. Ember was that choice.

Here are the main characteristics that we hoped for and that have proven to be true.

Conventions

It…


People just before a start
People just before a start

This post was originally published on https://tomekdev.com/posts/powerful-start. Go there for slightly nicer code snippets. ✌️

I’m not a huge fan of “the art of the start” articles because, after all, starting in a non-optimal way is worth more than not starting at all with a head full of knowledge that wasn’t applied.

With that said, I still have a list of useful stuff that was proven to be working extremely well. The setup is meant to remove some worries from your head and focus on the product/project.

1. Use version control — git

We start with an obvious one. Even if you don’t work on software…


Adding command line support to your Ember Addon is pretty straight-forward.

Disclaimer:
The script presented in this post might be written without Ember ecosystem and run via `npm run script` command. But it was the only thing that came to my mind and must serve us as an example.

It has been a while when I started working with Ember. So I need to maintain and actively develop some projects. Recently I’ve realized we have a problem with the number of components. Well… the problem is that I don’t know if we need them all.

So let’s build Ember Addon…

Tomek Nieżurawski

I connect humans and machines. Usually write about interfaces, digital products, and UX on tomekdev.com. Founder of checknlearn.com. A bit nerdy 🤓

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store