Matjaž Drolc

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.

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.

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.

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.

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.

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.

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.

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.

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.