Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Chronological article list (Blog View)

Blog View vs. Front PageThis page lists all articles by date (blog-like) and is therefore a good alternative to the front page that sorts pages by popularity. If you prefer chronological listing of the newest articles you should use this page.

Running terminal commands with PHP

Friday, March 15th, 2019 by Servage
terminalSometimes you may find yourself in a situation where you want to run more than just PHP code. Perhaps PHP does not have a built-in function for what you want to do or you want to run some custom commands, such as executing an external program. There are multiple ways to achieve this, and we will learn how to do it in two different ways. The usual way: exec() and shell_exec() These two functions are likely the ones that come to your mind first when thinking about a way to execute a terminal command. Both of there are basic PHP functions, and they are very similar to each other. The biggest difference between ...

How to build a successful site for e-commerce

Saturday, March 9th, 2019 by Servage
webshopE-commerce is quickly turning into a must-have for modern businesses. And why shouldn’t it when it’s relatively cheaper than selling products at a physical location, always having to worry about rent for your shop and a whole lot of others expenses. With an e-commerce business you can basically sell anything, no matter how big or small. And if you have good suppliers, you don’t even have to worry about having too many items in stock or running out of stock. With good managerial skills plus the right marketing and conversion funnel you can actually run a successful business where items sell themselves. Which other crucial element does your e-commerce business depend on, other than ...

Using DOM elements in Javascript – Part 4

Tuesday, February 26th, 2019 by Servage
JavaScript came about during a dark and lawless time, before the web standards movement, when all the major players in the browser world were—for want of a better term—winging it. It likely won’t come as a major surprise to anyone that Netscape and Microsoft implemented radically different versions of the DOM, with the prevailing sentiment being “may the best browser win.” insertBefore() The insertBefore() method, as you might guess, inserts an element before another element. It takes two arguments: the first is the node that gets inserted, and the second is the element it gets inserted in front of. You also need to know the ...

Using DOM elements in Javascript – Part 3

Saturday, February 16th, 2019 by Servage
Inner HTML gives us a simple method for accessing and changing the text and markup inside an element. It behaves differently from the methods we’ve covered so far. Let’s say we need a quick way of adding a paragraph of text to the first element on our page with a class of intro: var introDiv = document.getElementsByClassName("intro"); introDiv.innerHTML = "<p>This is our intro text</p>"; The second statement here adds the content of the string to introDiv (an element with the class value “intro”) as a real live element because innerHTML tells JavaScript to parse the strings “<p>” and “</p>” as markup. style The DOM also allows you to ...

Using DOM elements in Javascript – Part 2

Saturday, February 9th, 2019 by Servage
Here we will discuss about some more id attributes syntaxes. By id attribute value getElementById() This method returns a single element based on that element’s ID (the value of its id attribute), which we provide to the method as an argument. For example, to access this particular image: <img src="photo.jpg" alt="" id="lead-photo">' We include the id value as an argument for the getElementById() method: var photo = document.getElementById("lead-photo"); By class attribute value getElementsByClassName() Just as it says on the tin, this allows you to access nodes in the document based on the value of a class attribute. This statement assigns any element with a class value of “column-a” to the variable firstColumn ...

Using DOM elements in JavaScript – Part 1

Saturday, February 2nd, 2019 by Servage
We have earlier seen an introduction to DOM Nodes and Structures in JavaScript. Now let’s discuss some advanced DOM Management Concepts to make best use of it in Web Development. The document object in the DOM identifies the page itself, and more often than not will serve as the starting point for our DOM crawling. The document object comes with a number of standard properties and methods for accessing collections of elements. Just as length is a standard property of all arrays, the document object comes with a number of built-in properties containing information about the document. We then wind our way to the element ...

Dear Servage customers – Happy 2019

Monday, December 31st, 2018 by Helge
Servage_new_year2   With 2018 coming to a close, Servage wanted to reach out and send our best wishes to you and yours! Hopefully, this New Year is going to be the one that fulfils all your dreams and so start it with a joyful and a vibrant soul! Here’s wishing you a prosperous and successful new year!

Beautiful charts enrich your data

Saturday, December 29th, 2018 by Servage
chartjsMany websites display data tables as part of their content. This is easily done with the <table> element in HTML, which is invented for the purpose of showing tabular data. However, graphs and charts have been more cumbersome for years, because they are more complex content elements. Initially charts were generated as images which could be included in the web page. Later the Flash technology has made more interactive charts possible, however the problems with Flash and its limitations have rendered those kinds of charts unpopular. Lately HTML has evolved a lot, and with the introduction of the <canvas> element more advanced drawings on pages have become possible. With the <canvas> element ...

Useful CSS snippets

Saturday, December 22nd, 2018 by Servage
cssStylessheets define the visual appearance of your website. Technically speaking the stylesheets include instructions on sizing, position, color and all other aspects of the DOM elements' display. Nowadays there are frameworks to make the process of defining your stylesheets easier. Usually the work is still done by hand in text editors and sometimes aided by tools, color pickers etc. Also stylesheets have transformed from being mere CSS to the smarter and more intelligent systems SASS and LESS, which allow for a programmatic approach to writing stylesheets. The later two languages allow you to define variables and use them in calculations you can perform in your stylesheet. Also code blocks allow for ...

Intelligent and super simple HTML5 slider

Saturday, December 8th, 2018 by Servage
super-simple-sliderAs it says on the official Super Simple Slider website, there are already many sliders out there. However, there is something special about Super Simple Slider. As the name suggests, it is super simple to set up and it supports all types of content from images to divs and text. It also includes other useful features that we are going to describe in this article. Installation part one: Downloading the required files To add the slider to your website, you should first go to the official www.supersimpleslider.com website and download the files to your project folder. There are three files and one folder you need: An images folder, jQuery, a stylesheet file and ...

Recent articles

Introduction to HTML5 canvas element

The <canvas> element is probably the greatest addition to HTML5. This new element can be used to create anything from a single-color box to complex shapes and charts. We will take a look at how to build some simple shapes with the <canvas> element and learn what can be achieved with more advanced use of the element. What is an HTML5 canvas? In simple terms, a canvas is a <div> inside which you ...

Use pre-made CSS animations with Animate.css

Animate.css is a CSS library that allows you to animate elements on a web page. It is very easy to set up and provides dozens of premade animations for you to use, such as bouncing, sliding and fading animations. Another great thing about Animate.css is that it does not use any JavaScript for animations. Everything is done with CSS in a single file. Setting Up Animate.css As promised above, setting up Animate.css is ...

Build an interactive feedback form with Javascript

Listening to feedback of users is important. The tool we are going to explore this time is not a typical feedback form. Instead, it allows visitors to give feedback interactively. Users can highlight areas or elements on a web page they need help with, write a comment to describe their issue or question, black out sensitive information and finally, send the feedback or support request. Initial Setup and Requirements We will achieve the ...

What is object-oriented CSS?

Object-oriented programming is a common practice in many programming languages. It helps you with the DRY principle (don’t repeat yourself) by allowing you to repeatedly use code from a single code base. How would applying the paradigm work with something other than a programming language, like CSS? Let’s find out how CSS can be written in the same way and what are the benefits of doing so. The Two Principles of OOCSS Object-oriented ...

Build A Toolkit To Help Define Your Web Design Style

In order to get good conversion rates and positive user experiences, user interface design is vital. Let’s take a look at some practical ideas to do that. Single Column Layout The first consideration in user interface (UI) is the page layout. In our previous web era, we were free to try various options for layout and among them, multi-column approach was common, since we then wanted to use screen ...