Raif Shareef

@raif

Product | Design

Kuala Lumpur, MalaysiaJoined May 2020

About

I am a self-taught developer and product manager based in Malaysia. Currently learning and documenting the journey.

Available for

Nothing here yet.

Raif Shareef's blogs

Raif's Tech Blograif.hashnode.dev9 posts

Moving Interfacesmovinginterfaces.hashnode.dev2 posts

Articles Comments9

Recently published

RSRaif Shareefmovinginterfaces.hashnode.devSep 5, 2025 · 8 min read

Build a click-to-flip card widget

Introduction In this step by step guide we’ll be building a widget which flips on click. It works as a flashcard or could even work as part of a webpage, making it more interactive and engaging to visitors. Starting from reducing information overload...

0

RSRaif Shareefmovinginterfaces.hashnode.devAug 26, 2025 · 6 min read

How to animate text fade in on web with CSS

Outline What had started off as a curious detour into web animations, has led me to create this blog to document my learnings and experiments. In this post, we’ll look at basics of animation and do a simple text fade in with css covering the followin...

0

RSRaif Shareefraif.hashnode.devMar 14, 2024 · 9 min read

A Practical Guide to Parsing Recipe Ingredients with Python (Flask)

Processing a list of ingredients into a dictionary When I started to learn code in 2020, I was only interested in front-end development. When I started to work on projects, I got frustrated I didn't know how to work with databases and the backend. Fr...

0

RSRaif Shareefraif.hashnode.devJul 25, 2023 · 6 min read

UX Research - Socar App

Disclaimer: This research was done on April 2023. Any updates to the app and more recent reviews are not accounted for. Overview In this research project, I will share the process and analysis of reviews. The purpose was to understand user pain poin...

0

RSRaif Shareefraif.hashnode.devJul 19, 2023 · 4 min read

Building a landing page hero with Vue-Chakra-UI design system

I just finished a short course on "how to use a design system in code" by Design System University [2]. This post is for documenting what I've learned and putting it into practice. We'll go over putting together a super simple landing page header sec...

0

Raif Shareef

About

Available for

Raif Shareef's blogs

Recently published

Build a click-to-flip card widget

How to animate text fade in on web with CSS

A Practical Guide to Parsing Recipe Ingredients with Python (Flask)

UX Research - Socar App

Building a landing page hero with Vue-Chakra-UI design system

Search Hashnode

Raif Shareef

About

Available for

Raif Shareef's blogs

Recently published

Build a click-to-flip card widget

How to animate text fade in on web with CSS

A Practical Guide to Parsing Recipe Ingredients with Python (Flask)

UX Research - Socar App

Building a landing page hero with Vue-Chakra-UI design system