Blogs
Being able to share what I know through these posts is truly a delight for me. May you pick up a thing or two from these. 😊
Filter posts by topics
![FileTree Component with interactions using TailwindCSS by Jeff Segovia](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fabide-in-the-vine%2Fimage%2Fupload%2Fv1723185893%2Fjeff%2520dev%2520blog%2Ffiletree-post_l2u5yz.png&w=3840&q=75)
Learn how to create a FileTree component with interactions while leveraging the features of TailwindCSS.
![Creating an Input with Floating Label with TailwindCSS by Jeff Segovia](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fabide-in-the-vine%2Fimage%2Fupload%2Fv1722246648%2Finput-with-floating-label_guhpds.png&w=3840&q=75)
Learn how to create an HTML input field with a floating label using TailwindCSS.
![Building A Carousel With ReactJS by Jeff Segovia](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fabide-in-the-vine%2Fimage%2Fupload%2Fv1683804192%2Freact-carousel-banner_mdrlup.png&w=3840&q=75)
Tutorial on how to create a carousel using ReactJS and the Embla Carousel library
![Building an Audio Player With ReactJS by Jeff Segovia](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fabide-in-the-vine%2Fimage%2Fupload%2Fv1679551482%2Fjeff%2520dev%2520blog%2Freact-audio-player-banner_wsz506.png&w=3840&q=75)
Learn how to build an audio player with ReactJS and the audio HTML element.
![React Render Prop Pattern by Jeff Segovia](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fabide-in-the-vine%2Fimage%2Fupload%2Fv1670578747%2Fjeff%2520dev%2520blog%2Fjeffsegovia.dev_omdor7.png&w=3840&q=75)
The render prop pattern in ReactJs is a pattern which when used right can lead to the creation of flexible and reusable components. Learn how to create a component that applies the render prop pattern in this post.
![Couchbase CRUD API With NodeJs And TypeScript by Jeff Segovia](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fabide-in-the-vine%2Fimage%2Fupload%2Fv1668561852%2Fjeff%2520dev%2520blog%2Fnode-ts-cb%2Fcouchbase-crud-api-node-ts_jx4u5g.png&w=3840&q=75)
The introduction of Couchbase 7 opens the possibility to group data into scopes and collections. Have a glimpse of Couchbase's rich features by creating a simple CRUD API with NodeJS and TypeScript
![REST API Validation Using Zod by Jeff Segovia](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fabide-in-the-vine%2Fimage%2Fupload%2Fv1665644919%2Fjeff%2520dev%2520blog%2Fnode-ts-cb%2Frest-api-validation-using-zod_jz25r7.png&w=3840&q=75)
Learn how to validate a NodeJS REST API using Zod, a TypeScript-first validation library
![REST API Using NodeJs And TypeScript by Jeff Segovia](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fabide-in-the-vine%2Fimage%2Fupload%2Fv1665558548%2Fjeff%2520dev%2520blog%2Fnode-ts-cb%2Fjeffsegovia.dev_u6qzid.png&w=3840&q=75)
Learn how to create a REST API using NodeJS runtime and TypeScript
![Scroll-To-Top Functionality With React by Jeff Segovia](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fabide-in-the-vine%2Fimage%2Fupload%2Fv1664858835%2Fjeff%2520dev%2520blog%2Fjeffsegovia.dev_1_uuduyq.png&w=3840&q=75)
Learn how to create a custom React hook for scroll-to-top functionality
![Image Preview React Hook by Jeff Segovia](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fabide-in-the-vine%2Fimage%2Fupload%2Fv1664440019%2Fjeff%2520dev%2520blog%2Fimage-preview-hook-blog%2Fjeffsegovia.dev_con0tn.png&w=3840&q=75)
How to create an image preview component using a custom useImagePreview hook in ReactJs
![Multiple Checkboxes In Form With ReactJS by Jeff Segovia](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fabide-in-the-vine%2Fimage%2Fupload%2Fv1663421900%2Fjeff%2520dev%2520blog%2Fmultiple-checkboxes-blog%2Fmultiple-checkboxes-react_fqdxpi.png&w=3840&q=75)
Learn how to work with multiple checkboxes in React
![Controlled Input With React-Hook-Form by Jeff Segovia](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fabide-in-the-vine%2Fimage%2Fupload%2Fv1663379245%2Fjeff%2520dev%2520blog%2Fcontrolled-input-rhf_ddxgde.png&w=3840&q=75)
Create a controlled input with ReactJs using a library called React Hook Form
![Basic Form Handling With ReactJS by Jeff Segovia](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fabide-in-the-vine%2Fimage%2Fupload%2Fv1663379239%2Fjeff%2520dev%2520blog%2Fbasic-form-react_e6lsyj.png&w=3840&q=75)
Learn how to create and handle basic forms in ReactJs using the useState hook.
![Managing Forms In ReactJS Using React-Hook-Form by Jeff Segovia](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fabide-in-the-vine%2Fimage%2Fupload%2Fv1663379265%2Fjeff%2520dev%2520blog%2Freact-hook-form-1_wrafsz.png&w=3840&q=75)
Learn how to create and manage better and more performant forms in React using React Hook Form