This is my personal GitHub repository with useful pieces of code and hobby projects.
Some of the projects are work related, others' are features that I develop and document in GitHub.
All of the content goes under the The MIT License (MIT).
To clone the repository to a local machine, please use the following command:
git clone https://github.com/djuptho/dev_portfolio.git
When you have cloned the repository make sure to git pull
to get the newest updates.
This code detects if the user is using an ad blocking plugin. By combining my code with some custom Javascript for your platform you can track ad block usage and e.g. provide ("force") alternative ads to the users.
Platform: Desktop
Made with: Javascript, HTML, CSS
Live demo: http://djuptho.com/dev/adblock/
When using multiple computers screens (e.g. when playing games) it's neat to have a clear live clock one of the screens. The clock updates every second. Remember that this feature requires PHP and needs to be running on a server.
The background artwork is taken from http://eu.battle.net/wow/en/media/fanart/
Platform: Desktop
Made with: PHP, Javascript, HTML, CSS
Live demo: http://djuptho.com/dev/clock/
This feature works on smartphones and tells you the direction (tilt) of the device. This also works as a spirit level meter. The Javascript is commonly used in rich media mobile advertising.
Platform: Mobile
Made with: Javascript, HTML, CSS
Live demo: http://djuptho.com/dev/device/device_detection/
By clicking the button (and allowing the page to use your location) it will tell you your location. By combining this data to a database you could translate the location to a country or city. This can be used for a more personalized user experience.
Platform: Desktop/Mobile
Made with: Javascript, HTML, CSS
Live demo: http://djuptho.com/dev/location_coordinates/
Sharing web pages in social media is something many sites have implemented for a long time. This special feature works on mobile devices and appears in the lower part of the screen when scrolling down. This could be useful e.g. on a news site.
Platform: Mobile
Made with: Javascript, HTML, CSS
Live demo: http://djuptho.com/dev/share/
I got dared to make a version of Spotify. This simple web application has a few features and plays a piece of classical music. Works pretty good on a smartphone.
Copyright of application: Spotify
Platform: Mobile
Made with: Javascript, HTML, CSS
Live demo: http://djuptho.com/dev/spotify/
Many sites have round images with links that appear as tooltips when hovering over them.
I made this work with CSS3 animations without any Javascript.
Platform: Desktop
Made with: HTML, CSS
Live demo: http://djuptho.com/dev/tooltip/
In my region (Helsinki, Finland) it's possible to buy a public transportation ticket through SMS. Bookmark this page on your phone's home screen and easily buy e.g. a train ticket in just two a few clicks.
Platform: Mobile (Android, iOS)
Made with: Javascript, HTML, CSS
Live demo: http://djuptho.com/dev/hsl_ticket/
More information on SMS-tickets (HSL): https://www.hsl.fi/en/tickets-and-fares/sms-ticket
When using public wireless internet connections at airports, hotels etc. it's nice to know if the connection is stable and works properly. By using my mobile application, you easily know if you have a connection or not :)
Platform: Mobile
Made with: Javascript, HTML, CSS, HTML5 Cache Manifest
Live demo: http://djuptho.com/dev/amionline/
A countdown timer can be an effective way to evoke actions e.g. on a marketing landingpage. Configure the desired date in the PHP-file and customize the CSS-file according to your needs.
Platform: Desktop/Mobile
Made with: PHP, HTML, CSS
Live demo: http://djuptho.com/dev/countdown_timer/
When a user is logging in to a service it's nice to detect and inform the user if CAPS LOCK is detected. This minimizes confusion from a user point of view.
Platform: Desktop
Made with: Javascript, HTML, CSS
Live demo: http://djuptho.com/dev/capslock/
Sometimes images on your web page are too precious for you to let go of. By using this short code you can disable right clicks on images on the site. This helps preventing users from saving images.
Platform: Desktop
Made with: Javascript, HTML, CSS
Live demo: http://djuptho.com/dev/rightclick/
With this piece of code the user can retrieve his/her IP address easily and copy it with just one click.
Platform: Desktop
Made with: PHP, Javascript, CSS
Live demo: http://djuptho.com/dev/copy_ip/
RWD Checker is a handy tool for Web Designers and Developers. Use this extension to easily check the usability of your responsive site on different screen sizes. Special thanks to Responsinator.com :)
Platform: Google Chrome Extension
Made with: Javascript, HTML, CSS, JSON
Live demo and download: https://goo.gl/LiMDDr
This extension helps Developers to find placeholder content for their web development projects. Simply copy and paste the content provided by the plugin and add this to your code.
All of the content is free-to-use in non-commercial projects. Special thanks to Lorempixel.com :)
Platform: Google Chrome Extension
Made with: Javascript, HTML, CSS, JSON
Live demo and download: https://goo.gl/nhFrtB
The Time Travel extension is a tool for everyone with an interest in internet history. The extension takes you back in time, displaying copies of the web page since the day the web page was created.
Special thanks to Archive.org :)
Platform: Google Chrome Extension
Made with: Javascript, HTML, CSS, JSON
Live demo and download: https://goo.gl/a5HnNK
By using the Google Sheet API one can build a connection between a Google Sheet and a web page through a simple JSON call. This can be used in prototypes or other web pages where a light, easy-to-maintain, CMS is of benefit.
Example data is taken from NHL.com.
Platform: Desktop, Mobile
Made with: Javascript, HTML, CSS
Live demo: http://djuptho.com/dev/sheetdb/
Many blogs and news sites has an indicator in the top section of a page explaining how far the user has scrolled. Here's a simple example made in JavaScript tidied up with a bit of CSS.
Platform: Desktop, Mobile
Made with: Javascript, HTML, CSS
Live demo: http://djuptho.com/dev/scroll_length/
With this small Javascript utility you can check if users have the browser window focused. If the window is not focused, a few page titles are changed in the tab of the browser.
Platform: Desktop
Made with: Javascript, HTML, CSS
Live demo: http://djuptho.com/dev/tab_focus/
Detecting exit intent on web pages can be a way for companies to engage users on their sites. This tiny piece of jQuery detects when users are about to leave the page on desktop devices.
Platform: Desktop
Made with: jQuery, HTML
Live demo: http://djuptho.com/dev/exit_intent/
This Python script scrapes a selected web page and its content and stores it in a JSON format. The JSON data can be parsed on any web page as presented in this simple example.
Platform: Desktop, Mobile
Made with: Python, jQuery, JSON, HTML , CSS
Live demo: http://djuptho.com/dev/json/demo/
With the public Unicafe lunch menu API (University of Helsinki), a daily email message can be compiled, configured and sent with PHP to a Microsoft Teams channel of choice. The JSON data set is parsed, formatted and pushes the lunch menu of the day to an array.
Platform: Microsoft Teams integration
Made with: PHP, JSON, Crontab, Bash (sh)
By using the Google Sheet API one can build a connection between a Google Sheet and a web page through a simple JSON call. In this version a Google Form survey works as the interface for submitting data.
Example data is taken from Amazon.de.
Made with: Javascript, HTML, CSS
Live demo: http://djuptho.com/dev/sheetdb2/
To improve user experience when logging in, it is adviced that forms have a functionality to display the password when requested. In this demo three layouts are presented with icons and labels to display a users password. The third layout has a custom checkbox implementation using CSS/Javascript.
Made with: Javascript, HTML, CSS
Live demo: http://djuptho.com/dev/password_show/