Publication
To Designers With Love (A Letter From a Front-end Developer)
https://www.toptal.com/developers/front-end/to-designers-from-a-front-end-developer
Vedran is currently unavailable
Vedran Aberle Tokić
Verified Expert in Engineering
Front-end Developer
Zagreb, Croatia
Toptal member since July 23, 2015
Bio
Vedran is a software engineer with two decades of broad web development experience. Evolving from designer to developer to manager and owner, he acts as a "linchpin" between design, business, and engineering. A technical polyglot with a decade of freelancing, he fluently adapts to any stack. His core passion is the intersection of web and graphics; specializing in 3D, procedural animation, complex UI/UX, and - lately - generative AI.
Portfolio
Freelance client
Open-source LLMs, Stable Diffusion, Bun, HTML, CSS, JavaScript, Python...
Toptal Clients
React, Bootstrap, SVG, CSS3, HTML5, jQuery, JavaScript, Styled-components...
Toptal, LLC
JavaScript, CSS3, HTML5, CSS, Agile Software Development...
Experience
- JavaScript - 20 years
- Front-end Development - 20 years
- User Experience (UX) - 14 years
- User Interface (UI) - 12 years
- Three.js - 7 years
- Artificial Intelligence (AI) - 2 years
- Generative Artificial Intelligence (GenAI) - 1 year
- ComfyUI - 1 year
Preferred Environment
Visual Studio Code (VS Code), Node.js, Bun, TypeScript, Electron, Python, Claude Code, JavaScript
The most amazing...
...thing I've developed recently is a 3D wheelchair configurator with procedurally generated geometry and exceptionally high attention given to fidelity.
Work Experience
Web Developer | AI Engineer
2025 - 2026
Freelance client
- Built an image tagging and semantic tag network graphing and pruning tool, created a dataset connected library with image examples and tag relationships.
- Trained custom image feature detection models (YOLO), trained feature tagging transformer model, and feature detection, refinement, and segmentation (SAM, Florence, Transformers).
- Built a cross-reference validation tool that finds a valid intersection of image tags that is understood by the generative model (SDXL), the image tagger diffuser (WD-EVA), and the dataset.
- Built an in-house ComfyUI Custom Node Pack for image generation harnessing. Built an in-house ComfyUI Custom Node Pack for automated training and regularization.
- Trained iterative SDXL/Illustrious finetunes and checkpoint merges. Trained feature, character, concept, and style LoRAs. Distil complex harnessed workflows down to an SDXL checkpoint.
- Worked on dataset refinement by pruning a dataset of 20,000 images, matching regularization data, retagging, and validating against target features and tags.
- Built a multi-model inference chaining harness and context management system where small single responsibility LLMs detect, modify, and constrain the context of a larger general model on the Llama 2 and Llama 3 architectures.
- Trained and finetuned small, specialized, purpose-oriented LLM models for converting chat context into image prompts matched to our SDXL models. Created context editing and feedback tools and dataset creation tools for iterative reinforcement learning.
- Created a Visual Novel-inspired chat interface with automated context-based image generation, narrative constraints, narrative progression, multi-character chat with context-aware LoRA activation, and RAG retrieval for long-term context memory.
- Built an orchestration electron app with process management, pipeline automation, and an integrated control panel. Integrated cope-limited Claude Code assistant with limited ability to directly create and modify control panel widgets.
Technologies: Open-source LLMs, Stable Diffusion, Bun, HTML, CSS, JavaScript, Python, Image Generation, Context Engineering, OpenAI API, Electron, TypeScript, NVIDIA CUDA, LoRa, Kohya, SDXL, Llama 3, Claude Code, Claude API, Artificial Intelligence (AI), ComfyUI, ComfyUI Custom Nodes, AI Tools, Transformers, Flask, Monaco, Xterm.js, Socket.IO, Node.js, Express.js, Webpack, YOLOv11, Dynamic Prompt Engineering, Dynamic Context Engineering, Large Language Models (LLMs), ESM Javascript, Claude Agent SDK, Agentic AI
Front-end Web Developer
2019 - 2025
Toptal Clients
- Built a client dashboard with custom UI elements for a lending platform using Bootstrap, Sass, and jQuery.
- Designed and built a match replay viewer app for an esports training service using SVG, JavaScript, and React.
- Developed a client dashboard with custom UI elements for a home automation platform using Bootstrap, Sass, jQuery, and React.
- Created an automated mapping service interface using React, TypeScript, styled-components, and Storybook. Also, I provided UI/UX development services and liaised with an external design team.
- Built a simple browser-based 3D editor that creates embeddable scenes using React and Three.js (React-three-fiber).
Technologies: React, Bootstrap, SVG, CSS3, HTML5, jQuery, JavaScript, Styled-components, Storybook, TypeScript, Three.js, User Experience (UX), User Interface (UI), CSS, HTML, Animation, Sass, Git, Google Maps, Agile Software Development, WebGL, Node.js, DOM, ECMAScript (ES6), Mobile First, Responsive Web Design (RWD), Responsive, JSON, Front-end Development, 3D Modeling, 3D Animation, Vanilla JS, Figma, CSS3 Animation, HTML5 Animations, Shopify, UI Animation, Blender, Web Animation, CSS Animations, SCSS, Front-end, Docker, APIs, Mobile UI, Material UI, Figma Plugins, GitHub, API Integration, WebGPU, Express.js, Next.js, Minimum Viable Product (MVP), Communication, Regular Expressions, Optimization, Refactoring, Scalable Application, REST, Web API, ESM Javascript
Engineering Blog Editor
2017 - 2019
Toptal, LLC
- Proofread and fact-checked author submissions and helped the authors communicate their ideas. Published articles using custom CMS and HTML.
- Built and implemented email templates and template redesigns using HTML and HubSpot.
- Performed traffic analysis and user behavior research using Google Analytics.
- Created design briefs for the design team to produce graphics and illustrations for the articles.
Technologies: JavaScript, CSS3, HTML5, CSS, Agile Software Development, Search Engine Optimization (SEO), APIs, Communication
Front-end Web Developer
2015 - 2017
Toptal Client
- Built the user interface for a creator-supporter communication platform using Bootstrap.
- Developed animations, interactive infographics, and custom UI elements for a web development agency using SVG, HTML5, CSS3, JavaScript, and jQuery.
- Created a functional application mockup for presentation to potential investors using Bootstrap, Google Charts, and Webpack.
- Built a client dashboard with custom UI elements for a webshop/investment platform using Bootstrap, Sass, and jQuery.
- Developed animations and user interface for a browser-based power-management educational game using d3.js and JavaScript.
- Constructed a website front end with animations, parallax, and custom interactive UI elements for a consulting agency using Bootstrap, Sass, and jQuery.
- Built multiple iterations of a market research prototype for a large industry client. Implemented and ran A/B testing, research analysis, and test marketing campaigns, using Bootstrap, jQuery, Google Analytics, and Google AdWords.
- Redesigned and rebuilt an existing administration system for a sports streaming service, using Bootstrap, Sass, jQuery, and Webpack.
Technologies: TypeScript, Webpack, D3.js, Bootstrap, SVG, CSS3, HTML5, jQuery, JavaScript, User Experience (UX), User Interface (UI), HTML, Animation, Web Design, CSS, Sass, Git, Google Maps, Agile Software Development, Node.js, DOM, ECMAScript (ES6), Mobile First, Responsive Web Design (RWD), Responsive, JSON, Search Engine Optimization (SEO), Front-end Development, A/B Testing, Vanilla JS, CSS3 Animation, HTML5 Animations, UI Animation, Web Animation, CSS Animations, SCSS, Front-end, Docker, APIs, DigitalOcean, Mobile UI, GitHub, API Integration, Express.js, Minimum Viable Product (MVP), Communication, XML, jQuery UI, React, Optimization, Rich Internet Applications, Usability, REST, Web API, ESM Javascript
Front-end Web Developer
2014 - 2015
Omega Media d.o.o.
- Created an online 3D presentation platform using Three.js.
- Designed and developed a back-end-less (WYSIWYG) CMS using jQuery and custom two-way binding.
- Created a responsive company website with 3D elements and graceful degradation using Three.js.
- Translated clients' visual identity guidelines to reusable CSS3 templates using Stylus.
- Implemented company-wide Kanban and defined development workflows using Jira.
Technologies: WebGL, CSS3, HTML5, jQuery, JavaScript, User Experience (UX), User Interface (UI), CSS, HTML, Animation, Web Design, Git, Agile Software Development, Node.js, Three.js, DOM, ECMAScript (ES6), Mobile First, Responsive Web Design (RWD), Responsive, JSON, Search Engine Optimization (SEO), Front-end Development, 3D Modeling, 3D Animation, Video Editing, Vanilla JS, CSS3 Animation, HTML5 Animations, UI Animation, Web Animation, CSS Animations, SCSS, Front-end, APIs, Mobile UI, GitHub, API Integration, Minimum Viable Product (MVP), Communication, XML, LAMP, jQuery UI, Regular Expressions, Rich Internet Applications, Usability, Refactoring, REST, SVG, Web API
Project Manager | Web Developer
2013 - 2014
Inventa d.d.
- Developed an application for banner testing and client approval using PHP, MySQL, jQuery, and Dropzone.js.
- Created an embeddable JavaScript ad that uses DOM analysis and pathfinding to navigate graphical elements without obscuring the page contents using jQuery.
- Created an embeddable JavaScript ad that modifies the target page's DOM and stylesheets to rebrand the page and inserted content (including parallax backgrounds, canvas animations, and more) using jQuery.
- Created an ad testing service that takes a live site URL, retrieves its code, and modifies it to be usable on another domain, and finally replaces existing ad delivery functionality in the source with custom ad delivery using PHP and jQuery.
- Developed a responsive parallax site for a startup conference, including booking services using PHP, MySQL, and jQuery.
- Coordinated multiple projects between international clients and third-party developers using MS Project and Basecamp.
Technologies: CSS3, HTML5, jQuery, JavaScript, User Experience (UX), User Interface (UI), CSS, HTML, Animation, Web Design, Google Maps, DOM, Mobile First, Responsive Web Design (RWD), Responsive, JSON, Search Engine Optimization (SEO), Front-end Development, A/B Testing, Vanilla JS, CSS3 Animation, HTML5 Animations, UI Animation, Web Animation, CSS Animations, Front-end, APIs, Mobile UI, API Integration, Express.js, Minimum Viable Product (MVP), Communication, XML, LAMP, jQuery UI, Sass, Regular Expressions, Rich Internet Applications, Usability, REST, Web API
IBU Technical Manager
2011 - 2013
Nova TV d.d. (CME Corp.)
- Produced several large-scale news/content portals using a custom CMS with LAMP.
- Produced a pay-per-view video streaming platform using LAMP and Adobe Media Server.
- Implemented and developed multiple revenue-generating channels (ad serving systems, content branding services, video branding services, and more).
- Designed and developed a JavaScript-only house-ad serving solution to reduce delivery costs using jQuery.
- Developed multiple image and video gallery applications using Flash and HTML5.
- Produced multiple iOS, Android, and other (e.g., Symbian, smart-TV) applications for content sites.
- Produced an upgrade and redesign of the biggest national blogging platform.
Technologies: CSS3, HTML5, jQuery, JavaScript, User Experience (UX), User Interface (UI), CSS, HTML, Animation, Google Maps, Agile Software Development, DOM, Mobile First, Responsive Web Design (RWD), Responsive, JSON, Search Engine Optimization (SEO), Front-end Development, Video Editing, A/B Testing, Video Streaming, Vanilla JS, CSS3 Animation, HTML5 Animations, UI Animation, Web Animation, CSS Animations, Front-end, APIs, Mobile UI, API Integration, Minimum Viable Product (MVP), Communication, XML, LAMP, jQuery UI, Sass, Optimization, Text Processing, Usability, Refactoring, Scalable Application, REST, Web API
Web Developer
2008 - 2011
Nova TV d.d. (CME Corp.)
- Developed the front end for a major national sports portal, including video stream implementation, score tracking from various services, advertising implementation, and more.
- Built a website for children accompanying a child-oriented TV channel with multiple Flash-based games, video streaming, and promotional content.
- Developed a Flash image gallery with features such as voting, skinning, and content-aware resizing.
- Produced a content-serving platform for all sites using a custom CMS. The service was used for providing site content in various formats (SOAP, JSON, XML) as well as modular custom templates.
- Developed the front end and implemented various features and designs for one of the major national news portals.
- Built a from-scratch 3D rendering environment (and website) in ActionScript 2.0 (featuring bitmap or animated (MovieClip) textured polygons and limited shading).
Technologies: jQuery, CSS, HTML, JavaScript, User Experience (UX), User Interface (UI), Animation, Web Design, Google Maps, DOM, Mobile First, JSON, Search Engine Optimization (SEO), Front-end Development, 3D Modeling, 3D Animation, Video Editing, Video Streaming, Vanilla JS, CSS3 Animation, HTML5 Animations, UI Animation, Web Animation, CSS Animations, Front-end, APIs, Mobile UI, API Integration, Communication, XML, LAMP, jQuery UI, Sass, Regular Expressions, Text Processing, Usability, Wamp, Refactoring, Scalable Application, REST, SVG, Web API
Founder, CEO
1999 - 2008
White Smoke, Ltd.
- Developed a web-based application for office-to-studio control of TV gameshow graphical overlays using PHP, MySQL, and ActionScript.
- Built a skinnable, remote-controlled, live TV gameshow overlay using Flash with an output to a Blackmagic graphics card for broadcasting.
- Created a WYSIWYG, skinnable, SEO-aware CMS for rich Flash websites.
- Developed a two-way binding framework between HTML DOM and Flash using JavaScript and ActionScript.
- Produced websites and web-based applications for numerous clients and contractors in a wide range of technologies.
Technologies: CSS, HTML, JavaScript, Animation, Web Design, DOM, Front-end Development, Vanilla JS, UI Animation, Web Animation, Front-end, Minimum Viable Product (MVP), Communication, XML, LAMP, Graphic Design, Regular Expressions, Usability, Wamp
Web Developer | Designer
2007 - 2007
Autronic Computers, Ltd.
- Designed and developed a computer configuration app in Flash, enabling customers to customize and purchase personal computers from available stock.
- Built an interface between stock, billing, and website, enabling visitors to see the availability of products.
- Created a service that would parse and auto-populate website, stock, and billing applications from custom-formatted Excel files.
- Designed and developed a company site redesign.
- Designed and prepared promotional graphics for offset printing.
Technologies: JavaScript, CSS, HTML, Web Design, DOM, Front-end Development, Vanilla JS, UI Animation, Web Animation, Front-end, Communication, XML, Graphic Design, Regular Expressions, Usability
Lecturer
2005 - 2005
Infokatedra, Ltd.
- Produced courses and learning manuals for Macromedia Flash and ActionScript.
- Wrote courses and learning manuals for web design and Macromedia Fireworks.
- Produced courses and learning manuals for HTML, CSS, and Macromedia Dreamweaver.
- Produced courses and learning manuals for JavaScript.
- Taught courses in Adobe Photoshop, Adobe Illustrator, CorelDRAW, Microsoft Office, and computer basics.
Technologies: JavaScript, CSS, HTML, DOM, Front-end Development, Vanilla JS, Front-end, Communication, XML, Graphic Design, Regular Expressions
Experience
3D Wheelchair Configurator
https://notawheelchair.com/pages/configuratorBuilt a 3D configurator with parametric model generation and a complex map of constraints and input dependencies. Model preparation, retopologizing, texturing, and texturing from SLT to glTF and dynamically generated meshes. Built custom constraint-aware inputs. Built an API for external control and Shopify integration.
Counter-Strike Replay Viewer
https://pureskill.gg/Built a match replay viewer for a Counter-Strike coaching service. Initially envisioned as a linear player (like a video player), the final solution far surpassed initial expectations - using frame interpolation and the ability to restore missing information from context, the replay viewer was empowered for arbitrary replay speed and instantaneous jumping to an arbitrary point in the replay, both by user navigation and programmatically.
React Three.js Integration for 3rd Person In-browser Game
The client had a Three.js project of a third-person game integrated into a React app. I was tasked with resolving multiple optimization and integration issues that resulted in severe memory and performance issues. The project was in an advanced state of development, so migration to React Three Fiber and drei.js was not feasible, and instead, a custom garbage collection and GPU resource management system was required to solve the problem, resulting in orders of magnitude gains on both counts. Besides that, resource refinement, camera controls, character controls, animation management, and lighting were built and implemented.
3D Scene Editor and Embeddable Viewer
Built a 3D scene editor in React, enabling the user to drop glTF files, position them, bind scripted interactions and animations to them, and output an embeddable viewer that can be injected into a webpage.
Cutting Edge Selector
First pilot for Toptal Enterprise, a market research and proof of concept for Caterpillar with A/B testing, user tracking, and Google Ads integration that would eventually grow into project "Yellow Dragon" and Caterpillar's parts webshop.
Investor Pitch MVP for Air Travel Carbon Offset
A fully featured MVP investor demo with API integration with Airlabs.co, on request, ingests flight data from API, identifies commercial passenger flights, calculates CO2 cost per passenger from airplane model and flight distance, and offers carbon footprint offset options applicable to that flight, ultimately linking to the carrier's ticket purchase funnel with carbon offset data in the request.
Automated Dental 3D Scan Segmentation
Web-based dental scan segmentation tool using geometry and topology to automatically detect teeth and segment them into separate jaw and individual teeth models from uploaded STL files. Optimized pre-existing detection from 1-2 minutes per segmentation to 6 seconds per segmentation. Implemented various sub-algorithms for error correction and missing data interpolation.
3D Sports Event Schedule Display
A locally running 3D app displaying disciplines and competitors at a gymnastics competition event. Competitors and current standings are entered via a back-end input and live updated to be displayed inside the animation loop, displaying the relevant equipment and competitors.
Global 3D Map Management Tool for Autonomous Driving Training
React-based interface for map point-cloud data management, UI for uploading, tagging, viewing, and modifying large-scale 3D point-clouds, elaborate user and role management interfaces, and large dataset management. Part of the Toyota Research Institute - Woven Planet initiative.
News Portal
Developed and maintained a major national news portal, both as a developer and later technical manager, working on a plethora of features such as live streams, rich media, advertising, weather, image galleries, interactive features, major event coverage with interactive media (elections, breaking news events), and more, a part of the broader novatv.hr and CME media platform.
National TV Channel Website
I built and maintained a website for the most-viewed national TV channel with TV guide and guide service APIs. As a technical manager, I developed and delivered a complete site rehaul, enabling branded microsites and complex templating—part of the broader novatv.hr and CME media platform.
Sports Portal
This is a national sports portal with live streams of international sports events, featuring a wide range of events and media coverage, integration with multiple score-tracking services, advertising services, and special-event microsites (e.g., the Olympics, world and European championships, and more).
Women's Lifestyle Portal
I developed the initial website and managed the team for the subsequent site rehaul, creating one of the first national responsive content portals, now part of the broader novatv.hr and CME media platform.
Entertainment TV Channel Website
I built and maintained a website for a lifestyle and entertainment TV channel with TV programming, multiple TV guide APIs, and rich media content, now part of the broader novatv.hr and CME media platform.
Video-on-Demand Service Website
http://oyo.hrDeveloped and produced an international project (OYO/VOYO) for pay-per-view and subscription-based video-on-demand services. Features complex video management and automated video conversion, processing/encoding, DRM integration, various payment methods, simulcast/multicast streams, and more.
Marketing Agency Report Website
An presentation/showcase framework and website incorporating WebGL 3D animations and parallax in a responsive environment, animated data visualization of campaign goals and results for multiple agency clients. Device feature detection and performance based feature scaling.
Fashion Portal
http://www.grazia.hrA fashion portal featuring a fully WYSIWYG (back-end-less) CMS, procedural grid recalculation, and lazy content loading.
Local Website for Nivea
http://www.nivea.hrThis is an international content platform with various localized interactive microsites, public product testing, user contests, and more.
Skills
Libraries/APIs
Three.js, jQuery, React, jQuery UI, Claude API, D3.js, WebGL, Google Maps, Node.js, Web API, OpenAI API, WebGPU, Socket.IO
Tools
Figma, ComfyUI, GitHub, Blender, Claude Code, Webpack, Git, Claude Agent SDK, Figma Plugins, Flash, Canvas
Languages
TypeScript, ECMAScript (ES6), HTML5, CSS3, CSS, HTML, JavaScript, SCSS, XML, Sass, Python, PHP
Frameworks
Bootstrap, Vanilla JS, Express.js, Material UI, Electron, Next.js, Laravel, Flask, Angular
Paradigms
Responsive Web Design (RWD), Responsive, Refactoring, Scalable Application, Search Engine Optimization (SEO), Agile Software Development, REST, Model Context Protocol (MCP)
Storage
JSON, MySQL
Industry Expertise
Web Design
Platforms
LAMP, Shopify, Visual Studio Code (VS Code), Docker, DigitalOcean, Google Ads, NVIDIA CUDA, Kohya
Other
User Experience (UX), SVG, Animation, Mobile First, DOM, Front-end Development, CSS3 Animation, HTML5 Animations, UI Animation, Web Animation, CSS Animations, Front-end, APIs, ESM Javascript, API Integration, Mobile UI, Minimum Viable Product (MVP), Communication, Graphic Design, Regular Expressions, Text Processing, Rich Internet Applications, Optimization, User Interface (UI), Wamp, Usability, Context Engineering, Artificial Intelligence (AI), Open-source LLMs, Llama 3, LoRa, Stable Diffusion, Generative Artificial Intelligence (GenAI), Retrieval-augmented Generation (RAG), Agentic AI, 3D Modeling, 3D Animation, A/B Testing, Video Editing, Video Streaming, Styled-components, Storybook, Dynamic Prompt Engineering, Dynamic Context Engineering, Image Generation, Large Language Models (LLMs), Bun, Web Project Management, LAMPP, Streaming, Digital Rights Management (DRM), Payments, Responsive UI, Adaptive Performance, 2D Animation, Mathematics, Geometry, SDXL, ComfyUI Custom Nodes, AI Tools, Transformers, Monaco, Xterm.js, YOLOv11, GLSG Shaders, Texturing, Procedural Generation, Retopology, GL Transmission Format (glTF), Memory Profiling, Memory Leaks, MVP Design, React Three Fiber (R3F), Back-end, Design, Airlabs API
Collaboration That Works
How to Work with Toptal
Toptal matches you directly with global industry experts from our network in hours—not weeks or months.
1
Share your needs
Discuss your requirements and refine your scope in a call with a Toptal domain expert.
2
Choose your talent
Get a short list of expertly matched talent within 24 hours to review, interview, and choose from.
3
Start your risk-free talent trial
Work with your chosen talent on a trial basis for up to two weeks. Pay only if you decide to hire them.
Top talent is in high demand.
Start hiring