Software

• To find out exactly what the employees of Charité need and to develop a customer-centric software (the app emerged from these discussions in several iterations)
• The app should copy reliably, quickly and completely
• The app should be easy to use
• The app should create beautiful .svg graphs

• Write software that copies local data from different computers to a server, creating a specific folder structure on the server and changing the date folder from 8 to 6 digits
• Create .svg graphs from .csv file(s) if available, additionally using xml layout files
• User-friendly graphical interface
• Create a JSON file with relevant values for later use
• App must run in a Windows environment, create an .exe file

GRAIL_upload copies the local data from GRAIL-computer and Vicon-computer to the BeMoveD-server of Charité Berlin and creates .svg-graphs if it finds the correct .csv-file.

If the app runs, a (German-speaking) GUI opens and the user is prompted to input a patient ID. The app checks if the patient exists (e.g. P100). If they are found, the GUI shows source and destination path and if .csv-files are found.

If the button is pushed and there is a .csv-file, the app

• copies the .layout files into each date-directory, cleans them (deletes all the HTML-tags), replaces the arrows with better-looking ones and renames them ('walk.layout', 'run.layout')
• creates a .json-file for later use with the keys 'title', 'graphname' und 'channelname' from the .csv-file
• creates a directory 'cascade-graphs' and a subdirectory for each time (e.g. '1013') that is in the filename of the .csv-file
• creates from each .csv-file (usually) 89 .svg-graphs and saves them into the corresponding time-subdirectory
• writes a readme-file in each time-subdirectory
• creates 3 directories on the server: 'Dokumente', 'GRAIL', 'Vicon'
• copies everything from the local patient data (e.g. P100/20211016) into the GRAIL-subdirectory on the server ('P100/211016/GRAIL'). This includes the patient-data, the .layout-files, the .json-file, and the graphs if there is a .csv-file.
• copies every file from the local Vicon path 'D:/BeMovedDB/gait analysis bemoved/P100/New Session' into the corresponding Vicon-directory on the server ('P100/211016/Vicon'). 'Corresponding' means here that the creation date of the file has to match the date (e.g. created on October 16th 2021 is put into 'P100/211016/Vicon'). Since creation dates differ on Windows OS and Linux/Mac OS, there is first a check for the OS in use.
• shows the user that it is still copying. When done it shows the user that it is done.

When there is no .csv-file, steps a-e are skipped.

Dates and times are found with regular expressions.

GRAIL_upload's GUI shows the user a variety of possible errors:

• When the user inputs anything else than digit
• When the user inputs less than 3 or more than 4 digits
• When the patient does not exist
• When there is no .csv-file
• When the .csv-file is wrong (first box does not contain the string 'left')
• When there is no local date-directory
• When the local date-directory does not have exactly 8 digits
• If the .layout-file does not exist at the given path
• When copying fails

Additionally, a logfile for debugging is created.

• Greatest success: Feedback from Charité employees that the app saves them 2-5 minutes per patient and that they use it daily
• Differentiated error handling with precise feedback to the user
• Desire to develop more with Python 😊

Users can join a social network, in this case focusing on inclusive kitesurfing communities.

A high priority is on conditional rendering, security issues (password hashing, protection against SQL-injection, CSRF- and XSS-attacks, reset code by email) and a differentiated error handling (different error messages get displayed, e.g. if the email is not in the database, the retyped password does not match the first password or the input fields are left empty) in the register, login, and reset password components.

Anyone can upload images of their choosing; the theme of this imageboard is graffiti and street art.

I learned about Vue.js and working with state, un/mounting, dynamic routing, click handlers, event-emitters and watchers. The imageboard is protected against SQL-injection, clickjacking, XSS- and CSRF-attacks.

2 images blending into each other, usually used for before-after-images. I used it to commemorate my great-grandmother Emilie Rau. If you click on the white slider in the middle and slide it to the left you will see more of the image on the right-hand side and vice versa. Programming-wise I used mousedown, mousemove and mouseup events and offset().left became a good friend. It was difficult to end the sliding within the boundaries of the pane.

4 kitty-images move from right to left in an endless loop, one image per second. You can also pick a specific image by clicking on the corresponding white dot. Timing and space was important to program the carousel, including the addition and removal of querySelectors, eventListeners and clickHandlers. It was the first time I worked with CSS-transitions. It's cute, ain't it? Click on the link to watch the kitties carouseling...

Tickers are a bit outdated, but a good programming exercise. Mine runs from right to left, and if you mouseover on one of the titles the ticker stops running, the hyperlink becomes blue and underlined and if clicked the desired information opens in a new tab. The programming is in vanilla JavaScript with event listeners, mouseovers, mouseouts, offsetWidth and AnimationFrames among other things. If you wanna deep dive into my ticker you get to read all my texts that got translated into English... In a later exercise we added a backend and fetched live data from existing twitter-accounts through the twitter-API using tokens.

Working with local storage was fun. If you write something in the text field and click the button 'Keep it a secret!' the text disappears and the button cannot be clicked again (to keep what was saved to local storage). The button left to this ('Tell me the secret!') reveals what was saved, even after the browser was closed. The last button ('I don't trust you anymore - forget my secret!') clears the local storage and the console. I worked with jQuery using click handlers and try-catch error-handling.

This simple validation test tells you if you have JSON or not. Simply copy-paste in the textfield and hit the 'Validate JSON' button. If you have JSON, the border of the textfield turns into green and a 'Valid JSON!' text blinks at the bottom of the textfield. If you don't have valid JSON, the border turns red and it will let you know that you do not have valid JSON. 'Clear textarea' to test some more... Done with jQuery with the parse()-method and flexbox and keyframes in CSS.

I loved playing Connect 4 as a child - and I still do today! I never thought I would build one as a computer game. The hardest part was figuring out and programming the diagonal victories. You can either pick dark-red or pink to play. Every move is accompanied by a sound. When one color wins, the whole board expands and the winning color fills the screen. This animation I did with jQuery. Additionally, there is a winning-message blinking - I programmed this in CSS with animations and keyframes. The 'Play again' button restarts a new game - you should give it a shot!

An exercise in building a homepage for Spiced with HTML, CSS and JavaScript/jQuery without flexbox or grid - quite challenging! I added a pop-up modal and a menu that slides in from the right. It is also designed for a smaller screen with @media screen. I used animations, click handlers and (dis)played (with) in/visibility.

I have used incremental searches many times in my life and did not even know this term until I had to build one... I never thought about all the different steps that need to be programmed. I learned how to work with mouseovers, mousedowns and key-commands and how to highlight a search result, all programmed with jQuery. I also used focus and blur when a user's attention blurs (pun intended 😉) and after all it was my first ajax 'GET'-request to search from an API serving over 200 countries.