Frontend Developer at Twitch

Valentin
Cervellera

ValentinCervellera (Frontend Developer at Twitch)

French Front End Engineer at Twitch. Val is passionate about animation in the web, design systems, and user interfaces of the future.

He/Him • Vancouver, Canada • June 13, 2024

What led you to become a developer?

My adventure began with design; as a teenager, I played with all kinds of software to create digital art. I spent countless hours browsing DeviantART for inspiration, learning from skeuomorphism, pixel art, user interfaces in video games, or even from how people designed Winamp skins by imitating 3D in Photoshop.

After a while, it turned into a serious hobby. While the education system in France wasn't particularly prepared to introduce me to jobs of the internet back then, this hobby helped me look for, and eventually, join a web school in France named HETIC. That is where I met Nicolas Le Gall, my first coding teacher, and when I realized I could go far beyond just designing things: I could write code to define how people would interact with a page, animate its elements, and create the perfect layout for it no matter the viewport.

What's your setup and development environment?

You'll find me working in all sorts of places: whether it is at home, or on an adventure abroad, I embrace a very nomad approach to work. I feel the most comfortable working on a laptop, I use the trackpad gestures a lot. I listen to a lot of music when I work, a wide, wide variety of genres. Lately, I've been listening to a lot of Brothertiger, Allison Ponthier, Augustine or Luke Hemmings; my Spotify has over 50 public playlists, if you're looking for new music to listen to, look up my name in the service!


Around me, in my office, there are a number of smart devices; the most precious ones being my lamps which are all set to a different color. On Mondays, I could work in a room enlightened with shades of blue and classical music, while on Tuesdays this same room could be green and purple with drum and bass in my ears. Find your ambience!

What's your favorite stack to work with?

I love working with React and Typescript when it comes to coding applications and websites.
When it gets more creative, I enjoy trying out different libraries and methods every time, although lately, it's been refreshing seeing some 3D work or heavily animated creations done with React.

In the free time I dedicate to coding for fun, I've been having a great time playing with Next.js and the whole ecosystem Vercel has designed. I think that what they're building is spectacular. I also enjoy playing with audio and 3D, creating interactive experiences where a world of shapes would react to sounds or a given song.

Although lately I’ve been more fascinated in the potential of VR and AR; I find myself wanting to creatively ideate in the ways people could engage with their screens in a world where vision and depth play a primary role.

What are your top 5 go-to repos?

- anime.js has been my go-to animation library for the longest time. To push it a mile further with experiences more heavily animated, GSAP has a lot to offer.

- react-three-fiber is the repository I dream to contribute to the most! I find it remarkable what the contributors of this repository have done, to bridge the gap between 3D and react and with a very pleasing and flexible solution.

- Testing Library, a great collection of tools tools to achieve precise testing for React components.

- this front-end setup repository contains a lot of quick tips, but also useful must-haves for front-end developers. Thank you Micah!

- Our design system at Twitch! I cannot share it, but I love the work we do.

What technologies are you most excited about now?

The introduction of AR and VR to the market inspires me a lot. When I recently purchased my first headset, I was amazed by the innovation in the interactions you're introduced to as soon you first start exploring the operating system, the apps, and the games. When you have an entire 3D space to engage with instead of just a two-dimensional screen, the balance between sound design, motion and visual information becomes paramount.

I'm interested to see what experiences will shape our interaction with other layers, or levels of reality, that don't rely as much on a tactile screen, a point-and-click cursor, or other easily available ways to interact with content, even though they're not fully present in our daily lives yet. Aside from all the different ways we may use these new windows of opportunity to communicate between us humans, I am most enthused about the unique and significant problem of bringing effective accessibility to these new dimensions.

What does your ideal workflow look like, from messing around to production?

Anything that involves collaboration. I don't think there's "one" ideal workflow. Whether you're a freelancer or part of a larger team, share what you do, and how you do it, with the people that surround you. They might influence your efficiency or creativity in ways you don't predict!

I worked as a freelancer for some time and realized how difficult it was to come up with your own efficient routine. Just like in any other professional context, we get stuck on errors, or challenges that are difficult to overcome by ourselves, and trial and error is part of our philosophy as developers; we all google our problems to learn about solutions. The more you share about your experiences, the better all developers can become, and therefore, the products we all separately work on.

It goes the same when it comes to collaborating with your peers of any other proficiencies. Share your challenges with designers, managers, QA... and learn together how to sail your boat better. Books and articles may have very valid guidance as well, but the people you work with are unique and possess their own skills that can help define a very unique and specific workflow.

What are you currently learning?

I keep my eyes peeled for the updates that our browsers receive on a regular basis, but also the updates that the libraries we use are getting. With each update for tools and libraries, there is new CSS attributes to discover, or new browser standards, that help us write more reliable and performant code.

I've been learning a lot about accessibility, colors, and performance. Through those three pillars, I have first been challenging myself to write code that is much more compliant with the Web Content Accessibility Guidelines (WCAG). I have been discovering how to tap into the newly available color spaces like Oklab, and what difference they can bring to the way we write colors, gradients, and how we animate or transition between them. Finally, I've been appreciating making my code more robust, pairing my components with a correct series of tests, and searching for ways to write the most performant code.

What are beginner developers not learning that is critical in this day and age?

Meet other peers! Make connections, as many as you can. Learn about what people do, all around the globe. The web is engineered and designed by people from all over the planet, and their experience as a human being differs from one place to another, with different languages, contexts, visual languages...

A theater full of people, listening to Jean-François Chainé, a speaker presenting the work of their agency during the Awwwards Conference.
The Awwwards Conference in Amsterdam, in 2019.

One of the best ways to network is to volunteer or attend conferences. Since 2014, I've assisted in the organization of the Awwwards conferences in numerous places. During this time, I've met a wide range of creatives with whom I can connect and frequently celebrate their accomplishments. It will help you realize that the creatives of an agency or company you dream of working with are just like you and that you have what it takes to get there. I can't stress this enough. Meet the creatives! :)

Speaking of celebration, I think it's also critical to recognize and celebrate all sorts of victories. It could be something small, like when you finally figure out how to solve a problem after a week of trying, or it might be the release of a really cool website by a company you admire. Share their work, spread the word, and celebrate them!

✌️