Forem: Fabio J Raminhuk

Introducing DevShowcase: The Platform Where Developers Shine and Connect

Fabio J Raminhuk — Mon, 12 May 2025 23:12:23 +0000

If you're a developer looking for a professional and efficient way to showcase your portfolio, connect with the tech community, and get discovered by recruiters, meet DevShowcase — the new platform built by developers, for developers.

🌐 What is DevShowcase?
devshowcase.dev is a platform designed to help developers share their portfolios, discover new talent, and connect with others in the industry. Whether you’re junior, mid-level, or senior, DevShowcase gives you a spotlight to show what you’re capable of.

👨‍💻 For Developers
Sign up using Google or GitHub

Add your portfolio, tech stack, short bio, and social links

Gain visibility through a public developer directory

Discover and connect with other developers in the community

🧑‍💼 For Recruiters & Companies
Tired of sifting through generic platforms to find skilled developers?

With DevShowcase, you can:

Browse developer profiles filtered by technology, seniority, or name

View real portfolios with links, project highlights, and stacks

Find the right talent faster and more effectively

🎯 Our Mission
We believe every developer deserves a platform to showcase their talent and connect with meaningful opportunities. DevShowcase exists to strengthen the developer community by offering a free, intuitive, and visibility-focused platform.

🛠️ How It Works
Sign in with Google or GitHub
Fast and secure. We use your public profile info to get you started.

Build Your Portfolio
Add your portfolio link, tech stack, a short bio, and social media handles.

Get Discovered
Your profile is indexed and searchable by tech stack, seniority, and name.

Connect
Explore other developers, make connections, and grow your network.

🤝 Join the DevShowcase Community
More than just a portfolio platform, DevShowcase is a vibrant and growing network of developers passionate about learning, building, and advancing their careers.

📢 Spread the Word!
If you love what we’re building, share it with fellow devs, tech recruiters, or post your DevShowcase profile on LinkedIn using the hashtag #DevShowcase. Together, we can highlight the talent that powers the tech world.

Leveraging useRef in TypeScript for Efficient DOM Manipulation

Fabio J Raminhuk — Sat, 06 Apr 2024 14:08:25 +0000

When it comes to managing DOM elements in React applications, the useRef hook emerges as a powerful ally, particularly when working with TypeScript. useRef allows us to reference DOM elements directly, facilitating tasks such as focusing inputs, measuring elements, or even integrating with third-party libraries.

Understanding useRef in TypeScript:
In TypeScript, useRef is declared with a generic type parameter, specifying the type of the referenced element. This enhances type safety, ensuring that the referenced element matches the expected type.

import { useRef } from 'react';

// Example of useRef with TypeScript
const myRef = useRef<HTMLDivElement>(null);

Practical Examples:

Accessing DOM Elements:

import { useRef, useEffect } from 'react';

const MyComponent: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return <input ref={inputRef} />;
};

Managing Previous State:

import { useRef, useEffect } from 'react';

const MyComponent: React.FC = () => {
  const prevValueRef = useRef<number>(0);
  const [value, setValue] = useState<number>(0);

  useEffect(() => {
    prevValueRef.current = value;
  }, [value]);

  return (
    <>
      <p>Previous Value: {prevValueRef.current}</p>
      <input
        type="number"
        value={value}
        onChange={(e) => setValue(parseInt(e.target.value))}
      />
    </>
  );
};

Interfacing with Third-party Libraries:

import { useRef, useEffect } from 'react';
import * as d3 from 'd3';

const MyD3Component: React.FC = () => {
  const svgRef = useRef<SVGSVGElement>(null);

  useEffect(() => {
    if (svgRef.current) {
      const svg = d3.select(svgRef.current);
      // D3 code for visualization
    }
  }, []);

  return <svg ref={svgRef}></svg>;
};

Benefits of useRef in TypeScript:
Type Safety: TypeScript ensures that the referenced elements adhere to the specified type, reducing runtime errors.
Efficient DOM Manipulation: useRef facilitates direct access to DOM elements, enabling efficient operations like focusing inputs or integrating with external libraries.
Enhanced Code Readability: By providing a clear reference to DOM elements, useRef improves code readability and maintainability.

In conclusion, the useRef hook in TypeScript significantly enhances the management of DOM elements in React applications. Its integration provides type safety, efficiency, and clarity, empowering developers to build robust and scalable user interfaces.

Reference:
Leveraging useRef in TypeScript for Efficient DOM Manipulation

Understanding Intersection Types in TypeScript

Fabio J Raminhuk — Sat, 06 Apr 2024 13:59:19 +0000

Introduction

Intersection types are an essential feature in TypeScript that allow developers to combine multiple types into a single type. This powerful tool enhances type safety and flexibility in codebases. In this article, we'll delve into what intersection types are, how they work, and explore some practical use cases in TypeScript.

What are Intersection Types?

Intersection types in TypeScript are denoted by the & symbol and are used to combine multiple types into a single type that has all the features of each constituent type. When a value is of an intersection type, it must satisfy all the types included in the intersection.

Syntax:

type CombinedType = Type1 & Type2;

Example:

type Dog = {
  name: string;
  breed: string;
};

type Bird = {
  name: string;
  wingspan: number;
};

type Pet = Dog & Bird;

const myPet: Pet = {
  name: "Charlie",
  breed: "Labrador",
  wingspan: 30,
};

Use Cases:

Extending Object Types:

Intersection types are useful when extending object types with additional properties while retaining the original properties.

type User = {
  id: number;
  name: string;
};

type Admin = {
  id: number;
  role: string;
};

type SuperAdmin = User & Admin;

const superAdminUser: SuperAdmin = {
  id: 1,
  name: "John Doe",
  role: "Super Admin",
};

Combining Function Signatures:

Intersection types can combine multiple function signatures, allowing functions to accept different parameter types or return multiple types.

type Logger = (message: string) => void;
type Formatter = (message: string) => string;

type LogFormatter = Logger & Formatter;

const logAndFormat: LogFormatter = (message) => {
  console.log(message);
  return `Formatted: ${message}`;
};

Conclusion

Intersection types in TypeScript provide a powerful mechanism for creating complex types by combining multiple types. They offer enhanced type safety and flexibility, enabling developers to express richer data structures and function signatures in their code.

Explore more about TypeScript's intersection types and unleash their potential in your projects!

References:
Understanding Intersection Types in TypeScript
Intersection Types