Webmasters Gallery

This Node.js tutorial series will help you build a Node.js powered real-time chatroom web app fully deployed in the cloud. Throughout the series, you will learn how to setup Node.js on your Windows machine, how to develop a web frontend with Express, how to deploy a Node Express-based app to Microsoft Azure, how to use Socket.IO to add a real-time layer, and how to deploy it all together. Level: Beginner to Intermediate–you are expected to know HTML5 and JavaScript Part 6 – The Finale and Debugging Remote Node Apps! Welcome to Part 6 of the hands-on Node.js tutorial series: Build a Node.js-powered chatroom web app. In this final installment, I will show you how to do a final deployment of your chatroom and how to perform remote debugging. Deploying to Azure! Now that we’ve got our Node.js-powered anonymous chatroom app working, let’s deploy it to the cloud in a few clicks. You can deploy to any cloud that supports Node.js. I will be using Microsoft Azure as I can run a Node.js website on there for free. You can sign up for a free trial of Microsoft Azure here. You will get trial credits to spend on all Azure services. For […]

This month we’ll continue our little series of the latest and most interesting WordPress plugins. What would WordPress be without the right plugins? Plugins allow easy modification and customization of a WordPress blog. This series is not about plugins everyone knows of. Instead, we’ll present the latest WordPress plugins of the month. Lean back and enjoy our list of the latest and most exciting May 2015 plugins. 1. Resume’s Builder Resume’s Builder creates appealing CVs and biodata in no time. Predefined fields let you make unlimited entries. The data can then be displayed with stunning themes. Developer: paratheme Continuous development: Yes Latest version: 04/13/2015 Price: Free on WordPress.org License: GNU GENERAL PUBLIC LICENSE Incompatibilities with other plugins: Not known Developer’s homepage: Demo page of the plugin Download from WordPress.org 2. Ads Ads allows you to place ads wherever you want in your posts and on pages using a WordPress shortcode. You can create as many ad shortcodes as you need – there is no limit according to the plugin description. You can use, for example, HTML blocks, Google Adsense, or Bing Ads. The alignment of the ad blocks can be easily adjusted. If you want the zoom feature used in […]

This Node.js tutorial series will help you build a Node.js powered real-time chatroom web app fully deployed in the cloud. Throughout the series, you will learn how to setup Node.js on your Windows machine, how to develop a web frontend with Express, how to deploy a Node Express-based app to Microsoft Azure, how to use Socket.IO to add a real-time layer, and how to deploy it all together. Level: Beginner to Intermediate–you are expected to know HTML5 and JavaScript Part 5 – Connecting the Chatroom with WebSockets Welcome to Part 5 of the hands-on Node.js tutorial series: Build a Node.js-powered chatroom web app. In this installment, I will show you how to connect the front-end chatroom to the node chatroom backend that you built in Part 2, Part 3 and Part 4. Adding jQuery, SocketIO and index.js The first thing we want to do before we start writing our frontend JavaScript code is to ensure the files and dependencies we need are going to be delivered by the node server. Let’s add jQuery and Socket.IO first to the layout.jade file which is extended by all the other jade files in our project. Replace the single link to bootstrap.min.js with a link […]

Being deeply religious people, residents of United Arab Emirates live in a peaceful world hemmed in between the inhospitable desert and the Persian Gulf. Here, religion plays a significant role, affecting not only everyday life but also culture and art. It is not a secret that the UAE sports numerous distinct national characteristics that some may find outdated or obsolete. Although despite such constraints, the country can boast of one of the highest levels of the human development index and has a particular weight in world’s politics and economy. It’s no wonder that in the design sphere, artists also try to uphold high standards, push the boundaries and implement high-end solutions. Today, we are here to show you some high-grade examples of that craftsmenship… It seems that we quite rarely encounter websites made by agencies based in that part of the world, since we got used to looking for works with subtle calligraphy for displaying content or solely focus on the right-to-left writing system. In fact, modern creative teams manage to meet requirements of users from Middle East, Europe, America and others, opting in favor of neutral formatting and common type families. The state of design in UAE is not […]

Media queries allow websites to adjust their layout depending on the screen orientation of a smartphone or tablet. But sometimes you may want your website locked to a particular orientation, portrait or landscape. The format of native apps can be specified in such a case. The app will then only be displayed in the preset format – independently from the actual device orientation. By using the HTML5 Screen Orientation API, you can now define the screen orientation in JavaScript. Define Screen Orientation for a Document The screen orientation can be adjusted via the screen.orientation property and the lock() method. The method’s default value is “any”. This allows the device to apply any orientation depending on the physical orientation of the device. The value “natural” displays the website in the device’s natural orientation, which varies from device to device. Smartphones usually use the portrait mode, whereas tablets prefer the landscape mode. screen.orientation.lock(“natural”); In the above example, it’s set to the natural orientation of the device. Of course, the Screen Orientation API also allows you to define an individual orientation. You can choose between four values, which cover all possible orientations of mobile devices. These are: “portrait-primary”, “portrait-secondary”, “landscape-primary”, and “landscape-secondary”. The […]

Today we have a digital art treat for you, the amazing artwork of StudioKxx – Krzysztof Domaradzki who was commissioned by advanced photoshop magazine to a design challenge to create the brand for a MP3 player. Not only is this awesome to apppreciate but very usefull to learn from too

Client: Imagine Publishing

I was put to the test and asked to create an image for a mock branding challenge.

The brief required me to reflect the quality of the product ( vector MP3 player ) and its intended user group.
The idea was to focus on the product as an inspirational resource – promoting the notion that ‘music inspires
artists to excel their creative potential and generate ideas’.

This Node.js tutorial series will help you build a Node.js powered real-time chatroom web app fully deployed in the cloud. Throughout the series, you will learn how to setup Node.js on your Windows machine, how to develop a web frontend with Express, how to deploy a Node Express-based app to Microsoft Azure, how to use Socket.IO to add a real-time layer, and how to deploy it all together. Level: Beginner to Intermediate–you are expected to know HTML5 and JavaScript Part 4 – Building a Chatroom UI with Bootstrap Welcome to Part 4 of the hands-on Node.js tutorial series: Build a Node.js-powered chatroom web app. In this installment, I will show you how to add a Twitter Bootstrap-styled frontend to the chatroom backend you built in Part 2 and Part 3. What is Bootstrap? Bootstrap is a wildly popular HTML and CSS framework for building websites and web applications. It is the number one project on GitHub. Bootstrap supports responsive web design, allowing the layout of your page to adapt to the device (desktop, tablet, mobile). Adding Bootstrap to Our Project To add Bootstrap to our project, we have to download the minified CSS and JS files for Bootstrap. You can download […]

There are several solutions to creating galleries via JavaScript. But sometimes you may find the handling is not convincing, others provide a rather poor functionality. Flickity, however, is a state-of-the-art JavaScript framework for galleries that works great on desktops, as well as mobile devices. The gallery is responsive and can be controlled with your mouse or gestures – or even your keyboard. Thanks to CSS3 you can quickly navigate through galleries with animations. Quickly Integrated and Configured If you don’t want to read the documentation, you can quickly integrate Flickity into your project without any further configuration. You need to add a JavaScript file for the functionality and a stylesheet file for the layout and animated transitions to the HTML header. Then you can mark up the gallery via HTML. Define a container element that wraps around all gallery elements and assign the classes “gallery” and “js-flickity” to it. This can be a