Raif Shareef (@raif)

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...

Sep 5, 2025 · 8 min readmovinginterfaces.hashnode.dev

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...

Aug 26, 2025 · 6 min readmovinginterfaces.hashnode.dev

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...

Mar 14, 2024 · 9 min readraif.hashnode.dev

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...

Jul 19, 2023 · 4 min readraif.hashnode.dev

Juggling in learning code - Dev Retro 2022

tldr from chatgpt 🤣 Raif, a Product Manager based in Malaysia, learned SQL, built a dApp with Solana, React, and Rust, learned PHP basics, and worked on a side project using Nuxt 3 in 2022. He plans to continue learning new technologies and improve...

Jan 7, 2023 · 5 min readraif.hashnode.dev

Raif Shareef

About

Available for

Raif Shareef's blogs

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)

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

Juggling in learning code - Dev Retro 2022

Raif Shareef

About

Available for

Raif Shareef's blogs

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)

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

Juggling in learning code - Dev Retro 2022

Raif Shareef

About

Available for

Raif Shareef's blogs

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)

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

Juggling in learning code - Dev Retro 2022

Search Hashnode

Raif Shareef

About

Available for

Raif Shareef's blogs

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)

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

Juggling in learning code - Dev Retro 2022