لرن سرا

برچسب: Codrops

  • Developer Spotlight: Max Barvian | Codrops

    Developer Spotlight: Max Barvian | Codrops


    In past Developer Spotlights, we’ve featured devs who’ve pushed the craft of building award-winning websites. But web development is more than just translating great design—Max Barvian is one of those pioneering devs who have a deep understanding of the core mechanics of frontend development. In 2024, he shared one of the coolest CSS-powered, scroll-driven animations with us here on Codrops. We can’t shine the light enough on Max, as his work represents the next frontier in web development—one that merges deep technical knowledge with creative experimentation.

    Hi! My name is Max Barvian. I’m a UI engineer currently working at Clerk.

    Projects I’m proud of

    NumberFlow

    NumberFlow is an animated number component for React, Vue, Svelte, and vanilla TS/JS. It was heavily inspired by the number animations in the wonderful Family app:

    I built NumberFlow as a custom element with wrapper components for each framework. All the animations are powered by the Web Animations API (WAAPI). It uses the FLIP technique, registered custom CSS properties, spring-based linear() timings, new CSS math functions, and composited KeyframeEffects for better interruption handling.

    The response to NumberFlow has been surreal. 𝕏 is currently using it for their analytics dashboard, and Elon Musk even retweeted this screenshot of it:

    barvian.me

    When it came time to rebuild my portfolio last year, my goal was to make some combination of Godly and the Apple TV home screen. I’d really wanted a site like that for years, with a grid of project videos that smoothly transitioned into detail pages, but never felt confident about pulling it off. Then I found the View Transitions API. Despite its shortcomings (i.e. no interruption handling), it felt like the perfect tool for the job. View Transitions using snapshots of “old” views seemed perfect for the video grid, and meant I wouldn’t have to worry about animating a bunch of <video> elements at the same time. Ultimately, I had to use a few more tricks to get decent performance during the transitions, but I still can’t imagine having built the site with anything else. I was honored when Googlers Addy Osmani and Una Kravets shared my little site as a demo for View Transitions.

    Musée

    I stumbled upon this incredible design by Kevin Pham on Dribbble a couple years ago and immediately fell in love with it. I had wanted to experiment with CSS Scroll Snapping and 3D scenes for a while, and this seemed like the perfect candidate. I ended up using React Three Fiber, Motion for React, and Tailwind to implement it. It’s not perfect (there’s a pesky bug with mobile Safari on the last slide that I haven’t been able to fix), but I’m pretty happy with how it turned out. I was honored when Guillermo Rauch, Paul Henschel, Matt Perry, and Three.js all reposted it.

    Fluid type projects

    This work is probably the most boring on the list but I’m still happy with it. I was working on a Tailwind plugin for CSS clamp() when I encountered some longstanding accessibility issues with fluid type. I didn’t want to bring those issues into my plugin, so I spent a whole Sunday watching math videos on YouTube and talking to my physicist brother to figure out how to work around them. I eventually published the results in Smashing Magazine with some help from their great editors there, and was honored to see Adrian Roselli reference the work in his original article. Utopia, a popular fluid clamp generator, also integrated the findings into their tool.

    About me

    I got into creative development in a 7th grade journalism class, when my teacher made me the webmaster for our school newspaper. I asked my parents for Dreamweaver that year for Christmas and got my first freelance client a year after that. I’ve since moved on from Dreamweaver 🙂, but I’ve never wanted to do anything else professionally. I feel lucky that I’ve been able to make a career out of my passion.

    Current challenges

    At Clerk I’m working on building the component library we use for our dashboard. It’s been a fun challenge to try to build something that equally emphasizes UX and DX! I hope to share more on 𝕏 as it progresses. React Aria Components has been a huge inspiration here.

    Tools

    I basically live in VS Code writing React, Tailwind, and Motion code all day.

    Philosophy

    Someone I follow on 𝕏 thought NumberFlow was a good example of a quote by Charlie Munger:

    “Take a simple idea and take it seriously.”
    —Charlie Munger

    That’s stuck with me over the last few months, and I think it’s increased my enjoyment of projects I previously would’ve dismissed as too routine or boring.

    It’s an honor to be featured on a site I’ve been reading my whole career. Thanks a lot, Manoela and the Codrops team!



    Source link

  • Designer Spotlight: Stephanie Bruce | Codrops

    Designer Spotlight: Stephanie Bruce | Codrops


    Meet Stephanie Bruce, an Independent Designer and Webflow Developer based in London, UK. She has been designing for over 2 years, previously working in Finance. 

    She loves editorial layouts, photography and visually creative web designs. She works closely with agencies and clients worldwide.

    In this spotlight, Stephanie shares a selection of her favorite projects — a window into her creative process, inspirations, and evolution as a designer.

    Featured work

    Valentine

    This is my latest project where I did the art direction, photography direction, web design and development for Freewrite Valentine. The main purpose of the website is to promote their latest Freewrite Valentine, playing tribute to the original Olivetti Valentine typewriter.

    I used retro ads and posters as the main inspiration for the web design and photography direction. We decided to go with a bold red colour throughout the website to emphasise the retro red vibes. I had a two weeks deadline to design and build, as well as photography direction.

    MOD Agency Collab

    A web design project I did at MOD agency, with creative director Matt Jumper. My role was to design the website and create data visuals. It was my first time designing data visuals and I was pretty happy with how fun they turned out. Huge thanks to Mod agency for bringing me along for this project.

    SP28K

    SP28K was an exploration website I did on the Flow Party On Demand course. For this design I decided to explore brutalist design with a touch of editorial layout. This project challenged me to go for a bold approach using expressive typography and high-contrast fonts. Photoshoot of the speaker was done in Spline.

    Concepts and explorations

    Outside of client work, I love spending time creating my own concepts and web design explorations. By creating concept work, I learnt how much I love editorial, photography based websites and how I hope to attract similar work in the near future.

    Especially being a relatively new designer, these concepts have helped me get noticed on social media and led to many opportunities.

    Brief biography and career highlights

    I switched careers from Finance to Design over two years ago. I wanted to find a job that I loved, and once I discovered the world of Digital Design, I became pretty obsessed. I feel like I found my calling.

    When I worked in Finance, I spent a lot of my spare time immersed in the creative world. I would go to exhibitions, galleries, theatre plays, etc. I also studied Photography, which helped me develop an eye for detail and composition. I feel that the combination of my exposure to the arts and my photography skills has played a big role in developing a strong visual eye for design.

    Since changing careers, I’ve had some amazing opportunities to work with leading designers and agencies — from a six-month internship with Fons Mans to collaborations with designers like Dann Petty and Benten Woodring.

    I’ve been freelancing since the beginning of my design career and am very grateful that my work and network have led to multiple collaborations with international clients and agencies.

    Inspiration

    I find that most of my inspiration comes from looking at design outside of web design. I often look at magazine layouts, prints/posters, and branding assets. Exploring these areas challenges me to create things you don’t typically see on websites.

    I also draw a lot of inspiration from visiting art galleries and exhibitions around London, as well as from films and video games like Firewatch and Before Your Eyes.

    Future Goals

    Currently, I’m focused on working with agencies, as I enjoy collaborating and learning as much as possible from them.

    In the near future, I’d love to work with lifestyle and e-commerce clients, and maybe team up with someone to create a purposely small, boutique agency.

    Message to Readers

    Put in the time to practice design, and get comfortable with sharing your work online and networking — it can lead to so many opportunities and collaborations.

    I’d also say it’s totally fine to explore different skills at the beginning, but I recommend committing to mastering one or two that truly excite you. Stay open to learning and keep pushing yourself to improve, no matter how many years of experience you have.

    Feel free to reach out to me on Twitter or Instagram — whether you have a project in mind or just want to grab a coffee, in person or online!





    Source link