Matjaž Drolc, Developer in Ljubljana, Slovenia
Matjaž is available for hire
Hire Matjaž

Matjaž Drolc

Verified Expert  in Engineering

Software Developer

Location
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

Viabix Ltd
C#, C++, Docker, AngularJS, Angular, PHP, Symfony 3, Symfony 2, TypeScript...
Undisclosed client
Flask, SQLAlchemy, React, Celery, GStreamer, WebRTC, FFmpeg, Autoscaling...
Altaray Solar (via Toptal)
Docker, Node.js, PHP, Angular, Git, REST, PhpStorm...

Experience

Availability

Part-time

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

2015 - PRESENT
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.
Technologies: C#, C++, Docker, AngularJS, Angular, PHP, Symfony 3, Symfony 2, TypeScript, JavaScript, PostgreSQL, GitLab, Git, WebGL, Three.js, Bootstrap 3+, Bootstrap, REST, Doctrine 2, Object-relational Mapping (ORM), Object-oriented Programming (OOP), Docker Compose, Angular CLI, GitLab CI/CD, PhpStorm, Visual Studio Code (VS Code), Flask, Symfony, Front-end, Web Development, Full-stack, Data Visualization, User Interface (UI), Maps, Web GIS, Geographic Information Systems, APIs, HTML, CSS, SaaS, Node.js, SQL, NgRx, PHP 7, jQuery, Software Architecture, Full-stack Development, Back-end, Test-driven Development (TDD), Google Maps API, OpenStreetMap API, GIS, GeoJSON, API Integration

Full-stack Engineer

2019 - 2021
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.
Technologies: Flask, SQLAlchemy, React, Celery, GStreamer, WebRTC, FFmpeg, Autoscaling, AWS CloudFormation, SQL, Software Architecture, Amazon Web Services (AWS), Full-stack Development, Back-end, Test-driven Development (TDD)

Lead Software Engineer

2018 - 2019
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.
Technologies: Docker, Node.js, PHP, Angular, Git, REST, PhpStorm, Visual Studio Code (VS Code), Front-end, Web Development, Full-stack, User Interface (UI), APIs, HTML, CSS

Software Developer

2015 - 2016
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.
Technologies: AngularJS, Docker, PHP, Symfony 2, JavaScript, PostgreSQL, GitLab, Git, Bootstrap 3+, Bootstrap, REST, Doctrine 2, Object-relational Mapping (ORM), Object-oriented Programming (OOP), Docker Compose, PhpStorm, Symfony, Front-end, Web Development, Full-stack, User Interface (UI), APIs, HTML, CSS, SaaS, SQL, PHP 7, Webpack, Booking Systems, Booking Apps, Appointment Booking, Software Architecture, Full-stack Development, Back-end, Test-driven Development (TDD), API Integration

Weight Logger

https://github.com/drola/weight-logger-pwa
I wrote the Weight Logger to log my body weight. I wanted a simple app with no unnecessary features and notifications. The Weight Logger stores the data locally on the device, with an option to export everything in a CSV.

Desktop App for Data Visualization and Tagging

The client needed an app to annotate data coming from their measurement system. They would use the app on Windows 10 PCs. The data files would be stored locally or on a shared hard drive.

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/
I gave a talk about WebAssembly at JSDayES last year in Madrid.

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 project's goal was to make a tool to analyze market data. The data contains open, high, low, and close prices for each day for each stock (or other assets). I led a team of students working on importing the data set and displaying it in the browser. I was mainly involved in the latter part.

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/
I wrote a blog post about ES6 classes. This is a new language feature in JavaScript. Unfortunately, this feature is not yet supported across all browsers. The upside is that tools such as Babel enable us to transpile new syntax into the code that is compatible across most web browsers. In this blog post, I used Babel as an educational tool. I made a class using the new ES6 syntax and compiled it with Babel into ES5 code. After some simplification, I understood what new class syntax meant in terms of constructs available in the language years ago.

Animations for a Physics Textbook

I helped develop a textbook for physics. I made a professional design "alive" by converting PSD files into interactive web experiences.

• 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.gif
I developed the software to aid in asphalt quality control in the Northern Europe region.

I 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=sharing
This is a presentation I gave at a Python Meetup in Ljubljana.

Jupyter 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.pdf
This was one of the highlights when I was studying physics.

Ingredients:

* 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.

Languages

PHP, PHP 7, TypeScript, JavaScript, WASM, Python, HTML, CSS, SQL, C++, C#, Octave, Julia

Frameworks

Symfony, Symfony 3, Symfony 2, AngularJS, Angular, Electron, Flask, Bootstrap 3+, Bootstrap, Symfony 1, NestJS, Material UI, Redux, Jest, GStreamer

Libraries/APIs

Node.js, jQuery, D3.js, Doctrine 2, React, WebGL, Three.js, WebRTC, NgRx, Google Maps API, OpenStreetMap API, RequireJS, OpenLayers, FFmpeg, SQLAlchemy

Paradigms

REST, Object-relational Mapping (ORM), Object-oriented Programming (OOP), Design Patterns, Test-driven Development (TDD), Dependency Injection

Other

WebAssembly, Front-end, Web Development, Full-stack, APIs, Full-stack Development, Data Visualization, Maps, SaaS, Booking Systems, Booking Apps, Appointment Booking, Software Architecture, Back-end, GeoJSON, API Integration, User Interface (UI), Geographic Information Systems, FontAwesome, Autoscaling, Physics, Mathematics

Tools

Toggl, Excel 2016, Docker Compose, Angular CLI, GitLab, GitLab CI/CD, Git, PyCharm, Webpack, PhpStorm, Photoshop CC, MATLAB, Web GIS, Celery, AWS CloudFormation, LaTeX, Mathematica, GIS

Platforms

Docker, Amazon Web Services (AWS), Visual Studio Code (VS Code), Linux

Storage

PostgreSQL, PostGIS, MySQL

Industry Expertise

Banking & Finance

2011 - 2015

Bachelor's Degree in Physics

Faculty of Mathematics and Physics, University of Ljubljana - Ljubljana, Slovenia

AUGUST 2022 - PRESENT

NestJS Fundamentals

NestJS Core Team

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