
I published my first website around 2001. Probably before that. Unfortunately, the exact date I started doing web development is probably lost by now.

Everything began when my dear friend, [Christophe Raimbault](https://www.la-croix.com/Religion/Catholicisme/France/Pere-Christophe-Raimbault-Il-faut-vivre-lEvangile-pouvoir-transmettre-2018-05-20-1200940389), a priest in the [Diocese of Tours](https://en.wikipedia.org/wiki/Roman_Catholic_Archdiocese_of_Tours), asked if I was interested in managing and building a website for the "Notre-Dame La Riche" parish. If you are not too familiar with what a parish is, it's mostly a local community of different churches. At the time, this sounded like an amazing challenge but I had no idea what I was getting into. I had never touch a line of code before, I was only 15 years old. I never stopped coding since then.

The following list of websites are the ones that had the most impact on my life. I build a lot more websites but smaller and less important. I'm not including them here.

## "Notre-Dame La Riche" parish website (2000-2005)

"Notre-Dame La Riche" parish website was my first website. At the time, no blogs, no Google, no Github... most of my time was dedicated in studying code source of other websites, reading books about HTML, CSS, PHP. It was definitelly a fun time. I was learning a lot, things seemed to be a lot more simple than nowadays.

![](/images/articles/decade-web-development-personal-journey/david-dias-present-ndlr.jpg 'Me presenting the website in 2005')

I still have some code source and I can't bear looking at it just for few seconds 🤣: CSS mixed with HTML, no version control, layouts build with tables... as I said, it was fun but I'm glad things have changed. The website had multiple refactoring along the years. I remember having some animated banners build with Flash.

![](/images/articles/decade-web-development-personal-journey/paroisse-ndrl-2004.jpg 'Notre-Dame La Riche parish website in 2004')

![](/images/articles/decade-web-development-personal-journey/paroisse-ndlr-2005.jpg 'Notre-Dame La Riche parish website in 2005')

- Internet Archive URL: https://web.archive.org/web/20050204174756/http://paroissendlr-tours.cef.fr/
- Stack: HTML, CSS, PHP, MySQL
- Current URL: https://paroisse-ndlr-scel.jimdo.com/

## WikiKto (2005-2006)

Wikipedia started in 2001. Wikis at this time was popular and Wikipedia was just at it's beginning. I remember at the time, how many criticims the communaty project received. For lot of reasons I have not kind of forgot, I decided to create a dedicated wiki related to the catholic knowledge. I called it WikiKto (Kto is the french abbreviation for Catholic).

At my big surprise, the project gained a lot of contributors. I was not alone anymore. I was not the only one to think that a wiki about the catholic knowledge was a good idea. I was not the only one to think that the catholic knowledge should be shared and accessible to everyone.

The project was officially launched May 13, 2005. I had to close it more than a year after as I moved to Brazil and couldn't manage it anymore.

![](/images/articles/decade-web-development-personal-journey/wikikto-en.jpg 'WikiKto homepage in English')
![](/images/articles/decade-web-development-personal-journey/wikikto-fr.jpg 'WikiKto homepage in French')

- Internet Archive URL (French): https://web.archive.org/web/20060207032908/http://fr.wikiktosource.org/index.php/Accueil
- Internet Archive URL (English): https://web.archive.org/web/20051227152637/http://en.wikikto.org/index.php/Main_page
- Internet Archive URL (Portuguese - Launched October 12, 2006): https://web.archive.org/web/20070917013037/http://br.wikikto.eu/index.php/P%C3%A1gina_principal
- Stack: MediaWiki, PHP, MySQL
- Old URL: http://wikikto.org/

## WikiKtosource (2005-2006)

WikiKtosource was launched few weeks after WikiKto and was the equivalent to [Wikimedia](https://meta.wikimedia.org/wiki/Main_Page). It was a wiki dedicated to offer open source resources for the catholic community. It was a place to share and download resources like images mainly.

## David Dias Blog (2010 to today)

I created a first version of my personal blog in 2010. Few months before I started my first job as a web developer. For many years, creating new content and maintaining a blog has been a challenge for me with so many things and ideas to create. The current version of my blog (2022-2023) is probably the one that finally got the most attention to me.

![](/images/articles/decade-web-development-personal-journey/david-dias-blog-2012.jpg 'David Dias Blog in 2012')
![](/images/articles/decade-web-development-personal-journey/david-dias-blog-2015.jpg 'David Dias Blog in 2015')
![](/images/articles/decade-web-development-personal-journey/david-dias-blog-2020.jpg 'David Dias Blog in 2020')

- Stack: from Wordpress, to Gatsby (2020) and Next.js (2022)

## França Brasileira (2009-2011)

![](/images/articles/decade-web-development-personal-journey/franca-brasileira-logo.jpg)

Back from Brazil, I decided to created a forum to help Brazilians to move to France and to connect to other Brazilians living in France. Thanks to all my contacts made in Brazil, I was able to get a lot of exposure and the forum and blog got very popular. I

- Internet Archive URL: https://web.archive.org/web/20111210020959/http://www.francabrasileira.com/
- Stack: Workpress, PHP, MySQL
- Old URL: http://www.francabrasileira.com/

## Frontenddeveloper (2013-2014)

`frontenddeveloper.fr` was another trial to create a blog about front-end development. I was not very active on it and I decided to close it after few months.

![](/images/articles/decade-web-development-personal-journey/frontenddev-fr.jpg)

- Internet Archive URL: https://web.archive.org/web/20130205064050/http://frontenddeveloper.fr/
- Stack: Workpress, PHP, MySQL
- Old URL: http://frontenddeveloper.fr/

## Front-End Checklist (2017 to today)

The Front-End Checklist is an open-source project I created just few month before leaving Mauritius. Initially build for my frontend team, it became a worlwide and very popular project around the globe. I have been meaning to build a V2, more modern and with a better user experience. Not sure if and when I will have time to do it.

![](/images/articles/decade-web-development-personal-journey/frontendchecklist.jpg)

- Stack: HTML, CSS, JavaScript
- Current URL: https://frontendchecklist.io/

## World Web Stories (2021 to today)

I officially start the podcast [World Web Stories when I was living in Mauritus](https://www.youtube.com/watch?v=qYtcNF7cuGU&list=PLVrgPXb9LZwjRK2cL1uQ0IllT9Ljokxrz), in 2016. I was not very active, only had 5 episodes and it was in French. In 2021, unemployed for few weeks, I decided to relaunch the podcast in English with a new format and with the goal to interview one person from each country in the world.

Unfortunately, I choose to spend more time on my other podcast "Erreur 200". I still want to continue this project, but I'm not sure when I will.

![](/images/articles/decade-web-development-personal-journey/worldwebstories-podcast.jpg)

- Stack: Gatsby, React
- Current URL: https://worldwebstories.com/

## Erreur 200 (2021 to today)

Erreur 200 is a French podcast I co-host with Jean-Rémy Duboc about web development. We talk about our experience, our mistakes, our successes, our tips and tricks. We also interview people from the web development community.

![](/images/articles/decade-web-development-personal-journey/erreur-200.jpg)

- Stack: Gatsby, React
- Current URL: https://erreur200.com/

## Conclusion

Looking back more than 10 years, I'm very proud and grateful for all the opportunities and projects I had the chance to work on. I'm also very grateful for all the people I met along the way. Those projects shaped in a way my career and life and I'm not even mentionning all the professional projects I've worked on.


Dive into my decade-long journey in web development, chronicling key projects that have shaped my career.

My Decade in Web Development: A Personal Journey and Showcase


Spolight on Mac is great, but it always lacked the possibility to add custom commands and third party access. And that's where [Alfred](https://www.alfredapp.com/) comes in. It's a great application that allows you to do just that. I have been a big fan of "Alfred" at least since 2015. I would recommend this application to anyone who wants to be more productive on their Mac. I was a big fan!

But few months ago, one of my colleague talked to me about [Raycast](https://raycast.com/). Eager to always find better tools and expand my productivity, I decided to give it a try. The first thing I noticed was the speed. Not that "Alfred" is slow, but Raycast was just blazing fast!

I was hooked! And when I found out that all the applications were build in TypeScript, this was the cherry on the cake! After a few weeks now using it, I don't see myself going back.

And today, I wanted to share with you the 10 applications I use the most in Raycast, on a daily basis. Those applications are more towards developers but I highly recommend you to check Raycast out (it's free)

## One Password

![](/images/articles/raycast-applications-super-developer/raycast-1password.jpg)

[1Password](https://www.raycast.com/khasbilegt/1password) has been my password manager for many years. I can search, copy username or password, open the website. The only annoying part is the fact that [1Password](https://1password.com/) always ask me to give access to the application. Annoying but still useful.

## TailwindCSS Docs

![](/images/articles/raycast-applications-super-developer/raycast-tailwind-docs.jpg)

I use [TailwindCSS](https://tailwindcss.com/) and nothing better than opening the TailwindCSS documentation directly from Raycast. I could search directly on the website but this saves me some clicks.

## Github

![](/images/articles/raycast-applications-super-developer/raycast-github.jpg)

Open pull requests, notifications, discussions from [Github](https://www.raycast.com/raycast/github)... I can also search directly repositories from Raycast.

## Spotify

![](/images/articles/raycast-applications-super-developer/raycast-spotify.jpg)

Play, pause, stop, next... I can [control Spotify](https://www.raycast.com/thomas/spotify-controls) directly from Raycast. This is something I was always using on Alfred, couldn't approve Raycast if I didn't have this option.

## Raindrop

![](/images/articles/raycast-applications-super-developer/raycast-raindrop.jpg)

Raindrops is my favourite bookmark manager. The kind of tool that constantly adds new features. I can search, open, add new bookmarks directly from Raycast with the [Raindrop](https://www.raycast.com/lardissone/raindrop-io) application.

## Vercel

![](/images/articles/raycast-applications-super-developer/raycast-vercel-deployments.jpg)

I love seeing the status of [my deployment on Vercel](https://www.raycast.com/vercel/vercast) from Raycast. Can directly open my projects too.

## Visual Studio Code

![](/images/articles/raycast-applications-super-developer/raycast-vscode.jpg)

I use "[Visual Studio Code](https://www.raycast.com/thomas/visual-studio-code)" Raycast App in combinaison with "[Project Manager](https://www.raycast.com/MarkusLanger/vscode-project-manager)" to quickly access all my projects in an instant.

## Bonus: Clipboard History

![](/images/articles/raycast-applications-super-developer/raycast-clipboard.jpg)

This is not an application, but a feature I loved on Alfred and actually exists on Raycast, even it's slighly less powerful.

"Clipboard History" give you access to your last copied items. I've assign the double `⌥` (action) key to open the clipboard history. This is a feature I use constantly, and I'm glad it's available on Raycast.


Raycast is one of the best tool if you want to speed up your productivity on Mac. Here are the 10 applications I use the most in Raycast, on a daily basis.

Raycast Applications That Will Make You a Super Developer!


User testing is a crucial tool for gathering feedback on a product, but it's not enough to truly understand and improve user engagement. For the past 13 years, I have been building multi-language platforms for international brands and for a wide variety of users. Even in a space that constantly changes, where users have evolving needs, it's important to also acknowledge the role that experience plays in understanding them.

![](/images/articles/beyond-user-testing-leveraging-frontend-experience/table-computers.jpg 'Photo by <a href="https://unsplash.com/@marvelous?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Marvin Meyer</a> on Unsplash')

Being a Front-End Developer gave me and all my colleagues around the world a unique perspective on user experience. We understand how small design decisions can have a big impact on the user experience, and we have a deep understanding of how users interact with products. By leveraging our experience in front-end development, we can help create products that are not only effective but also enjoyable to use, leading to increased user satisfaction and loyalty.

## The limits of user testing

User testing is a critical component of product development that can help identify usability issues and gather feedback from real users. By testing products with representative users, product teams can gain valuable insights in how users interact with their interfaces and what their pain points are. Whatever you use services like [User Testing](https://www.usertesting.com/), or your own user testing directly with regular users, user testing also possess some limits that can’t be overlooked.

For example, users may not always be able to articulate their needs and preferences accurately, or identify more obvious usability issues that sometimes are more subtle or hidden. User testing is also typically conducted in a controlled environment, which may not always accurately reflect real-wold usage scenarios.

What about people that don’t use technology in a daily basis?

Usually user testing is done by a certain user group or demographics and don’t include 100% of all users. From my point of view, user testing can’t be really complete without testing with people with disabilities. For people with experience in doing accessibility testing with real users, I’m sure you will agree that.

## User testing can lead to success or failure

Through Internet history, user testing had lead to create successful products:

- Slack (which I daily use) is a popular communication tool. During its development, Slack's team conducted user testing to identify usability issues and gather feedback from its target users. This feedback helped them make improvements to the platform, resulting in a product that was easier to use and more engaging for its users.
- Dropbox is a cloud storage platform that allows users to store, share, and collaborate on files. Dropbox's team used user testing to identify pain points and improve the user experience, resulting in a product that was more intuitive and engaging for its users.
- And a lot more…!

But user testing can also fail to uncover critical usability issues which can contribute to the failure of some projects:

- Google Wave was a communication and collaboration platform that was introduced in 2009. User testing suggested that users would appreciate the platform's advanced features and integration with other Google products, but when it was released to the market, [users found the platform confusing and difficult to use](https://www.taskade.com/blog/google-wave-history/), leading to low adoption rates and eventually the discontinuation of the product in January 2018.
- The Amazon Fire Phone was a smartphone introduced by Amazon in 2014. User testing suggested that users would appreciate the phone's unique features, such as the dynamic perspective display, but when it was released to the market, [users found the phone overpriced and underwhelming](https://maestrolearning.com/blogs/amazon-fire-phone/), leading to poor sales and eventually the discontinuation of the product. The lack of empathy towards the users needs was also part of the reasons why it failed.
- Twitter timeline algorithm: In 2016, Twitter also faced public outrage when they introduced an algorithm-based timeline, which did not align with users' preferences for a chronological timeline that allowed them to see real-time tweets in ascending order.

Building a successful project is not an easy task, a lot of factors can influence the success or the failure of a new product. Nowadays, users have different needs. Users switch faster to competitor then before, we have daily examples of that.

User testing is one tool in companies belt that should be used as often as possible, but shouldn’t be the only one.

## Leveraging Front-End experience

Front-End Developers (FED) are not just coders. Usually seen as the ones that “just” integrate designs into HTML, CSS and JavaScript, their [t-shape personalities](https://infinum.com/blog/t-shaped-developers/) is often times overlooked (not all FES have t-shape skills though).

A FED can play a critical role in creating engaging user experiences.

## Collaboration and communication for better user engagement

As I said in [my previous article](https://thedaviddias.dev/articles/how-front-end-developers-ui-ux-could-better-collaborate-together) about Front-End Developers, Web and UX/UI Designers collaboration, collaboration and communication is key in building a successful product.

This collaborative approach allows different perspectives to merge and create a more holistic vision of the product. As Front-End Developers, we have the unique position of working at the intersection of design and technology. We are often the ones who bring the designers' visions to life while ensuring that the product remains functional and user-friendly.

Front-end development is about more than just making things look good. It's about creating a seamless and intuitive interface that guides users through a product. Every button, every transition, every piece of interactive content is a chance to engage users and keep them invested in the product.

## The Benefits of Leveraging Front-End Experience

Front-end developers have a deep understanding of user behavior, as they are responsible for creating the interactive elements that users engage with. They can use this knowledge to create more engaging user interfaces and to guide user testing to focus on areas of the product that are most likely to affect user engagement.

Beyond just implementing designs, a seasoned FED can provide insights and suggest improvements to the UX/UI designs based on their knowledge of what is technically feasible and what would create a smoother user journey. They can spot potential pitfalls in the designs that might be overlooked during user testing.

For example, a developer might notice that a particular design element could cause issues on certain devices or browsers. They might also suggest an alternative way of implementing a feature that enhances the user's experience. I have been advocating about accessibility for years now. Last year, I became [CPACC certified](https://www.accessibilityassociation.org/s/certified-professional) and I continue to advocate for accessibility in my daily work. Not everyone understand what web accessibility is and how it impacts users. It takes time and effort to educate people about it.

## The Future of User Engagement

As technology advances, users' expectations also rise. They demand faster, smoother, and more intuitive interfaces. User testing will always be a vital tool for gathering feedback, but to meet these evolving demands, we need to go beyond testing.

Incorporating the front-end developer's expertise into the design process and user testing can help create a product that not only meets the users' needs but also provides an engaging and satisfying experience.

We must continue to push the boundaries, experiment with new technologies, and constantly seek ways to better understand and improve user engagement. Only by doing this can we hope to create products that users will love to use.

Front-End Developers bring a valuable perspective to the product development process. Let's use it to its fullest potential to create engaging, user-friendly products. After all, the success of any product lies in the satisfaction of its users.

---

At the end, user engagement is not just about the single experience of a product but the entire journey. It's about creating an engaging, intuitive, and satisfying journey that users want to return to again and again. And Front-End Developers play a crucial role in crafting this journey.

Remember, user testing is a part of the journey, not the destination. We must use all the tools at our disposal, and that includes leveraging the front-end development experience to truly understand and improve user engagement.

Let's continue to build with the user in mind, always striving to enhance their journey, their experience, and ultimately, their engagement.

## Resources

- "[The Importance of User Testing in Product Design](https://www.smashingmagazine.com/2012/06/the-importance-of-user-testing-in-product-development/)" by Smashing Magazine
- "[Experience Design: What It Is and Why It Matters](https://www.adobe.com/creativecloud/design/discover/experience-design.html)" by Adobe XD Ideas
- "[Why User Experience Matters to Front-End Developers](https://uxdesign.cc/why-user-experience-matters-to-front-end-developers-583e3c3a4f4b)" by UX Design
- "[The Benefits of Combining User Testing and UX Design](https://www.usertesting.com/blog/benefits-of-combining-user-testing-and-ux-design/)" by UserTesting
- "[Why User Experience (UX) is Vital for Front-End Developers](https://echobind.com/blog/why-user-experience-ux-is-vital-for-front-end-developers/)" by Echobind


For over a decade, I've been collaborating with web designers, and it's clear that we sometimes have differing perspectives. 'User testing' often takes center stage in decision-making, with the rich insights of frontend experience taking a backseat. But here's the thing - collaboration is pivotal. Recognizing the value that frontend developers bring is crucial for any team aiming to succeed in our fast-paced digital age.

Beyond User Testing: Leveraging Frontend Experience


The web has changed so much in the past 10 years. Technology has enabled new usages, new ways of communication, new ways of seeing the world. Web Design trends are also constantly changing, every year we see new trends that sometimes stick for few years, sometimes they don’t. The same happened in web development: we’ve seen new JavaScript frameworks, new ways to build components, new ways to code CSS, using pre or post-processors. The list is almost infinite. But something that has not changed is the need for collaboration between people working on the same web project.

![](/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/featured.jpeg 'Photo by <a href="https://unsplash.com/@joshcala?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Josh Calabrese</a> on Unsplash')

As a Front-End Developer, I had the chance to work with numerous Web Designers and UX/UI designers over my career. No matter if I was in Brazil, France, Mauritius or Canada, **I have observed the same challenges over and over again**. And one unique solution doesn’t always apply to similar situations. You need to find what works best for you.

In this article, I want to share some topics I believe should be discussed. From my point of view, we, as web professionals want the same thing: **build accessible and performant products that will provide the best user experience possible**.

If you want your product to work, to get revenues, then you should start with the above goal first, not the other way around.

But let’s start with some definitions.

## What is a Web Designer?

![](/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/photoshop-design-desk.jpeg 'Photo by <a href="https://unsplash.com/@easiblu?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Eftakher Alam</a> on Unsplash')

A lot of people could probably define what is a Web Designer better than I. But from my perspective, as a Front-End Developer, a **Web Designer is someone with extensive skills in design that understands the constraints and the possibilities given by the web**. I’ve seen a lot of really good “designers” but who were not always able to fully understand the “web” part of their title. Designing for the web is far from being straightforward. Be familiar with how to use [Sketch](https://www.sketch.com/) or [Figma](https://www.figma.com/) is surely part of being a Web Designer, but it’s unfortunately not enough. And honestly, for me it’s totally fine: you learn as you progress.

Probably, from my point of view, a Web Designers shouldn’t just rely on his knowledge and put pressure on himself to know everything about the web. That’s where a Front-End Developer can come into play. Front-End Developers are the ones that spend their time on the web, scrolling, studying code, finding new ways of building components… They are the perfect buddies of Web Designers, and both should be pairing regularly.

## What is a UX/UI Designer?

![](/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/wireframe-design-table.jpeg 'Photo by <a href="https://unsplash.com/@kellysikkema?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Kelly Sikkema</a> on Unsplash')

**A UX/UI Designer is someone where focus lays on users**. Nothing should be more important than the user, the person, the human. A UX Designer needs to spend a lot of his time doing researches. I’ve always considered that a good UX/UI Designer should be passionate about people, what they want, how they want things… Of course, you also have the word “designer” in the title, because in the context we are talking about, a UX/UI Designer has the task to understand the user and also know what works the best in terms of UI. Something that works for a website dedicate to moms may not work for a website which main users are teens.

> I’ve always considered that a good UX/UI Designer should be passionate about people, what they want, how they want things.

But he is not the only one who has developed an understanding of what users prefer and are used to when they browse the Internet. When a Front-End Developer wants to create a piece of code, a component, he usually dives into his structured memory of patterns. When someone says “button”, it triggers in his brain all the times (thousands of) he clicked on a button, but also snippets of CSS code that can be used to create a button or the long hours he spent analyzing CSS framework documentation…

Front-End Developers can be a huge asset for any UX/UI Designer because they’ve learned so much about the web and usual patterns from a different perspective.

## What is a Front-End Developer?

![](/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/computer-windows-white-table.jpeg 'Photo by <a href="https://unsplash.com/@nublson?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Nubelson Fernandes</a> on Unsplash')

I know a lot of people that could potentially disagree with my definition. For me, a **Front-End Developer is a builder, someone that loves building web content using a combination of multiple skills**. Because a Front-End Developer is not just a coder. To be a Front-End Developer you need to learn HTML, CSS, JavaScript but these are just the basics. You need to understand how to make a [website accessible](https://www.w3.org/WAI/fundamentals/accessibility-intro/), how to use CSS to create an amazing layout, how to translate a design file to CSS, how to keep your application performant, how to build a [UI/pattern library](https://storybook.js.org/)… the list is long but I’m sure you get my point.

A Front-End Developer is the backbone of any web content. Without a Front-End Developer, the website couldn’t be created (even if you use a no-code generator, a Front-End Developer had to create the UI).

Does that mean that a Front-End Developer is more important than other people in their team? Absolutely not, but his role requires him to **be a facilitator, to understand what he can provide for the rest of his team**.

## A Web Designer, UX/UI and Front-End Dev enter together in a bar…

Now that we have a better idea of what these roles represent, how do we make them work together in a way that they feel empowered and enjoying the collaboration?

### It’s about mindset

Any athlete will tell you that mindset is everything to achieve their goals, to win championships, to perform better. This is not that different when it’s about working as a team. Everyone’s mindset is important within a team. But it’s something that the group itself doesn’t have any control. Only individuals can decide to have an open mind, a true relationship with the other member of the team, visualize solutions instead of problems…

We often forget that we all have a common goal. Sure, we can also have multiple goals for ourselves but if you are part of a team, it’s only to achieve a common goal.

Differences are what make this specific group worth existing. EVERYONE has a role to play in any team.

### It’s about culture

But it’s not only about individual mindsets. A team with a Web Designer, UX/UI and developers are usually part of a corporation. All over the world, [numerous companies understand and value their culture](https://hbr.org/2020/01/how-corporate-cultures-differ-around-the-world). This is an essential part to guide employees towards common goals and achieve specific tasks.

If companies provide the tools and the support to create trust and equality between the members of a team, then it makes it easier for people to collaborate together and learn from each other.

### It’s about ego

Aaah the ego! Some people say that a bad reputation can hurt any company, I believe ego can hurt sometimes even more. The ego is one of the biggest enemies of any company, team or leadership group. I had the displeasure to work with 1–2 people during my career with a pretty big ego.

I will always feel the pain these people have caused, it’s important to make peace with any related event but also with them. After all, we are all humans.

Ego shouldn’t exist in a team. Period.

### It’s about collaboration

Collaboration is knowing that people are better than you in certain areas. It’s knowing that you can learn from them. It’s knowing that you can also give something to them. Collaboration is finding the balance and putting everything and everyone at the center of the group.

And no, collaboration is not something you implement once and it’s done, everything will always work perfectly. Collaboration is an equilibrist performance that could go wrong at any time. But you have to keep going because it’s so rewarding when you succeed!

## How to get your team to work together?

Before giving you some answers, I want to tell you about two of the best experiences I had during my career with Web / UX / UI Designers.

![](/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/whiteboard-collaboration-wireframe.jpeg 'Photo by <a href="https://unsplash.com/@kaleidico?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Kaleidico</a> on Unsplash')

### My two best experiences with Designers

**My first best experience was in August 2014**, in Cincinnati, USA. I’ve worked for a month with Barefoot Proximity to build a new platform. [Julie Tran](https://www.linkedin.com/in/tranje/), which was leading the project in terms of design would create pieces of design, sent them to me for prototyping and we would discuss around that. What made the experience amazing was the level of exchange and collaboration.

It wasn’t just about, “Hey, here is the design”, it would be more “hey, here is the design, can you do a quick prototype to see if that works. Let me know if you see any problems that may occur for mobile, accessibility etc…”.

I was able to give my feedback based on my knowledge and experience, Julie would also push back when I would be hesitant to test a particular approach. Combining our visions, being open with each other was what made this project successful. Even with my English being pretty basic at this time, we both enjoyed our work and I kept only good memories from that collaboration.

**My second best experience was in 2015**, with [Julia Bruyneel](https://www.linkedin.com/in/juliabruyneel/), who was working in Paris as a Web/UX Designer freelancer. I was in Mauritius for a month and we had to collaborate for few weeks on new designs for an existing project.

Even with the distance, and not knowing each other before, Julia would contact me and exchange about designs she would have made. That simple communication and regular exchange were reassuring for me (was lead on that project for 3 years) but also a manifestation of maturity and professionalism from Julia. It was short but I kept good memories of that collaboration.

## Mindset, culture and processes

The **three main keys**, from my unique point of view, to have successful teams rely on mindset, culture and processes.

![](/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/mindset-culture-processes.png 'Mindset, culture and processes are the 3 keys for better collaboration')

**Mindset**: If you want to have people working together, in collaboration, using each other experience and vision, they need to have a similar mindset. I’m not saying an “identical mindset” or “same personalities”, I’m saying “similar mindset”. When everyone understands the goal of the team and is open to see each human behind his title, then you have more probabilities to have a successful team.

**Culture**: Sometimes, having a similar mindset is not possible or challenging. In that case, is the responsibility of the structure or company to influence a specific mindset. Companies can decide who should be part of the “family”. That’s why the recruitment process is important.

**Processes**: a lot of people I know, hate the word processes. For me, processes have always mean freedom. When you have a defined and clear process, you don’t have to stress or be hesitant or afraid. A process should exist to guide you in a process where people can predict what will come next. It’s reassuring to know that everyone has the same process in mind. Sometimes, when people's mindsets are not similar or the culture is lacking, processes should help people to visualize the direction they need to take.

You could take these **3 points separated or combine them to maximize your chances** to build successful teams.

## What Web / UX / UI Designers should know about Front-End Developers (letter dedicated to designers)?

> “We love the web and we love being part of the creation process! We decided to become Front-End Developers because we love building! And it’s not just about converting designs to CSS, we love understanding the why, the how of the creation.
> And we understand that this may be scary at times because why the heck a Front-End Developer will tell a designer that his design is not accessible? Or tell the designers that he is not sure, this is gonna work for the user? It’s not about competing, it’s about putting energies in sync.
> The problem sometimes is that we see patterns and code examples in our minds that we don’t always translate for other people to understand. But we’re working on that! I promise!
> We have more to share than just our “title”, we have more to give than just lines of code. We are here to help!”

## The main takeaways from this article

If you are still reading, I hope you also share some common ideas exposed in this article. I have dedicated a portion of my career to try to be a facilitator and share all the knowledge I accumulated to build awesome products.

- Teams composed of Web Designers, UX/UI Designers and Front-End Developers sharing a **similar mindset** have more chances of success.
- An internal culture that encourages **collaboration and equality** between professionals will always produce the best results.
- Enforcing best practices through **processes will help to make things more predictable and reassuring**.
- The ego is one of the worst enemies of teamwork. **You shouldn’t have any space for ego**.
- A Front-End Developer is just a passionate professional **who wants to be part of the creation process** and not just at the end. His integration along the project will ensure the success of any project.

---

What about your experience? How do you like to work with others? What would you like to see happening more often within your team?


Collaboration between Developers and UX/UI Designers is essential to build a good product. With the right mindset, clear processes and an inclusive culture, everything is possible.

How Front-End Developers, Web and UX/UI Designers could better collaborate together?

The David Dias

J'ai compilé la liste des ressources indispensables pour apprendre à devenir développeur Front-End. Vous trouverez dans cette ...

Ressources INDISPENSABLES pour Développeur Web Débutant

Vous venez d'installer Chrome... Et vous ne savez par quoi commencer. Google Chrome Sync vous permet de vous connecter à ...

Comment synchroniser Chrome avec son compte Google

Vous avez envie de partir vivre à l'étranger ? Travailler et gagner de l'expérience en travaillant dans le web ? Voici quelques ...

Astuces pour s&#39;expatrier au 🇨🇦CANADA

thedaviddias

JavaScript

nextjs-typescript-starter


You've probably heard about "mobile first", "content first", "design first", etc. But have you heard about "user first"? I think it's the most important principle of all.

"User First" is a methodology and principle where you put the user first in everything you do.

- Wondering about creating a new feature? Ask your users.
- Wondering what could bring your user's friend to your platform? Ask your users.
- Wondering what could make your user not using your platform anymore? Ask your users.

You get the idea.

So why some businesses continue to do the opposite? Why some businesses continue to do what they think is best for their users without asking them? Sometimes it can a business think they know better what users want.

I sometimes hear "our users don't know what they want, they always complain...". Well, if they complain, it's because they want something else.

User needs creates businesses and businesses create user needs. It's a virtuous circle. If you don't listen to your users, you will lose them. And not excuses will make up for failing to listen to them.


User First" approach puts users at the heart of all decisions. Engage with them to understand needs, ensuring your business remains relevant and loved.

The Methodology and Principle of "User First"


Depending on the platform, sometimes you may get audiobooks in MP3 format. However, MP3 is not the best format for audiobooks. It doesn't support chapters, and it's not bookmarkable. M4B is the best format for audiobooks. It supports chapters and is bookmarkable. It's also the format used by Apple for audiobooks.

Last year, I discovered the only MacOS that simply convert multiple MP3 files into one M4B file. It's called [AudioBookBinder App Store page](https://apps.apple.com/us/app/audiobook-binder/id413969927?mt=12) and can be found on the App Store for free!

## How to use AudioBookBinder?

AudioBook Binder is a simple app that does one thing and does it well. It converts MP3 files into M4B files. You drag your MP3 files into the app, and the cover, and it will convert them into one M4B file.

![AudioBookBinder Files View](/images/notes/audiobinder-mp3-m4v/audiobinder-cover-view.jpg 'AudioBookBinder Files View')
![AudioBookBinder Cover View](/images/notes/audiobinder-mp3-m4v/audiobinder-main-view.jpg 'AudioBookBinder Cover View')

The options are limited but sufficient. You can set the cover, the title, the author, and the genre. I usually leave it to "Audiobook" for the genre.

I hope you find this app useful as I did.

And in case you store some audiobooks on your own server, you take a look at [audiobookshelf](https://www.audiobookshelf.org/). It's a Google and Apple app that allows you to listen to your audiobooks from your own server. It's open-source and free. You're welcome!

![Audiobookshelf](/images/notes/audiobinder-mp3-m4v/audiobookshelf-screenshot.jpg 'Home page of Audiobookshelf')


Explore "AudioBookBinder", a handy MacOS app designed for making audiobooks. It quickly turns MP3 files into M4B format, making audiobook creation a breeze.

How to Convert MP3 to M4B for Audiobooks lovers, on MacOS?


I have seen way too many times people using the `<hr>` HTML element, which is called "thematic break" instead of CSS.

Using the HTML `<hr>` tag purely for designing horizontal lines is an incorrect practice.
The real purpose of the `<hr>` tag is to denote a thematic break in the content (like between paragraphs), not just to visually create a horizontal rule.

If you need a decorative line, CSS is a more appropriate choice.

For instance:

```html
<div class="styled-line">Some content</div>
```

Example CSS:

```css
.styled-line {
  border-bottom: 1px solid #000;
  margin: 1em 0;
}
```

You generally don't want to have a single empty `<span>` or `<div>` element just to style it as a horizontal line. Often times, you can just use a bottom border on the element above it.

In terms of accessibility, using `<hr>` as a design element can confuse screen reader users, as it indicates a "thematic break".

Semantics are important, not only for accessibility but also for SEO. So, please, stop using the `<hr>` tag to design a horizontal line!


It's sometimes easy to forget that UI doesn't dicated semantics. In this article I'll show you how to use the "<hr/>" tag properly.

Stop using the "<hr/>" tag to design a horizontal line!


You may be getting the issue **"The `set-output` command is deprecated and will be disabled soon. Please upgrade to using Environment Files."** from your Github workflow.

![Screenshot showing the 'set-output' issue from the Github workflows](/images/notes/set-output-nvmrc-github-actions.jpg)

Few months ago, I choose to update some of my Github workflows to read from my `.nvmrc` file instead of manually specifying my node version.

```.bash:.github/workflows/production.yml
on: push

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Detect Node version
        run: echo ::set-output name=NODE_VERSION::$(cat .nvmrc)
        id: nvmrc

      - name: Use Node.js ${{ steps.nvmrc.outputs.NODE_VERSION }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ steps.nvmrc.outputs.NODE_VERSION }}
```

But [since October 2022](https://github.blog/changelog/2022-10-11-github-actions-deprecating-save-state-and-set-output-commands/) and the runner version `2.298.2`, Github shows a warning regarding a future depreciation of the `set-output` command.

After few trials, I figured out how to update using the `$GITHUB_OUTPUT` instead:

```.bash:.github/workflows/update-production.yml
on: push

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Detect Node version
        run: echo "NODE_VERSION=$(cat .nvmrc)" >> $GITHUB_OUTPUT
        id: nvmrc
        # shell: bash (to be added if you use composite actions)

      - name: Use Node.js ${{ steps.nvmrc.outputs.NODE_VERSION }}
        uses: actions/setup-node@v3
        with:
          node-version: '${{ steps.nvmrc.outputs.NODE_VERSION }}'
```

And "voilà", the warning should have disappeared and you should see the number of the version right after `Use Node.js XXXX` in your workflow.


Find out how to fix the deprecated set-output when you read the Nodejs version from your .nvmrc file in Github workflows.

How to fix "set-output" when reading nvmrc from the GitHub Actions?

The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your website / HTML page to production.

Front-End Checklist V1

A full guide on all UI Patterns, practices, pitfalls and gotchas for front-end developers.

Hey there!
I'm David Dias

Latest articles

My Decade in Web Development: A Personal Journey and Showcase

Raycast Applications That Will Make You a Super Developer!

Beyond User Testing: Leveraging Frontend Experience

How Front-End Developers, Web and UX/UI Designers could better collaborate together?

Currently reading

To read next

Latest notes

The Methodology and Principle of "User First"

How to Convert MP3 to M4B for Audiobooks lovers, on MacOS?

Stop using the "<hr/>" tag to design a horizontal line!

How to fix "set-output" when reading nvmrc from the GitHub Actions?

Current projects

Front-End Checklist V1

UI Patterns for developers

Updated Open-Source projects

thedaviddias

nextjs-typescript-starter

Latest Youtube videos

Ressources INDISPENSABLES pour Développeur Web Débutant

Comment synchroniser Chrome avec son compte Google

Astuces pour s'expatrier au 🇨🇦CANADA

Hey there! I'm David Dias

Hey there!
I'm David Dias