Servage Magazine

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

Articles Tagged ‘html’

Looking at Bootstrap 4

Sunday, December 3rd, 2017 by Servage
Bootstrap4The development of the latest version of Bootstrap entered a beta stage this summer. Going from alpha to beta introduced some major changes, and now that Bootstrap 4 is in beta, there should no longer be many breaking changes. This gives us a good chance to look into the future and see what new is included in the latest version of most popular front-end CSS framework. The New Grid While the grid in Bootstrap is still divided into 12 columns, it now uses Flexbox by default. A new grid tier “xl” has also been added. This means you should use tiers one level higher than previously. For instance, col-md-4 in Bootstrap 3 is ...

What are progressive web apps

Thursday, November 2nd, 2017 by Servage
web-appThe term progressive web app (PWA) is a hot trend right now. It all started back in 2015 and quickly became popular due to the advantages it offers over traditional mobile applications. But what is a progressive web application? How does it differ from a typical mobile or web application? Let’s find out what the term PWA actually means and what makes an application a progressive web application. The Definition of Progressive In one sentence, a progressive web application is a website that looks and works like a mobile application. Modern HTML5 and CSS3 features allow developers to replicate many of the features native applications can do: storing data locally, using animations to ...

Building native-looking mobile apps with HTML and CSS

Thursday, February 23rd, 2017 by Servage
html-css-js-web-appHave you ever wished creating native Android or iOS applications were as easy as using HTML and CSS? Well, now it is! A CSS framework called Framework7 allows you to build web applications for phones that look almost identical to native mobile applications. If you enable full screen view in your phone’s web browser, chances are you don’t even notice the difference. Grid System One of the core features in every CSS framework is the grid system. It defines how many columns one row can have and what screen sizes they support. The grid in Framework7 is very similar to the grid of Bootstrap. All columns are placed inside a “row” class and ...

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

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

What is new in Bootstrap 4

Friday, October 7th, 2016 by Servage
Bootstrap4Bootstrap 4 has been in public alpha since August 2015. Some deem it stable enough while other developers are waiting for a more stable release. Whether or not you are moving to the next version just yet, it is good to be aware of the upcoming changes. In fact, Bootstrap 4 has quite a lot of new and interesting updates to offer! Introducing Cards Cards are a new type of container in Bootstrap 4. They are meant to replace panels, wells and thumbnails. That’s a lot for one component to replace, but cards are designed to be a combination of all these three components. A card has a panel-like heading and a content ...

Preprocessing HTML using pug

Friday, September 23rd, 2016 by Servage
pug-templatePug is a templating engine that aims to make writing HTML files faster and easier. In fact, Pug could be said to be an HTML preprocessor. You have probably heard or used CSS preprocessors like Sass or Less. Pug is very similar for HTML; you write it using a special syntax and compile it into plain HTML. Let’s have a look at how easy using Pug is and why you should consider using it. In this article we will not set up a Pug development environment, but instead we will talk about what Pug is and in what situations it can be a good addition to your technology stack. What is Pug? If you ...

Introduction to HTML5 canvas element

Sunday, September 4th, 2016 by Servage
html5-canvasThe <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 can render graphics. Those graphics can be simple shapes such as circles and boxes, or more complex graphics like charts and even animations. A canvas can be created with the <canvas> tag. This might come as a surprise, but drawing to ...

Latest HTML5 tags explained

Thursday, August 11th, 2016 by Servage
HTML5_Logo_512HTML5 is a change towards a more semantic web which is a phrase used to describe a more machine-readable web. But HTML5 is not only that. It also includes new concrete features for web designers to take advantage of. One of these features is a batch of new HTML5 tags. Let’s go through some of the latest and most commonly used HTML5 tags so you can start using them in your own designs. <main> The <main> tag is used to identify the main content of a web page. For example, the “About Us” section of a corporate website, the <div> that has a description of the company could be inside a <main> tag. ...