Skip to content

djuptho/dev_portfolio

Repository files navigation

Development Portfolio

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.

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

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

Page length scroll detector

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/

Check for tab activity

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/

Detect exit intent

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/

Python Scraper to JSON

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/

Microsoft Teams channel email integration

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)

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

Form Password Show

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/

About

This is a repository with helpful snippets and small own projects.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published