Forem: Lee Twito

10 must-know tips for crafting the perfect looking README.md for your GitHub repo (with examples)

Lee Twito — Thu, 04 May 2023 07:49:21 +0000

1. Center Your Elements

Bring elements like your logo or headings to the center to make them pop.

Example:

<div align="center">
  <img src="your-logo-url" alt="Logo" width="320" />
</div>

2. Responsive Logo

Use <picture> and <source> to make your logo responsive and cater to different color schemes.

Example:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="dark-image-url">
  <img src="light-image-url" alt="Logo" />
</picture>

3. Add Badges

Use badges to highlight important info like license, stars, docs, and more.
Visit shields.io and choose from their collection.

Examples:

[![MIT License](https://img.shields.io/github/license/tutim-io/tutim)](https://github.com/tutim-io/tutim/blob/main/LICENSE) 
[![Number of GitHub stars](https://img.shields.io/github/stars/tutim-io/tutim?logo=github)](https://github.com/tutim-io/tutim/stargazers) 
[![Discord is Live](https://img.shields.io/badge/Discord-Live-green?logo=discord&logoColor=%23fff)](https://discord.tutim.io) 
[![Docs are updated](https://img.shields.io/badge/docs-updated-green?color=blue)](https://docs.tutim.io) 
[![Product Hunt](https://img.shields.io/badge/Product%20Hunt-Launch%20soon-orange?logo=producthunt&logoColor=%23fff)](https://www.producthunt.com/@leetwito)

4. Demo GIF

Include a demo GIF to give users a quick preview of your project.
Extra: You can just drag-and-drop your GIF file into GitHub's editor.

5. Feature List

List your project's features in bullet points to make it easy for users to skim through.

Example:

### ✨ Features

- 🌈 Headless
- 💅 Rich form
- 🚀 Performant

6. Getting Started

Provide a quick start guide with clear instructions and code snippets.
Make sure to visualize the output, outline requirements, and keep it simple.

7. Code Examples

Give clear examples of how to use your project, with detailed code snippets.

8. Community and Support

Include links to your community, like Discord, Twitter, and contribution guidelines.

Example:

### 🤵 Need Help?

Join our [Discord server](https://discord.tutim.io) or [Open an issue](https://github.com/tutim-io/tutim/issues/new/choose)

### 🔗 Links

- [Home page](https://tutim.io)
- [Twitter](https://twitter.com/Tutim_io)

9. Star History

Display your repo's growth with a Star History chart.

Example:

## Star History

[![Star History Chart](https://api.star-history.com/svg?repos=tutim-io/tutim&type=Date)](https://tutim.io/developers)

10. Showcase Contributors

Acknowledge and celebrate the people who've contributed to your project by displaying their avatars.

Example:

### 💪 By the community, for the community

![](https://contrib.rocks/image?repo=your-username/your-repo)

Powered by [your-project-name](https://your-project-url)

11. Share your tip! Or let me know if this was insightful for you

Create headless forms using a schema

Lee Twito — Sun, 30 Apr 2023 11:19:40 +0000

Building forms in web-apps is hard.

At first, it might seem like just a matter of adding a few input fields, but in reality, it's just the beginning.
Forms requirements can become more sophisticated with things like conditional branching, version control, save draft, and more.
PMs and designers often have endless requests for inputs updates or improved localization.

It's a lot to manage!

I've created an open-source form infra for web-apps that gives you your own in-house form builder fully integrated with your component library and design system.

Here's an example:

import { TutimWizard, defaultFields } from "@tutim/fields";
import { FormProvider } from "@tutim/headless";
import { InputType, Field } from "@tutim/types";

// a simple form schema
const config = {
  fields: [
    { key: 'company_name', label: 'Company name', type: 'text' },
    { key: 'num_of_employees', label: 'Number of employees', type: 'select', tooltip: 'Choose your best estimation', options: [{value:'1_50', label:'1 - 50'}, {value:'51_250', label:'51 - 250'}, {value:'above_251', label:'251 +'}] },
    { key: 'stakeholders', label: 'Stakeholders', type: 'array', children: { fields: [{key: 'name', label: 'Full Name', type: 'text'},{key: 'age', label: 'Age', type: 'number',},],},},
  ],
};

// a custom component for a text field
const CustomText: Field = ({ inputProps, fieldConfig }) => {
  const { value = '', onChange } = inputProps;
  // isDisabled,isRequired, options, defaultValue, validations
  const { key, label } = fieldConfig;
  return (
    <div key={key}>
      <label style={{ color: 'green', marginRight: '10px' }}>{label}</label>
      <input value={value} onChange={onChange} style={{ color: 'purple' }} />
    </div>
  );
};

// map the custom components over the default components
const fieldComponents: FieldComponents = {
  ...defaultFields,

};

// use Tutim library to render the form
const App = () => {
  return (
    <FormProvider fieldComponents={fieldComponents}>
      <TutimWizard onSubmit={console.log} config={config} />
    </FormProvider>
  );
};

export default App;

I see adoption for (older) libraries like rjsf, but it's very limited in terms of the UI.

Do you think there's a need for such a library?

Building an Advanced Multistep Form with React-Hook-Form

Lee Twito — Tue, 25 Apr 2023 14:46:04 +0000

Building an Advanced Multistep Form with React Hook Form

In this blog post, we'll demonstrate how to create an advanced multistep form using React Hook Form, a popular form library for React. React Hook Form aims to minimize re-rendering and provides a better developer experience by leveraging hooks and the native HTML form behavior.

Creating the Form Context

To manage our form data, we'll create a custom form context. This context will store the form data and provide a function to update it.

// src/FormContext.js
import { createContext, useContext, useState } from "react";

const FormContext = createContext();

export const useFormContext = () => {
  return useContext(FormContext);
};

export const FormProvider = ({ children }) => {
  const [formData, setFormData] = useState({});

  const updateFormData = (updatedData) => {
    setFormData((prevData) => ({ ...prevData, ...updatedData }));
  };

  return (
    <FormContext.Provider value={{ formData, updateFormData }}>
      {children}
    </FormContext.Provider>
  );
};

Creating the Form Steps

Now, let's create three form steps: Personal Info, Employment, and Review.

Personal Info Step

// src/steps/PersonalInfo.js
import { useForm } from "react-hook-form";
import { useHistory } from "react-router-dom";
import { useFormContext } from "../FormContext";

export const PersonalInfo = () => {
  const { register, handleSubmit } = useForm();
  const { updateFormData } = useFormContext();
  const history = useHistory();

  const onSubmit = (data) => {
    updateFormData(data);
    history.push("/employment");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="name">Name</label>
        <input {...register("name")} id="name" required />
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <input {...register("email")} id="email" required />
      </div>
      <button type="submit">Next</button>
    </form>
  );
};

Employment Step

// src/steps/Employment.js
import { useForm } from "react-hook-form";
import { useHistory } from "react-router-dom";
import { useFormContext } from "../FormContext";

export const Employment = () => {
  const { register, handleSubmit } = useForm();
  const { updateFormData } = useFormContext();
  const history = useHistory();

  const onSubmit = (data) => {
    updateFormData(data);
    history.push("/review");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="company">Company</label>
        <input {...register("company")} id="company" />
      </div>
      <div>
        <label htmlFor="position">Position</label>
        <input {...register("position")} id="position" />
      </div>
      <button type="submit">Next</button>
    </form>
  );
};

Review Step

// src/steps/Review.js
import { useFormContext } from "../FormContext";

export const Review = () => {
  const { formData } = useFormContext();

  return (
    <div>
      <h2>Review</h2>
      <pre>{JSON.stringify(formData, null, 2)}</pre>
      <p>Once you're satisfied with the data, you can submit the form to a backend service or save it to a local storage.</p>
    </div>
  );
};

Setting Up Routes

Now, let's create a Router component to handle navigation between the steps:

// src/Router.js
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { PersonalInfo } from "./steps/PersonalInfo";
import { Employment } from "./steps/Employment";
import { Review } from "./steps/Review";

export const Router = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={PersonalInfo} />
        <Route path="/employment" component={Employment} />
        <Route path="/review" component={Review} />
      </Switch>
    </BrowserRouter>
  );
};

Updating App.js

Finally, wrap the Router component in App.js with the FormProvider:

// src/App.js
import { FormProvider } from "./FormContext";
import { Router } from "./Router";

function App() {
  return (
    <div className="App">
      <FormProvider>
        <Router />
      </FormProvider>
    </div>
  );
}

export default App;

Conclusion

In this blog post, we've built an advanced multistep form using React Hook Form and React Router. We've also created a custom form context to manage form data throughout the steps. By following this approach, you can create complex multistep forms with ease, while leveraging the benefits of React Hook Form.

As a potential enhancement, you could integrate with third-party libraries like Tutim for schema-based implementation including validation, form persistence, conditional rendering, save draft, and more.

Rediscovering Frontend Fundamentals

Lee Twito — Mon, 24 Apr 2023 10:40:45 +0000

It's often said that skilled hands can achieve almost anything. However, recent observations in the industry have led me to believe that amidst the plethora of trends, paradigms, and novelties, we have lost sight of the core principles of frontend development.

In this piece, I will share several code snippets from a recent project and attempt to elucidate my thoughts on them. So without further ado, let's dive in!

The Labyrinth of Complexity
Blunders of the Past
The Double-edged Sword
A Handful of Crucial Suggestions

The Labyrinth of Complexity

Consider this elementary CardComponent with an optional heading attribute. If this attribute is present, it is rendered within a wrapping div with a specific class.

const CardComponent = ({ content, heading }) => {
  return (
    <div className="card">
      {heading && <div className="card__heading">{heading}</div>}
      {content}
    </div>
  );
};

Simple scenarios work as intended. If the heading is dynamic and can return either content or null, our condition {heading && <div />} fails to recognize it and renders an empty div.

To tackle this issue, a developer came up with the following solution:

const CardComponent = ({ content, heading }) => {
  const headingRef = useRef();

  useEffect(() => {
    const containsContent = headingRef.current?.childNodes.length > 0;
    headingRef.current.style.display = containsContent ? "block" : "none";
  });

  return (
    <div className="card">
      {heading && (
        <div ref={headingRef} className="card__heading">
          {heading}
        </div>
      )}
      {content}
    </div>
  );
};

However, this code only works on the initial render. If the footer updates asynchronously, useEffect won't be invoked. After much deliberation, developers decided to explore the MutationObserver.

When asked for advice, I offered a simpler solution that only required basic CSS:

.card__heading:empty {
  display: none;
}

Developers often overcomplicate tasks without exploring basic CSS capabilities.

Blunders of the Past

In a previous project, we needed a side panel widget that would stretch to its full height without overlapping the header and footer. The basic formula looked like this: 100% - headerHeight - footerHeight.

The solution worked smoothly on all pages, except one. On that page, footerHeight was equal to 0. The developer who faced this bug discovered that document.querySelector('footer') returned null, even though the footer was still rendered on the page. They resorted to using MutationObserver.

Upon closer inspection, I found an alternative solution by simply rearranging a few lines of code:

<html>
<head></head>
<body>
  <header></header>
  <main id="root"></main>
  <script src="index.js"></script>
  <footer></footer>
</body>
</html>

Somehow, the <script /> tag appeared on the page before the footer. The <script /> tag is invoked synchronously, and the footer doesn't exist at that moment, so it's impossible to measure its height. By swapping the lines, everything started to work as intended.

Nowadays, developers rely heavily on modern tools like webpack-plugin, causing them to struggle when writing basic HTML.

The Double-edged Sword

React hooks are both a blessing and a curse. While they offer flexibility and an elegant way to handle state, they also significantly increase code complexity and the likelihood of making errors.

The main culprit is the useEffect hook. When the code is not carefully managed, it can easily result in infinite loops or multiple component renders.

To avoid such problems, it is crucial to learn the intricacies of hooks and pay attention to their dependencies.

A Handful of Crucial Suggestions

To help regain focus on frontend fundamentals, I offer the following suggestions:

Take a step back and re-evaluate your knowledge of HTML, CSS, and JavaScript. Make an effort to master the basics before diving into advanced frameworks and libraries.
Keep your code DRY (Don't Repeat Yourself) and follow the KISS (Keep It Simple, Stupid) principle. It will not only make your code more readable but also easier to maintain.
Be cautious when using modern frameworks and tools. While they can be helpful, they may also introduce unnecessary complexity.
Understand the pros and cons of the tools you use. This will allow you to make informed decisions and prevent issues down the road.

In conclusion, while frontend development continues to evolve, it is essential not to lose sight of the basics. By revisiting the core principles and focusing on simplicity, we can create more efficient, maintainable, and scalable solutions.

Forem: Lee Twito

10 must-know tips for crafting the perfect looking README.md for your GitHub repo (with examples)

1. Center Your Elements

2. Responsive Logo

3. Add Badges

4. Demo GIF

5. Feature List

6. Getting Started

7. Code Examples

8. Community and Support

9. Star History

10. Showcase Contributors

11. Share your tip! Or let me know if this was insightful for you

Create headless forms using a schema

Building an Advanced Multistep Form with React-Hook-Form

Building an Advanced Multistep Form with React Hook Form

Creating the Form Context

Creating the Form Steps

Personal Info Step

Employment Step

Review Step

Setting Up Routes

Updating App.js

Conclusion

Rediscovering Frontend Fundamentals

Table of Contents

The Labyrinth of Complexity

Blunders of the Past

The Double-edged Sword

A Handful of Crucial Suggestions