This is a repository with helpful snippets and small own projects.
HTML JavaScript CSS PHP
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
adblock_detection
amionline
capslock
clock
copy_ip
countdown_timer
device_detection
location_coordinates
lorem_ipsum
resources
rightclick
rwd_extension
sheetdb
social_share
spotify
time_travel
tooltip
transportation_ticket
LICENSE
README.md

README.md

Development Portfolio

This is my personal GitHub repository with useful pieces of code and small own projects.
Some of the projects are work related, others' are cool features that I come up with and want to try out.

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.

Repository contents

Adblock Detection

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/

Live Clock

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/

Device Tilt Detection (spirit level)

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/

Location Coordinates

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/

Social Share

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/

Spotify Prototype

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/

Hover Tooltip

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/

Easily order a public transportation ticket

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

Am I Online?

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/

Countdown Timer

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/

Caps Lock Detection

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/

Preventing image right clicks

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/

Get and copy your IP address with one click

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

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

Lorem Ipsum Extension

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

Time Travel Extension

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

Light CMS using Google Sheet API

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 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/