Combine low competition keywords and Medium’s high Domain Score to get to Page One of Google Results

Photo by Michael Dziedzic on Unsplash

To give you the best information quickly, let’s start with the top takeaways from my experience in maximizing my organic search traffic. Screenshots of stats and articles, plus details about the process, will come afterwards.

  • It matters 😃
  • Medium has a high DS (Domain Score), meaning it is a great platform for ranking well in Google results
  • Use a tool like Ubersuggest to identify low competition keywords in your niche. Don’t target broad topics, instead target specifically searched phrases
  • After identifying a target phrase, check if there are other Medium articles that return as results for that phrase. …

Create a mobile responsive card and configure card header, content, and footer background color

Card components are a common UI building block, and they need to be versatile and customizable to handle a variety of needs. Material-UI Cards have a significant capacity to be tailored to fit your needs.

We’ll start with the JSX, then dive into targeting css classes on different card subcomponents. (Ignore the garish colors 😱. I made every section different to demonstrate the Material-UI style API. )

Loading the Autocomplete component with fetch, custom rendering with renderOption, and styling the Popper and Listbox

Many Material-UI components have incredible customizations out-of-the-box, while some are functional but missing nice-to-have options (I’m looking at you, Table-without-a-search-prop).

The Autocomplete component may have the most customization options of any MUI component I’ve seen. Chips, grouping, disabled options, multiselect, custom popup items, fixed options, and more are demoed in the docs.

(YouTube version of this article here)

Unfortunately, I found that custom styling the Popper and using the renderOption prop were challenging despite the existing examples. Therefore, I created this demo that fetches data from a Star Wars API and populates this custom styled Autocomplete component:

Alert your users and offer relevant navigation

Photo by alex lauzon on Unsplash

Have you ever seen an app display an alert that action is required, but didn’t give you the relevant link to take the action? Frustrating, isn’t it?

In this demo, we’ll make an alert that has a React Router Link in it:

Customizations for one of Material-UI’s simplest components

Photo by dan carlson on Unsplash

Normally I like to take a Material-UI component and customize it in a challenging and useful way. However, the Backdrop component is a simple mask component that might be used with a modal or used to block a section of the screen while waiting for data to load.

With something this straight forward, I struggled with a creative customization. Instead, I decided to crowdsource the idea via Google search:

Fix exactly what you want, how you want with ESlint fix

Photo by Michael Dziedzic on Unsplash

Many projects have ESLint set up and devs are fixing lint errors as they code. This is great for reducing bugs, and keeping code cleanly formatted.

However, sometimes there’s a situation where a project can have a lot of linting errors (i.e. adding ESLint to an existing project) and it would be tedious for a dev to fix them manually. Don’t worry, ESLint has a command for auto-fixing: eslint --fix!

In this article I’ll discuss the flags available for ‘fix’, the types of issues (problem, suggestion, layout) that ‘fix’ can resolve automatically, and options such as how to limit the…

Material-UI has an extremely robust and customizable slider component. Naturally, I want to push it even farther.

Photo by Adi Goldstein on Unsplash

In this demo, I’ll create slider thumbs that have images and set slider behavior based on slider position.

Achieve equal item heights and masonry-style item wrapping in Material-UI’s Grid

Photo by Guille Álvarez on Unsplash

This guide focuses on two things:

  • Stretch all items in a Material-UI Grid row to be the same height.
  • Achieve a “masonry-style” layout where shorter and narrower items can wrap in a column when vertical space allows

When and how to use these (risky) shortcuts

Photo by Stefan Steinbauer on Unsplash

Anytime you can get TypeScript typing working, it’s best to use it. However, there are times that applying TypeScript is so difficult that it is best to tactically disable it.

I’ll start with several methods of how to disable linting for a line or lines of code, because the how is factual. Then when is more opinionated, so take that with a grain of salt. The code snippets shown below can also be found in this Codesandbox.

In other news, TSLint was deprecated in late 2019 in favor of typescript-eslint. This makes a lot of sense, considering they are both…

Get the perfect spacing and layout with Material-UI Paper component

Photo by Kelly Sikkema on Unsplash

Material-UI’s Paper component is intended exactly as it sounds: to give apps and components a paper-like background and feel.

The Paper component is often spaced and shadowed using padding, margin, and either the elevation or outlined variant. In this demo, I’ll show the look and feel of four different Material-UI Tables wrapped in a Paper component with different styles and props. These tables are derived from a trimmed down version of the ‘basic table’ example in the Material-UI docs.

Codesandbox for this article is in the Resources section.

Jon Middaugh

I have been: individual contributor | tech lead | manager | JS boot camp teacher | community college instructor.

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