SoloDevCraft Solo
Dev
Craft

Who is it?

DataHawk is a platform that provides its customers with raw and augmented data on their eCommerce activity. It also offers optimization KPIs to maximize their business impact.

What was the main goal?

As a fast-evolving SaaS platform, DataHawk's technical debt increased significantly over just a few years. To support their transition to a scale-up mindset, the primary objective was to define and implement a comprehensive design system to rationalize the front-end codebase.

What challenges were faced?

The main challenges included managing the existing technical debt, ensuring compatibility with ongoing development, and minimizing disruption to the current codebase. Additionally, it was crucial to maintain continuous deployment and integration practices without halting new feature development.

What solutions were provided?

In collaboration with the Product Designer, the following steps were taken:

• Comprehensive UI/UX Design:
  We thoroughly designed the user interface (UI) and user experience (UX) for every component identified within the application. This involved creating detailed design specifications and guidelines to ensure consistency and usability across the platform.
• Progressive Implementation:
  Given the continuous evolution of the SaaS application, a progressive approach was adopted. This method involved updating and integrating new standard components one at a time. By doing so, we reduced friction with the existing codebase and allowed for seamless updates.
• Continuous Deployment:
  Throughout the process, we maintained a focus on continuous deployment. This approach ensured that improvements were delivered incrementally, providing immediate benefits without interrupting ongoing development efforts.
• Collaboration and Communication:
  Regular communication and collaboration with the product design and development teams were essential. This ensured that all stakeholders were aligned, and any issues could be promptly addressed.

What were the results?

The implementation of the design system resulted in a more maintainable and scalable front-end codebase. This, in turn, led to improved developer efficiency, reduced technical debt, and a more consistent user experience across the platform. The progressive implementation approach minimized disruptions and allowed the team to continue delivering new features and improvements without delay.

Conclusion

The project with DataHawk showcased the importance of a well-defined design system in managing technical debt and supporting scalability. By adopting a collaborative and incremental approach, we were able to achieve significant improvements in the maintainability and usability of the platform, positioning DataHawk for continued growth and success.

What was the purpose of this realization?

This is a professional website. It serves as the showcase of my work as SoloDevCraft and provides a detailed description of the services I offer, including web development, UX/UI design, and consulting.

What were the technical choices?

I chose to test SvelteKit for this development to generate a static site from the Svelte codebase. Alongside this, I used modern HTML, Sass for styling, and ChatGPT to create and enhance the content and illustrations. The site also integrates SEO best practices to improve visibility and search engine ranking.

What did I learn?

Svelte is a straightforward web toolkit, a bit too raw for my taste as I am accustomed to Angular. It can be suitable for small projects or mockups but requires strictness for larger projects, similar to React. In CSS, I had the opportunity to explore advanced techniques such as clip-path and drop-shadow, which were fun to work with and added unique visual effects to the site. Additionally, I gained experience in using SvelteKit's server-side rendering capabilities to improve load times and performance.

Conclusion

This project demonstrated the importance of selecting appropriate technologies and techniques to meet the specific needs of a project. By utilizing SvelteKit, modern HTML, and advanced CSS techniques, I was able to create a high-performance, aesthetically pleasing website. This experience reinforced the value of flexibility and continuous learning in web development, positioning SoloDevCraft for ongoing success.

What was the purpose of this realization?

This page presents my professional resume in French on a proportional A4 format with a print option that renders the same format as on screen.

What were the technical choices?

I chose to use Angular(17) for this development, to test Static Site Generation and metric units in my CSS along with playing with calc() in CSS variables to ensure a paper-oriented rendering on every media.

What did I learn?

As I master Angular, it was quite simple to implement this one-page rendering. However, I had to deal with page proportions to ensure a good rendering regardless of the display media.

Challenges faced and solutions implemented

One of the main challenges was ensuring that the A4 format was accurately maintained across different devices and print settings. To address this, I utilized CSS variables and calc() functions to dynamically adjust the layout based on the viewport size. Additionally, I had to ensure that the print rendering matched the on-screen display precisely, which required careful tweaking of print-specific styles.

What were the results?

The final result was a professional resume page that could be viewed and printed in a consistent A4 format, providing a seamless experience across digital and physical media. This page effectively showcases my professional background and skills in a visually appealing and accessible format.

Conclusion

This project demonstrated the importance of meticulous CSS planning and the utility of Static Site Generation in Angular. By leveraging advanced CSS techniques and ensuring precise control over layout and print styles, I was able to create a versatile and professional resume page that meets modern web standards and user expectations.

Who is it?

Four Js is a company that provides a multiplatform app development ecosystem, based on the business language 4GL. The produced apps can be run and displayed locally or can be served to any device display: web, desktop, or mobile.

What was the main goal?

Ten years ago, as desktop and mobile browsers were on the edge of an evolution leap, Four Js needed to adapt their web rendering engine to fit the new standards of modern web. Although the main goal was to adopt the latest web technologies, the main challenge was to keep the product UX identity, particularly its layout engine, which had to mimic the QT desktop layout to ensure a seamless shift for the existing user base.

What challenges were faced?

The main challenges included managing the existing technical debt, ensuring compatibility with ongoing development, and minimizing disruption to the current codebase. Additionally, it was crucial to keep the compatibility with the application server and the in-house technology stack, including a proprietary UI protocol, application specific lifecycle.

What solutions were provided?

• Custom In-House Framework:
  Given the inefficiency of browsers’ engines at that time and the lack of performance-oriented big frameworks, we decided to create an in-house framework using VanillaJS. This custom solution was inspired by AngularJS and was specifically designed to handle large component trees efficiently.
• Optimized Layout Engine:
  We developed a fine-tuned layout engine that mimicked the QT desktop layout. This engine was optimized with a rationalized layout lifecycle, ensuring seamless integration and performance, providing a consistent user experience across different platforms.
• Progressive Enhancement:
  After a first round to get the basic core components in place, we then adopted a progressive enhancement strategy, implementing new standards and technologies incrementally. This approach minimized disruptions and allowed for continuous improvements without affecting ongoing developments.

What were the results?

The implementation of the custom framework and optimized layout engine resulted in a new front-end client that was efficient, adapted to the modern web standards, and the company current ecosystem. In addition, the web rendering has been adopted as a universal standard for the desktop and mobile platforms, via a webview technology. Performance has been improved, despite it was still an issue on huge component trees.

Conclusion

The project with Four Js showcased the importance of a tailored and performance-oriented approach, making technologic choices that were consistent to the needs and not to the trends. By developing a custom framework and adopting a collaborative and incremental strategy, we were able to achieve significant improvements in the maintainability and usability of the platform, positioning Four Js for continued growth and success.