DEV Community: Segun Adebayo

Migrating to React 17 and Fixing the JSX Runtime Error with Emotion

Segun Adebayo — Sun, 08 Nov 2020 09:27:10 +0000

If you use Emotion in your project and you're migrating to react 17, you might run into this error if you use the css prop:

pragma and pragmaFrag cannot be set when runtime is automatic.

> 1 | /**@jsx jsx */
    | ^
  2 | import {

This error is due to the new JSX runtime feature introduced by React 17

After researching several solutions, here are some solutions that fix this:

Solution 1

Add another jsx pragma that configures the new jsx runtime to classic mode.

🔗 Reference

+/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@emotion/core';

Solution 2

Change the jsx pragma

🔗 Reference

- /**@jsx jsx */
+ /** @jsxImportSource @emotion/core */

Solution 3

Remove the jsx pragma /**@jsx jsx*/ from all files
Install @emotion/babel-preset-css-prop as devDependency
Upgrade @emotion/core to 10.1.1

{
  "presets": ["@emotion/babel-preset-css-prop"]
}

🔗 Reference

If you find this useful, feel free to like this post and share it.

Cheers!

If you had this issue in your project and managed to solve it a different way, feel free to comment below.

How to Introduce yourself

Segun Adebayo — Sat, 18 Jul 2020 20:05:16 +0000

As a Software engineer, learning how to introduce yourself and communicating what you do clearly can make a lot of difference in your career.

If you ever need to talk about yourself via DM or email, here are some tips I discovered:

✅ Talk about your success

Share your experience or background, and what you've achieved recently that you're proud of. Add links or references to back up your claim 🔗

"I have been developing..."
"My background is ..."
"I specialize in..."

These are good ways to start.

✅ Talk about your strengths

Even though you might have experience with a lot of tools or technologies, it's important to point out areas you really excel 🌟🌟🌟

"My strength is..."
"Over the years, I realized that my real strength is..."

These are good ways to start.

✅ Tie it all together

Meaning, how do your experience and strengths apply to the other person or the company you're applying to. 🎯

"What I'm looking for is..."
"I believe I can add value to your company by..."
"I'm looking to achieve...."

✅ End with a question

Whoever asks a question controls the conversation. Always end with these kinds of questions: Red question mark ornament

"Am I the kind of person you're looking for?"
"Is this what company X is looking for?"

Let the other person "say" you're the right fit, not you.

Hope you find this useful 😇

Design System: Creating a Breadcrumb

Segun Adebayo — Thu, 14 May 2020 17:13:22 +0000

Why they exist

User experience is just as important as the content of your website. A user should be able to easily and intuitively navigate through your website. This is why “breadcrumbs” exists.

What it means

In simple terms, a breadcrumb is a footprint that helps a visitor navigate a website in an organized way.

In technical terms, a breadcrumb is a navigational element used to indicate the current page the user is relative to the page's hierarchy.

Scenario

Let's say we need to design a breadcrumb for when the user is searching for the award-winning fiction books.

Books › Science Fiction › Award Winners

UI exploration

HTML blueprint
Let's start with the semantic HTML Structure of a breadcrumb and I'll break down each part:

<nav aria-label="breadcrumb">
  <ol>
    <li>
      <a href="http://site.com/books">Books</a>
    </li>
    <li>
      <a href="http://site.com/books/sciencefiction">Science Fiction</a>
    </li>
    <li>
      <a
        href="http://site.com/books/sciencefiction/award-winners"
        aria-current="page"
      >
        Award Winners
      </a>
    </li>
  </ol>
</nav>

The <nav> tag shows that the breadcrumb is a navigation element. Adding aria-label gives it a label that screen readers can announce.

A screen reader is a technology that speaks out text on a screen based on where the user is currently focused.

The <ol> tag shows that the breadcrumb is an ordered list of links.
The <li> tag represents a breadcrumb item that houses the link.

Typically when you use <ol> or <ui> in HTML, it needs to have a <li>.

The <a> tag represents a breadcrumb link. Notice the last link has aria-current="page". This is used to indicate that it represents the current page.

Styling the breadcrumb
When styling widgets like this, I tend to limit the use of class names and prefer to leverage the structure of the HTML in CSS.

Recap: Here's the HTML structure

<nav aria-label="breadcrumb">
  <ol>
    <li>
      <a href="http://site.com/books">Books</a>
    </li>
    <li>
      <a href="http://site.com/books/sciencefiction">Science Fiction</a>
    </li>
    <li>
      <a
        href="http://site.com/books/sciencefiction/award-winners"
        aria-current="page"
      >
        Award Winners
      </a>
    </li>
  </ol>
</nav>

Then here's how I'd style it using SASS or SCSS.

nav[aria-label="breadcrumb"] {
  padding: 10px;

  ol {
    list-style-type: none;
    display: flex;

    li {
      // little trick to add "/" separators
      &:not(:last-child):after{
        content: "/";
        color: #c4c4c4;
        display: inline-block;
        margin: 0 12px;
      }

      a{
        color: rgb(102, 112, 255);
        text-decoration: none;

        &:hover{
          text-decoration: underline
        }

      // style the breadcrumb that represents the current page 
        &[aria-current="page"]{
          color: #333;
          text-decoration: none
        }
      }
    }
  }
}

Here's the codesandbox for the HTML and CSS. Feel free to play with it.

Creating a component

Since I mostly use React.js so here's I'd transform the HTML markup to composable components. I believe something similar could be done with Vue, Svelte, etc.

// encapsulate the `nav` and `ol`
function Breadcrumb(props) {
  const { children, ...rest } = props;
  return (
    <nav aria-label="breadcrumb" {...rest}>
      <ol>{children}</ol>
    </nav>
  );
}

// make this the `li`
function BreadcrumbItem(props) {
  return <li {...props} />;
}

// make this the `a`
function BreadcrumbLink(props) {
  const { isCurrent, ...rest } = props;
  return <a aria-current={isCurrent ? "page" : undefined} {...rest} />;
}

// then we create the breadcrumb like this
function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbItem>
        <BreadcrumbLink>Books</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbLink isCurrent>Science Fiction</BreadcrumbLink>
      </BreadcrumbItem>
    </Breadcrumb>
  );
}

I found that breaking a widget into smaller sub-parts makes it a lot easier to extend, compose, and style them. For instance, you could pass a style prop to any of the parts and style it anyhow you want.

That's it!

You've learned how to create a breadcrumb. Thanks for taking the time to read through this. I really hope you find it useful.

Comment below to let me know your thoughts

Feel free to check out the React component library I created called Chakra UI. Here's the link to the breadcrumb component specifically: http://chakra-ui.com/breadcrumb.

Stay safe!

How to fix Github SSH Issue

Segun Adebayo — Sun, 12 Apr 2020 14:16:46 +0000

Today, I was working on Chakra UI and ran into a weird issue with git and GitHub.

I saw this error:

ssh: Could not resolve hostname github.com: nodename nor servname provided, or not known
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

I knew my SSH was there, I had the correct access and repo exists. It was a bit frustrating but I found a walkaround.

Here's the solution I found for macOS users:

Go to "System Preference" > "Network"
Select the network you're connected to
Click "Advanced"
Switch to the "DNS" tab and click the "+"
Add Google's DNS servers below 👇

# Here are the DNS servers for Google

8.8.8.8
8.8.4.4

That solved the problem!

PS: This is my very first post on DEV.to and I'm using this to flex my muscles in preparation for the other posts coming 😇