DEV Community: Omid Nikrah

🚀 Introducing Figma Sprite Generator – Effortlessly Create PNG Sprites from Your Figma Icons

Omid Nikrah — Mon, 14 Oct 2024 10:26:39 +0000

Hey DEV community! 👋

I just released a Figma plugin called Figma Sprite Generator, and I’d love to get your feedback! The tool is designed to help designers quickly generate PNG sprites from selected icons within Figma.

🎯 Key Features:
Easy-to-use interface: Select your icons and export them as a single PNG sprite with just a few clicks.
Customizable ratios: Resize icons to your desired scale with a simple ratio selection (e.g., 1.5x or 2x).
Automatic sprite.json generation: Along with the sprite image, you’ll get a JSON file with all the icons' coordinates and dimensions for easy integration in your projects.

🎨 Why I Built This:
As a software engineer, I’ve worked closely with many designers who often struggle with creating spritesheet icons. It’s a frustrating process for them—exporting all the icons from Figma, uploading them to a platform to generate the spritesheet, and then going through additional steps to get the final result. This manual approach is time-consuming and inefficient. Figma Sprite Generator automates the entire process, instantly creating sprites and generating metadata, simplifying the workflow for both designers and developers.

🛠️ How It Works:
Select the icons you want in Figma.
Choose the desired ratio for resizing.
Generate a PNG sprite and JSON metadata with the positions and sizes of each icon.

🌟 Check it out:
You can find the project on GitHub: Figma Sprite Generator. Feel free to contribute, open issues, or suggest improvements!

Let me know what you think in the comments! 🚀

📊 Show your StackOverflow profile status on your readmes!

Omid Nikrah — Thu, 30 Jul 2020 08:58:46 +0000

Recently, I have made an API to show your latest Medium articles in GitHub Readmes, Now you can show your StackOverflow profile status on your readmes by using my new project.

Usage

Copy paste following markdown into your markdown content, and that's it. Easy Easy Tammam Tammam!

Change the ?userID= value to your StackOverflow's username.

[![Omid Nikrah StackOverflow](https://github-readme-stackoverflow.vercel.app/?userID=6558042)](https://stackoverflow.com/users/6558042/omid-nikrah)

Show your latest Medium article in GitHub Readme

Omid Nikrah — Fri, 24 Jul 2020 09:53:54 +0000

3 weeks ago, GitHub adds a feature that enables you to make your profile more usable and beautiful using a README file.

By using GitHub Readme Medium, you can show your latest medium article in your READMEs.

Usage

Copy-paste this into your markdown content, and that's it. Easy Easy Tammam Tammam!

Change the ?username= value to your Medium's username.

[![Omid Nikrah Medium](https://github-readme-medium.herokuapp.com/?username=omidnikrah)](https://medium.com/@omidnikrah)

Autofill OTP code in iOS

Omid Nikrah — Sun, 19 Jul 2020 10:22:31 +0000

HTML elements have many attributes that we don’t use them and maybe we don’t know all of them at all :). One of the useful attributes in form inputs is auto-complete="one-time-code”.

In most websites, Users can log in using the OTP code. When you receive the OTP code, it’s so boring to leave the browser and go to the messages and see the OTP code.

Now, I want to tell you a way to show the OTP code in the iOS keyboard like the following.

How to implement this feature?

First of all, you should set auto-complete=”one-time-code” on your input like the following:

<input type="tel" name="otp-code" auto-complete="one-time-code" />

Now, it’s time to update your SMS message. You should have "code” word in your SMS message.

For example: Code: 123456 is your verification code

Stop using Redux, cache requests

Omid Nikrah — Fri, 17 Jul 2020 21:37:47 +0000

In this article, I don’t want to talk about the new state management library or compare Redux with Context API. I just want to say, in some situations, you don’t need to Redux and you can handle it by other solutions.

Imagine we have a PWA and it’s an online shop. Usually, we navigate between products and check them. When you like a product, you may check it many times and it has a bad experience if every time you should wait for getting product data from the server. We have two solutions to have a better experience.

One. Using Redux (Not recommended)

We can use Redux and have a state to push the product data in this state. But when you have developed a large scale application, It’s not a good solution.

Two. Cache Requests (Recommended)

CACHE REQUESTS. Why using Redux until you can cache requests?

We can have cache storage to store the requests data and when an API request called, first we looking for the response in the cache storage, and if we don’t have it, now we need to call the API request.

We have many ways to implement this feature and I will show you some of them.

You can implement it as the following:

class CacheRequests {
  constructor() {
    this.caches = new Map();
  }

  set(url, response) {
    this.caches.set(url, response);
  }

  get(url) {
    return this.caches.get(url);
  }

  has(url) {
    return this.caches.has(url);
  }
}

const cache = new CacheRequests();

const Request = (url, options) => {
  if (cache.has(url)) {
    return cache.get(url);
  }
  fetch(url, options).then((response) => {
    console.log(response);
    cache.set(url, response);
  });
}

Or if you are using axios, you can also use axios-extensions or axios-cache-adaptor packages.