Matjaž Drolc
Verified Expert in Engineering
Software Developer
Ljubljana, Slovenia
Toptal member since August 14, 2018
Matjaž has been a professional software engineer since 2015. He's been working with various technologies such as React, PHP, Symfony, Python, TypeScript, Angular, WebRTC, and Docker. He deployed software on AWS and on-premises. He has worked on an app for booking hairdresser appointments and a system for helping with asphalt quality control. In addition to professional experience, Matjaž has a number of years of experience developing as a hobby.
Portfolio
Experience
Availability
Preferred Environment
Linux, Docker, PhpStorm
The most amazing...
...thing I've worked on is a high-performance visualization of millions of data points in a web browser.
Work Experience
Lead Developer
Viabix Ltd
- Set up our platform, including Gitlab, CI pipelines, Docker images, and Ansible playbooks to manage the virtual machines.
- Created a reporting module for exporting to Microsoft Excel in .NET Core (C# with EPPlus).
- Created a 3D viewer of road surfaces with Three.js, Google Maps, OpenStreetMap (via OpenLayers), and RxJS.
- Collaborated with an AI expert to remove faces, vehicle license plates, and other personal information from photos.
- Designed a measurement data pipeline: the data is transformed to be readily used by the 3D viewer and report generators.
- Processing and compressing data sets for 2D and 3D visualization in the web browser with WebGL, RxJS, Google Maps, and Lodash.
- Architected and coded the back end in PHP with Symfony, REST, OAuth2, Twig, and PostgreSQL. For long-running tasks, I coded a job-governor daemon with Node.js, Express.js, and Socket.io.
- Rewrote performance-critical parts in C++. For some code paths, Python and PHP were too slow. Decided to use a compiled language to achieve a better user experience.
- Developed the "Prediction and Maintenance" module as a single-page app with Angular, TypeScript, RxJS, and NgRx.
- Maintained the software over the long term. This includes upgrading dependencies and moving away from old libraries, for example, transitioning from AngularJS to Angular.
Full-stack Engineer
Undisclosed client
- Led and implemented the transition from HLS to WebRTC to achieve low latency and robust video streams.
- Added new features and maintained existing Flask, Python, and React codebase; this included refactoring and adding tests to the old code.
- Managed our AWS deployment, which included autoscaling, complex IAM policies, S3 lifecycle policies, and cloud spending optimization.
Lead Software Engineer
Altaray Solar (via Toptal)
- Updated and refactored their sales tool into smaller services using Docker.
- Implemented continuous integration process using GitLab.
- Integrated the TypeScript code done by another developer.
- Updated PDF document generator that is written in Go.
- Added automatic tests using Jest to catch any regressions.
Software Developer
PricePilot.io
- Created an interface for editing complex bookings.
- Contributed to the development of customer-facing services.
- Initiated the use of modern engineering practices such as pair programming.
- Wrote tests for REST APIs to automatically perform security and functional tests before each release.
- Worked on REST back end written in Symfony. We also used HATEOAS.
Experience
Weight Logger
https://github.com/drola/weight-logger-pwaDesktop App for Data Visualization and Tagging
Based on those requirements, I decided the solution would be a desktop app and not a web app. Desktop apps have direct access to the computer's filesystem and do not require a server, user authentication, and administration. However, web platforms have a significant advantage when it comes to data visualization. D3.js library offers versatility unmatched to any other library I've seen on the desktop. We picked Electron.js as the best option to execute this project. It gives us the ability to work with files on the computer and use web technologies to render beautiful interactive charts. Because of Electron.js, I was also able to leverage existing knowledge in front-end development to build the application's user interface. The use of familiar technologies enabled me to deliver the solution to the client reliably. Each data file contains thousands of data points. My previous experience helped me develop an efficient way to render them.
Technology stack: Electron, D3.js, React, SVG, HTML, CSS, NumPy, npm, and webpack.
Unveiling WebAssembly: What, Why, How?
https://www.todojs.com/unveiling-webassembly-what-why-how-by-matjaz-drolc/WebAssembly is a technology that expands possibilities of what we can do in web browsers. It enables developers to further optimize their code, and it opens up an option to use almost any programming language to program web applications.
Summary of the talk:
* What is WebAssembly?
* What can you use it for?
* Comparison to existing technologies.
* Showcase of how to bridge WebAssembly and JavaScript.
* Demo: face detection with OpenCV and WebAssembly.
Market Data Viewer
The biggest challenge was the amount of data. Hundreds of thousands of data points had to be rendered at interactive speeds. I used the fact that browsers are very fast at compositing layers to achieve that. So I divided what needs to be displayed in a background layer where most of the data is and a top layer where interactive effects are shown (such as highlighting a point when hovering over it with a mouse pointer). This meant it didn't have to update the layer with a vast amount of data too often. I was only redrawing the small area around the mouse pointer.
After finishing the basic rendering, we added the ability to annotate the data and defined a JSON schema for saving those annotations. The idea was that we would generate annotations automatically.
Tech stack: D3.js, JavaScript, HTML, CSS, Node.js, MySQL.
Creating JavaScript Objects in 2018
https://drola.si/post/2018-07-05-creating-js-objects-in-2018/Animations for a Physics Textbook
• Animating states of matter: based on "heating" or "cooling," the molecules transition between ordering themselves in a crystal (solid-state), spreading themselves on the bottom of the container (liquid), or randomly jumping around the whole container (gas). The animation combines SVG, JavaScript, CSS, and HTML.
• Catapult: an interactive experience where one can play with a catapult. All angles and stiffness of the elastic can be adjusted. After triggering, the ball's trajectory is simulated based on integrating Newton's laws of motion. The catapult itself was drawn in Inkscape. The resulting SVG has been embedded in an HTML document and made alive by adding JavaScript.
Data Visualization in Asphalt Quality Control
https://drola.si/portfolio_data_viz/roads.gifI was tasked with making most of the technical decisions, including the choice of libraries and the initial bootstrapping of the project, whose main components are:
• A 3D viewer based on Three.js, WebGL, Bootstrap, and RxJS.
• 2D cross-section views based on D3.js and SVG.
• Excel (XLSX) report generator. We use advanced Excel features such as generating charts with data-points styling based on whether a particular section of a road satisfies the given quality criteria.
• Data preprocessing pipeline: visualizations and reporting are based on raw CSV files which are then processed. We built some processing code ourselves and integrated the software coming from research institutions.
• We are further developing the product by bringing richer data processing functionality with Jupyter, NumPy, and Pandas.
Serverless Jupyter
https://drive.google.com/file/d/1uRS9askiukTpovFl_2KYArdxl6QWS8vU/view?usp=sharingJupyter is an incredible tool for prototyping calculations and data analysis in Python. Jupyter has two essential parts: the Python process on a server and JavaScript code running in the browser.
Due to recent developments in web platforms, this might change. Browsers now support WebAssembly, which opens the door to running other programming languages besides JavaScript directly in web browsers. This includes Python and important libraries like SciPy, NumPy, and Pandas.
This will eventually make Jupyter notebooks easier to share because the requirement to have a strong server infrastructure will be gone.
Computer Tomography in my Garage
https://drola.si/demos/ct_prezentacija.pdfIngredients:
* Dad's gramophone for predictable rotation of objects
* A DSLR camera
* An LCD monitor for backlight
* Some code in MATLAB/Octave
Result:
A rough but working demonstration of the principle behind computer tomography.
How:
CT works by taking pictures of a semi-transparent object from multiple angles and obtains a 3D model by running a back-projection algorithm on those pictures. In medical applications, the patient's body is semi-transparent to X-rays. In the garage variant, I used an object made from glass and ordinary light.
The slides in the presentation are in Slovenian, but they contain some nice pictures.
Education
Bachelor's Degree in Physics
Faculty of Mathematics and Physics, University of Ljubljana - Ljubljana, Slovenia
Certifications
NestJS Fundamentals
NestJS Core Team
Skills
Libraries/APIs
Node.js, jQuery, D3.js, Doctrine 2, React.js, WebGL, Three.js, WebRTC, NgRx, Google Maps Development, OpenStreetMap API, RequireJS, OpenLayers, FFmpeg, SQL
Tools
Toggl, Excel Development, Docker Compose, Angular CLI, Git, GitLab CI/CD, Git, PyCharm, Webpack, PhpStorm, Photoshop, MATLAB, GIS, Celery, AWS, LaTeX, Mathematica, GIS
Languages
PHP, PHP, TypeScript, JavaScript, Python, HTML, CSS, SQL, C++, C#, Octave, Julia
Frameworks
Symfony, Symfony, Symfony, AngularJS, Angular, Electron.js, Flask, Twitter Bootstrap, Bootstrap, Symfony, NestJS, Material UI, Redux, Jest, GStreamer
Paradigms
REST, Object-relational Mapping (ORM), Object-oriented Programming, Design Patterns, Agile Development, Dependency Injection
Platforms
Docker, AWS, Visual Studio Development, Linux
Storage
PostgreSQL, GIS, MySQL
Industry Expertise
Banking Consulting
Other
WebAssembly, Front-end, Web Development, Full-stack, APIs, Full-stack, Data Visualization, Maps, SaaS, Booking Systems, Booking Apps, Appointment Booking, Software Architecture, Back-end Developers, GeoJSON, API Integration, UI Development, Geographic Information Systems, FontAwesome, Autoscaling, Physics, Mathematics
How to Work with Toptal
Toptal matches you directly with global industry experts from our network in hours—not weeks or months.
Share your needs
Choose your talent
Start your risk-free talent trial
Top talent is in high demand.
Start hiring