Servage Magazine

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

Archive for the ‘Cool stuff’ Category

Live-extensions for better-DOM – Part 2

Monday, April 14th, 2014 by Servage
page_dom_script DOM.EXTEND DOM.extend declares a live extension. It accepts a CSS selector as the first argument which defines what elements you want to capture. General advice: try to make the selector simple. Ideally, you should only use a tag name, class or attribute with or without a value or their combinations with each other. These selectors can be tested quicker without calling an expensive matchesSelector method. The second argument is a live extension definition. All properties of the object will be mixed with an element wrapper interface except constructor and event handlers. Let’s look at a simple example. Let’s assume we have such an element on a Web page: <div>...</div> The task is to show it as a ...

Animations with CSS

Saturday, April 12th, 2014 by Servage
  css3-animations-image The CSS Animations module allows authors to create real, honest-togoodness keyframe animation. Unlike transitions that go from one state to another, keyframe animation allows you to explicitly specify other states at points along the way, allowing for more granular control of the action. Those “points along the way” are established by keyframes that define the beginning or end of a segment of animation. CSS transitions are animations with two keyframes: a start state and an end state. More complex animations require many keyframes to control property changes in the sequence. Establishing the keyframes The animation process has two parts: first, establish the keyframes with a @keyframes rule, and then add animation properties to the elements that ...

Polygonal modeling and Three.js – Part 4

Wednesday, April 9th, 2014 by Servage
shapesRENDER THE SCENE We have everything we need for a basic scene, so all that’s left is to tell the renderer to run by creating a render loop. We’ll use requestAnimationFrame() to inform the browser of the upcoming animation, and then start the renderer with the scene we’ve created. Note that requestAnimationFrame() has limited support, so check out Paul Irish’s shim to make sure all of your users get the same experience. var render = function () { requestAnimationFrame(render); renderer.render(scene, camera); }; render(); If you open this in your browser, you’ll see the ball in the middle of the canvas with the light reflecting off of it. At this point, play around with the ...

Continuous research during all phases of web design

Tuesday, April 8th, 2014 by Servage
Research during Web Development When you look at the web pages describing the standard project process for web development on the websites of the web development companies or freelancers, you will find research step at the beginning and even before planning stage. It is true we are getting excitements when clients approve us for their website designing and particularly redesigning project dropping their current or previous developer or web designer. Therefore, before putting steps into the clients’ offices or their meeting tables, we prepare a lot such as we think over the nature and likeness of the client in question, her existing website, her business, and most importantly the nature of her target ...

Polygonal modeling and Three.js – Part 3

Sunday, April 6th, 2014 by Servage
ADDING TO THE MESH Because the mesh is covered by the chosen material and rendered in a view with lighting, aesthetic applications can be done to the top of the mesh. Using textures, you can overlay bitmaps to parts of the object to illustrate it. This is an extremely functional way to bring the models to life, and as long as the structure is created with care, it can look flawless on top of the meshes. Shaders can also be applied using a special type of material that shades the object specifically, regardless of the lighting. Three.js Now that we understand the fundamentals of 3-D development using polygonal meshes, we can apply them in the Three.js library. Arguably, the greatest part of the ...

Parse URLs with Javascript

Saturday, April 5th, 2014 by Servage
  One of my all-time favorite JavaScript tricks is a technique for parsing URLs into parts (host, path, query string etc) that doesn’t require any libraries or advanced regular expressions. It uses only the power of the DOM, and more precisely, the anchor element <a>. As part of the regular set of properties that browsers assign to anchor elements, there are a few more that mimic the properties of the location object. Let me demonstrate: <div>     <label for="url">Enter a URL:</label> <input type="text" id="url" size="50" /> </div>   <ul id="parts">     <li><label for="host">Host:</label> <input type="text" id="host" /></li>     <li><label for="path">Path:</label> <input type="text" id="path" /></li>     <li><label for="query">Query String:</label> <input type="text" id="query" /></li>     <li><label for="hash">Hash:</label> <input type="text" id="hash" /></li> </ul> $(function(){     // The ...

Polygonal modeling and Three.js – Part 2

Thursday, April 3rd, 2014 by Servage
71-1 CAMERAS In order for these meshes to be rendered, cameras must be placed to tell the renderer how they should be viewed. Three.js has two types of cameras, orthographic and perspective. Orthographic projections eliminate perspective, displaying all objects on the same scale, no matter how far away from the camera they are. This is useful for engineering because differing sizes due to perspective could make it difficult to distinguish the size of the object. You would recognize orthographic projections in any directions for assembling furniture or model cars. The perspective camera includes properties for its location relative to the scene and, as its name implies, can render the size of the model ...

Live-extensions for better DOM – Part 1

Wednesday, April 2nd, 2014 by Servage
Event handling is one of the key principles of working with the DOM. Events are the primary means of receiving feedback from user interaction. SIMPLE EVENT BINDING In this first example, documentation and tutorials that cover DOM events is what I call “simple event binding”. You attach a listener for the desired event on the DOM element in which you expect it to happen on. link.addEventListener("click", function(e) {   // do something when the link is clicked }, false); The first argument indicates the type of an event, the second argument is a listener, and the third argument defines an event phase (so-called “bubbling” or “capturing”). The reason why the last argument exists is because most ...

Polygonal modeling and Three.js – Part 1

Tuesday, April 1st, 2014 by Servage
javascriptNewFunction1-6 The * selector has a special behavior: all extension declaration properties will be injected directly into the element wrapper prototype except for the constructor which is totally ignored. Therefore, there is no performance penalty that is usually associated with the universal selector. Note: Never pass more specific selectors such as .some-class * into DOM.extend because they are slow and do not have the same behavior as mentioned above. MULTIPLE LIVE EXTENSIONS ON THE SAME ELEMENT More often than not, it makes sense to split a large live extension into several pieces to reduce complexity. For instance, you may have such an element on your page: <div></div> There are two different extensions attached to it. The .infinite-scrollextension implements a well-known infinite scroll pattern, e.g. ...

Intersections between copywriting and design

Thursday, February 20th, 2014 by Servage
In many cases, copywriters and designers practice their crafts in different worlds with little knowledge of what the other is doing. If the two are seated near each other, and thus aware of each other’s work, this can make a huge difference for the results of our projects. Clients, of course, benefit from such an arrangement as such a team is likely to offer exceptional quality websites. Common Mistakes We commit big mistakes when: We keep the role of designers and copywriters entirely separate during our web design projects We design first and then instruct content writers to fill the void We prepare copy first and then design around that In such cases, we aren’t combining ...