Challenging Myself to Recreate UI Elements From Around the Web:Here What I’ve been Building, Using and Learning An Insightful Thread by Delba de Oliveira @delba_oliveira Delba de Oliveira @delba_oliveira I'm challenging myself to recreate UI elements from around the web as a way to learn new things and keep fresh. Here's a wip thread on what I've been building, using and learning: ️ Base stack: • Next.js • @TailwindCSS • PostgreSQL and @Prisma Delba de Oliveira I love finding delightful UI elements on the web and I think recreating components is a great way for front-end developers to apply their skills. If you visited my site before, you probably know I started this challenge with an ambitious goal to recreate 30 front-end components in 30 days. But alas, between job interviews, work and home, I fell behind. So I' ll be continuing the series of front-end challenges, but without a timeframe to allow myself to create polished components. Here are some I' ve been delbaoliveira.com/blog/frontend-… 977 June 13, 2021 Delba de Oliveira @delba_oliveira 01: Inspired by @Vercel's iconic "Develop. Preview. Ship" hero text. I recreated a component that takes a set of given words and animates them line by line. 126 June 13, 2021 Delba de Oliveira @delba_oliveira 02: Inspired by @JoshWComeau. A like button that animates an SVG and persists the number of likes to a database using @Prisma. I spent some time breaking down Josh's button and came up with a list of 10+ things triggered by the user. His attention to detail is incredible. ❤️ 51 June 13, 2021 Delba de Oliveira @delba_oliveira 03: Link previews created with @microlinkhq and @radix_ui. I first saw this component on @raunofreiberg's check it out, it's a nice website uiwtf An experimental laboratory for user interfaces. uiw.tf 97 June 13, 2021 Delba de Oliveira @delba_oliveira 04: Gradient borders as seen on the Next.js conf tickets and @Instagram's buttons. On the conf website, users can customize their tickets by changing the border color. p.s. have you grabbed your ticket? Next.js Conf A special edition of Next.js Conf, presented by Vercel (creators of Next.js) and Google Chrome. Let's make the web. Faster. nextjs.org/conf 36 June 13, 2021 Delba de Oliveira @delba_oliveira 05: @Instagram's animated gradient background. A pretty cool style that I'm starting to see in a few different sites. Note: I learned about gradient banding after this gif 33 June 13, 2021 Delba de Oliveira @delba_oliveira Up next: Static twitter card so I can embed tweets on my blog - currently learning more about @Twitter's API: p.s. let me know if you have any suggestions of UI elements I could try tackling next 28 June 13, 2021 Delba de Oliveira @delba_oliveira @KennKibadi @joshmanders @tailwindcss @prisma @heroku I think Prisma is one of those things you don't fully appreciate until you've tried it. Check out their website and this video: 16 June 13, 2021 Delba de Oliveira @delba_oliveira @swyx @JoshWComeau @prisma @geddski Swyx* 1 June 15, 2021
