Servage Magazine

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

Articles Tagged ‘javascript’

Enhanced JavaScript with TypeScript

Tuesday, April 25th, 2017 by Servage
typescriptTypeScript is a relatively new programming language from Microsoft. It is a superset of JavaScript and adds some useful features to make JavaScript coding easier and less prone to errors. What does that mean and what are these useful features? Let’s find out! Static Type Checking As the name suggests, TypeScript introduces type checking. In practise this means that variables can now have a type. In typical JavaScript, all variables are created with the var keyword in ES5 and with let in ES6. The variables are automatically assigned the correct type based on what value the variable holds. This makes JavaScript a dynamically typed language. However, TypeScript is a statically typed language since ...

Modernized strings in ES6 JavaScript

Friday, April 14th, 2017 by Servage
ES6ECMAScript 6 (ES6) has brought a lot of great features to JavaScript over the years and continues to do so as the specification is being developed. One of the new features is called template strings, which is often used in for example modern Angular or React development. It allows developers to use strings in more advanced and easier ways. This includes a new way to use multi-line strings, using strings inside variables and more with a cleaner syntax. Multi-line Strings You have likely used the concatenation operator (+) or a backslash (\) to make multi-line strings in the past. While this works fine, the syntax is is not very clean and makes the ...

Scroll-based animations with WOW.js

Wednesday, March 29th, 2017 by Servage
wowjsMany websites have animations that trigger when you scroll enough to make the element visible. Today we will see how this works and how you can implement similar animations on your own website using an easy-to-use WOW.js JavaScript library together with ready-made animations from Animate.css. Getting the Required Files Since we are going to use both WOW.js and Animate.css libraries, we have to download and include them in an HTML file. Let’s start with downloading Animate.css, but first a quick introduction to the library. As the name suggests, Animate.css is an animation library built with only CSS. It allows you to animate elements using fading, sliding and many other types of animations. You ...

Code linting explained

Friday, March 17th, 2017 by Servage
codeLinting is a term you hear every now and then, but what does it mean? Linting is related to source code analysis, which is something you should do for your code as you develop. After reading this article you will be more familiar with these things. Let’s find out what linting is and how to do it with CSS, JavaScript and PHP code. Linting Explained So, what is this mysterious “linting” people are sometimes talking about? Simply put, linting is a code review method where a program automatically analyses source code to detect issues. Lint was the name given for a C program that was used for this type of code analysis decades ...

Using Underscore.js for data manipulation

Monday, March 6th, 2017 by Servage
Screen Shot 2017-01-25 at 10.49.29Underscore is helper library written in JavaScript to make data manipulation easier. One of the most useful features in Underscore is iterating over collections like arrays and JSON objects. It makes working with data much simpler. Furthermore, Underscore can be used as a simple JavaScript template engine. Manipulating Data Let’s go through some common functions provided by the Underscore library for working with basic data. The first one is filter(). We can use this function to filter data from a collection, such as an array. Consider an example where we have a list of user ages. We want to find out how many of the users are over 50. ...

Build an interactive feedback form with Javascript

Tuesday, February 14th, 2017 by Servage
javascript-codeListening 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 above features with a tool called Feedback tool by a GitHub user JoeyAndres. This tool was previously abandoned but JoeyAndres forked the project to create a maintained version, so thank him for being able to use it. The Feedback tool depends ...

Creating dropdown-menus without JavaScript

Monday, January 30th, 2017 by Servage
dropdownDropdown menus are found on almost every website. The most common place for a dropdown is the main navigation bar, although a website can have dropdowns in almost any context. You can create a dropdown menu with JavaScript but this often makes it unnecessarily complicated. Let’s explore what it takes to make a simple navigation bar with only HTML and CSS. HTML Structure New designs are usually started by considering the HTML structure, so let’s do that first. The HTML of a dropdown menu is usually quite simple, and we only need three elements: <ul>, <li>, and <a>. You may also want to wrap the whole navigation bar inside a <div> or <nav> ...

Lazy-loading images to save your bandwidth

Monday, January 23rd, 2017 by Servage
If you are running website with many large images or just a very popular website, you can easily save a significant amount of bandwidth if you use lazy-loading images. Lazy loading means that images are only loaded when they are needed. In most cases this means when you scroll a page down and a new image becomes visible, it will be loaded. Installing Lazy Load There are many lazy loader plugins available and most, if not all of them, use JavaScript to handle the lazy loading logic. This time we will use a JavaScript library called Lazy Load from www.appelsiini.net/projects/lazyload. As always when when using external JavaScript libraries, they must be included in the page. To get the JavaScript file, you should install ...

Custom JavaScript video player with Video.js

Wednesday, January 18th, 2017 by Servage
video-jsWeb browsers come with a built-in HTML5 video player, but in case you want a little more freedom and flexibility, you can use a JavaScript library or even build your own video player! Video.js is a JavaScript library that allows you to make a customized video player that also supports more video formats than the default HTML5 <video> element. Initial Setup Video.js requires two files to work: one CSS file and one JavaScript file. You can download both of these files from the official website at www.videojs.com. Alternatively, you can use the CDN links found on their website. Either way, add these two files to the <head> section of your website to get ...

Introduction to WebSockets

Wednesday, December 21st, 2016 by Servage
WebSocketsDid you know it is possible to build real-time applications using only PHP? This is possible, thanks to a protocol called WebSocket. WebSockets allow a client and server to remain connected and exchange data in both directions without having to reload a web page. It does not matter whether you are a front-end or back-end developer since WebSockets are available in HTML5, JavaScript, PHP and many more languages and platforms. How WebSockets work WebSockets use the TCP protocol on port 80, which is the same port HTTP uses. By definition, WebSocket is a full-duplex protocol, meaning both ends of the connection can talk at the same time without interrupting each other. But how ...