10May2016

Web Development: Flexbox as new UI standard in Web

Layout as a problem

At design point of view, any web site needs some sort of layout. It’s a mandatory Web Development aspect for even very basic HTML content like landing pages. Modern web picture have to be splitted into logical parts in terms of some structure. The problem is the nature of the web. 30 years ago, when the web was actually invented, a page was treated as pure top-to-bottom flow of a text content and images. That was original layout only. A lot of technologies have been applied since that time. E.g., pure HTML tables, floating div elements. Most of them look like hacks. Keep in mind, there were outstanding features and behaviour of specific browsers and their versions. Yes, I’m talking about dark times of IE6. The situation became even worse because we had to support wide range of mobile devices in responsive way. To solve all these problems there are a lot of grid system implementations available as standalone libraries or complete Web Development frameworks. E.g., Bootstrap [http://getbootstrap.com], Foundation [http://foundation.zurb.com].

 Flexbox as a standard solution

Flexbox [https://css-tricks.com/snippets/css/a-guide-to-flexbox/] is not just one more solution, but rather a standard that solve layout problem on basic level. It would be better to have it initially at the beginning of Web Development epoch. W3C is going to add Flexbox to its official standards soon. Technically, it’s not a library but just a set of CSS3 properties to layout DOM elements. There are 3 versions of Flexbox properties set: old, tweener and new.

Read more
25Apr2016

Web Development: TypeScript as OOP version of JavaScript

JavaScript is not classic OOP language

OOP (Object Oriented Programming) is the most popular style of coding for now. OOP programming languages are the most used for now. E.g., C++, Java and C#. These are the most used ones in software development. That’s why the majority of frontend developers have been coding in OOP paradigm. On the other hand, JavaScript dominates on the client side of Web Development. Besides, JavaScript is rising very quickly as server side language by node.js platform. JavaScript is not classic OOP programming language. Actually, there is some kind of OOP based on prototype, but it provides another approaches and patterns. One more point against JavaScript is its dynamically typed nature. These and some other features make JavaScript very outstanding. A lot of developer note that they are hate JavaScript.

 TypeScript for making JavaScript more friendly

There are several attempts to make JavaScript development more friendly and controllable. E.g., CoffeeScript [http://coffeescript.org] is a language that compiles into JavaScript. CoffeeScript code looks like Ruby. Its main goal is providing a minimalistic syntax to make source code smaller and elegant. Another way is TypeScript [http://www.typescriptlang.org] by Microsoft. It makes JavaScript look like regular OOP language with classes and static typing. TypeScript is a language, or rather to say extension to pure JavaScript, because it uses the same syntax as pure JavaScript, but introduces extensions to define types, interfaces, classes, modules, etc. There is a compiler to translate TypeScript code into pure JavaScript to run in browser or by node.js engine. It’s open source both the specification and the implementation hosted on GitHub. Thus, it may be used for any OS and platform. Install it globally into your system as any other npm module:

Read more
04Apr2016

Application Development: Online collaboration tools as new quality of communication

What is the criteria for professional software developer? One of the best answers to this question is “to be smart and get things done” [http://www.joelonsoftware.com/items/2007/06/05.html]. On the other hand, emotional intelligence is very important. Software developers should be in contact with all stakeholders of the project, like clients, UI/UX designers, testers and even other developers. There are  pretty specific forms of communication in Application Development as a process. It should be effective at line of share knowledge, catch problems, prioritize features to implement.

 Share the document

In case of remote collaboration, first of all, it needs to have ability to work on the same documents and artifacts. Google Docs is a set of online office applications, that may be treated as substitution to standalone MS Office package. It allows view and edit formatted documents and spreadsheets remotely by distributed teams online with adding comments to appropriate places in the document.

 Share the desktop

The most effective way to describe a bug or case is to reproduce it visually. There is no problem to look at screen if 2 or even more persons are in the same office place. It’s not so easy to provide demo remotely. In this case developers use online screen sharing tool. There is well-known GUI tool Chrome Remote Desktop [https://chrome.google.com/webstore/search/remote%20desktop] by Google. It’s implemented in the form of browser extension, so it’s available for all platforms. It’s very similar to Windows Remote Desktop. Windows Remote Desktop was designed a lot of years ago for remote access to Windows Servers and PC’s, but Chrome extension is for online screen sharing among 2 users. Skype messenger also provides this functionality. It’s possible both to view a remote display and grab keyboard or mouse input.

Read more
25Mar2016

Application development: Angular 2 is a ready for production framework

Last month we started new web project with client side implementation by Angular 2 framework [https://angular.io/]. First of all, this is not just new major version of the same technology, but rather absolutely new framework designed from scratch. Solid part of terms and approaches are the same as in Angular 1.x, but a lot of things are much more simpler by design. Actually, that allows us to spend more time and efforts on application development than on pure system layer. E.g.,

import {Component} from ‘angular2/core';

@Component({

selector: ‘my-app’,

template: ‘<h1>{{ title }}</h1>’

})

 

export class AppComponent {

title = “My First Angular 2 App”

}

 

This TypeScript code above is very clear. It doesn’t need any extra knowledge to understand it.

 Ready to start

As usual, you can install it as npm module into your project and add to dependencies. Look at its GitHub repository [https://github.com/angular/angular]. Angular 2 is still in beta. Latest version for today is 2.0.0-beta.17. On the other hand, the Angular 2 core functions are stable for several months or even half of year. There are Components and Directives, Forms, Pipes, HTTP and Dependency Injection. Migration from Angular 1.x is not trivial, actually. That’s why there are a lot of tutorials and migration materials, like [https://scotch.io/tutorials/seamless-ways-to-upgrade-angular-1-x-to-angular-2].

Read more
15Mar2016

E-commerce: Technical Aspects of Bitcoin Revolution

Category: Ecommerce

Bitcoin [http://www.investopedia.com/terms/b/bitcoin.asp] cryptocurrency has being used widely around the world for already several years. First of all, let’s accept that it’s both robust technology and mature implementation. It’s going to be more important in our life as new tool coming to substitute old good bank accounts, wires and credit cards. Besides, blockchain [http://www.investopedia.com/terms/b/blockchain.asp] technology, that is an important part of bitcoin system, potentially provides solutions for plenty of problems beyond E-commerce an financial transactions, based on the same general principles as bitcoin — decentralization and privacy.

Transactions

The main goal of any currency system is to providing ability to exchange or transfer money from one account (or wallet) to another. Bitcoin schema is based on transactions as well. E.g., Alice is going to send 5 BTC to Bob. The transaction in this case consists of 3 main parts:
● Bob as destination of the transaction
● 5 BTC amount of transferred money
● Source of the money where Alice was received it from. E.g., Dale sent Alice 5 BTC.

Read more
29Feb2016

Application Development: Hapi.js is a professional node.js server framework

This month we created REST service as a project. Technical requirements were to use Hapi.js architecture [http://hapijs.com] to implement a solution. It’s a better alternative for well-known express framework. The problem with express is its simplicity in design. One of the goals of its authors was to make it as simple as possible. But in real life it’s not a criteria. You have to spend a lot of time to configure all components you need for your application. E.g., getting raw HTTP request content needs particular middleware attached into some point of HTTP request/response chain. That’s why a lot of teams and projects choose something more robust. Hapi provides very good balance between simplicity and power.

Beyond express framework

Hapi was created by Walmart software development team to hold under control their black-friday storm. By the way, this fact shows us one more time that node.js platform has both high performance and robust Application Development approaches.

Read more
13Feb2016

Application Development: WebGL

A lot of cool technologies are coming from non-web world to Web Application Development. One of the most excited examples is WebGL [https://www.khronos.org/webgl/]. It’s a free web standard to use low-level 3D graphics right on the page via canvas element. It’s based on OpenGL ES 2.0 and has similar development approaches. To test if your web browser supports WebGL just go to http://get.webgl.org/. Almost all modern browsers and platforms support WebGL. It doesn’t need special plugin like Flash player or Unity.

The Platform

As WebGL is a cousin of OpenGL, it’s a cool 3D engine and 3D Application Development platform. WebGL is mostly used in Game Development and media projects. Nowadays, both the desktop and the mobile hardware is powerful enough to support GL technology to be runned into the browser. That’s why so many games are implemented as JavaScript solutions based on WebGL instead of well-known Flash. I’m not going to mark Flash as dying technology, but, objectively, WebGL is the future of the Application Development in rich web media and interactive animation.

Read more
27Jan2016

Application Development: Tweening and timeline are high abstractions in Web animation

Category: Uncategorized

Last month we implemented web solution with pretty outstanding animation. During looking for a framework to be used in our case, we found very robust set of libraries provided by GreenSock. Their products were very popular among Flash developer some time ago. E.g., module for Tweening, which is not just regular animation primitive, but customizable processes designed for really cool animation effects. These are widely used in Application Development to implement cool UI/UX or animation in a game. As web animation is moving from Flash to pure HTML/JavaScript, GreenSock team published their own package to cover almost any feature. They call it GreenSock Animation Platform or GASP [https://greensock.com/gsap].

 Platform and features

First of all, GASP supports all major web browser including even old versions (keep in mind IE as the main troublemaker) deprecated by other animation libraries. Such safe configuration is very important in professional Application Development at line of client satisfaction.

Read more
14Jan2016

Application Development: Vim as development environment

Vim [http://www.openvim.com/] is a successor of the ancient vi text editor, which was created as primary UNIX visual text editor several decades ago when computers were really big and expensive. Despite such a great age, Vim is still a very popular and useful tool in Software Application Development and DevOps. Both console and GUI versions are available for all operating systems and platforms. It’s included into any standard installation set of Linux/UNIX family system. Because of its plain nature, our programmers can use Vim as both regular text editor installed and runned locally and opened in remote shell via Internet with effective workflow even in case of slow network connection.

 

Features

 

In brief, Vim has 2 main modes: to navigate a cursor throw the text and to enter the text into place marked by the cursor. This would be the most terrible barrier between you and Vim. Don’t fight it. Just accept this approach and move on.

Read more
20Dec2015

.NET Development: ASP.NET Web API 2 to implement robust REST services

Microservices [http://martinfowler.com/articles/microservices.html] is a server side architecture positioned as one of the most cool technical trends in 2016. There is still a lot of hype around it in all platforms and programming languages ecosystems. A composition of light services, each one handles its own task, may be implemented and then integrated and configured to work together are usually done by the same tiny web framework. It looks like small tool for small tasks. E.g., there are flask written in python, sinatra in ruby or node.js, which itself has a lightweight architecture and interface in design. .NET Development as robust mature technology has its own libraries to support new trends in server side programming. There is ASP.NET Web API 2 [https://msdn.microsoft.com/en-us/library/dn448365(v=vs.118).aspx]. It’s a new standard toolset provided by Microsoft for .NET Development community.

 New standard

Web API is already shipped with modern version of Visual Studio. Besides, it’s available for installation via standard NuGet package management system. Generally, there are a lot of tools to implement HTTP service: raw HTTP handler, WCF, asmx. We have been using all of them for years. Web API is outstanding enough to call it the best both as a solution and development process as a whole.

Read more
Pages:1234510...Last »