Denis Potschien

  • Leaflet: Interactive Maps with JavaScript and OpenStreetMap

    leaflet-w550

    What crosses your mind first, when you think about embedding maps into a website? I am pretty sure the answer is: Google Maps. And this is perfectly understable as the easy to use JavaScript API allows for simple and flexible addition of custom content such as markers and overlays to the maps. The free alternative OpenStreetMap has nothing similar to offer and thus is often turned down as the valid choice it could otherwise be. There is hope, though. The JavaScript library Leaflet allows for the addition of lots of Google Maps features to maps based on the Open Source project OpenStreetMap.



    Read more 
  • Unobtrusive Helper: Intro.js Guides Visitors Around Your Website

    introjs1-w550

    You know it. A website should be self-explanatory, navigation should be obvious. “Don’t make me think!” If you need a manual to tell your visitors how to use your website, you’re a dead man designer walking. This is generally true. But! Imagine you changed your website, but ever so slightly that your regular visitors won’t even notice. But! You want them to notice, because to you and at best also to your visitors these changes are a big deal, though not obvious. Would it not be great to have a possibility to gently poke the attention of your visitors to the right direction? Intro.js is a framework to achieve just that. It guides your visitors around the fresh parts of your website and has some tooltips at hand.



    Read more 
  • Unusual Code Checker: Holmes Validates HTML, Uses CSS To Do So

    holmes-w550

    Of course it is advisable, no, mandatory to have your source code checked, double-checked and validated to avoid errors and to ensure standards compliance. Instead of having your project run through one of the many validators out there, you can opt to use the brand-new diagnostic tool by the clever name of Holmes to achieve the same. Holmes is a tool, that uses CSS to check your source code for non-compliant and invalid HTML. Here is how it does it…



    Read more 
  • Create Favicons Online With These 5 Useful Tools

    faviconeditor_xiconeditor-w550

    Favicons are to websites what bread and water is to human beings: essential. They’ve been around long-since and will still be when we all have perished. Shortly after the inception of the web, they started their triumphal march. Nowadays, favicons are not long thought or talked about, they are just implemented like a duck takes to water. To create them, several solutions exist. First on there are plugins or native functionality for common desktop software solutions. What we want to focus on today are solutions in the form of online services. There are a few and they differ quite considerably.



    Read more 
  • HTML5 Server-Sent-Events: How To React On Server Requests With JavaScript

    serversentevents-w550

    You certainly know the XMLHttpRequest object, with which it is possible to communicate with a web server from inside an HTML document and have it updated without the need for reloading the page. Now, with the newly introduced server sent event, part of HTML5, we can even react to requests from the server side without the need for a reload. This way we can keep page contents simultaneously updated. This proves useful in several cases, e. g. regarding your stock of products, that is probable to change every second.



    Read more 
  • Photoshop Etiquette: Basic Knowhow for Designing The Web Using Photoshop

    photoshop-etiquette-homepage

    Adobe’s Photoshop still is the market’s most common and most popular choice for professional designers. Besides photography and print design, which Photoshop once got invented for, it is widely used in the designing of websites, too. The last ten years saw the product grow in functionality especially in terms of web design features. A large part of the world’s most successful websites started as a draft in Adobe’s market leader. Photoshop Etiquette is a new and free service, aiming at beginners in web design with Photoshop. It offers the absolute basics and makes for a very good starting point.



    Read more 
  • Lazy Line Painter for jQuery Animates SVG Onto Your Website

    Thanks to the canvas element and the drawing capabilities of JavaScript we can calculate and present graphics inside the browser. That way drawings can be animated onto a website. The downside is, that you would have to do a lot of programming to achieve this. If you are not into programming or simply want to save some time, the jQuery plugin Lazy Line Painter might come in handy. It promises to perform this tedious task for you.



    Read more 
  • Pinstamatic Pimps Pinterest, Allows for Sharing of Websites, Texts and Places

    You know that the social network Pinterest limits itself to the sharing of visual media, images foremost. Even though this is surely part of its success, there are times when you’d like to share other content, especially when the content is not available as an image. In these cases, Pinstamatic, a new service to extend Pinterest’s capabilities comes into play. Pinstamatic allows for the sharing of texts, websites and places. It enhances the presentation of images also.



    Read more 
  • Tilted: HTML Elements Become Parallelograms With Maskew

    You know that you can tilt HTML elements into the shape of a parallelogram using the CSS3 property “transform”. Nice, at first sight. But then, calling “transform” on a picture leads to tilting the picture itself. Uncle Hugo is not amused about his new skewed look. And you know, it is his corporation you are preparing the web site for. To save you, I have found the JavaScript library Maskew. Maskew skews elements into parallelograms too. But it does not skew the content, only the frame. Uncle Hugo himself will not tilt (at you) this way…



    Read more 
  • New Era: Computation of Time with Moment.js

    Calculating time values and displaying them correctly is not child’s play. There are lots of different units (Year, Month, Day, Hour etc.) and – more disturbing – different systems of numeration, none of which is decimal. But you need not fall into despair. Moment.js is there to help you. The small JavaScript library comes equipped with lots of nifty features for calculating time spans, converting international time formats and also cares for the output of the results. Needless to say that Moment.js works for different languages and time zones.



    Read more 
search form
 
image description image description