28 Aug

Flarum – Open Source Forum Software Focus on Simplicity

Flarum is free, open-source forum software with a focus on simplicity. You can use Flarum to easily set up a discussion forum for your website. It’s forum software reimagined. Flarum looks and feels great out of the box. The user interface is streamlined so you can spend less time clicking and more time talking. You […]

The post Flarum – Open Source Forum Software Focus on Simplicity appeared first on WebAppers.

27 Aug

Build a Web Game in an Hour with Visual Studio and ASP.NET

This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

This article discusses:

Basic game development philosophy

Using Web technologies for game development

Adding game controls and AI

Technologies discussed:

Visual Studio 2013 Pro, Visual Studio 2013 Community, ASP.NET

Code download (.zip)

You don’t need an entirely new skill set to develop games. In fact, your current Web development skills in HTML, JavaScript, CSS and so on are just fine for a wide range of games. When you build a game with Web technologies, it will run on pretty much any device with a browser.

To prove this, I’ll demonstrate building a game from scratch using Web technologies and just two external libraries, and I’ll do it in less than one hour. I’ll cover a variety of game development topics, from basic design and layout, controls and sprites, to arti­ficial intelligence (AI) for a simple opponent. I’m even going to develop the game so it works on PCs, tablets and smartphones. If you have some experience with programming as a Web developer or another development domain, but no experience writing games, this article will get you started. If you give me one hour, I promise to show you the ropes.

Get Up and Running

I’ll do all development in Visual Studio, which will allow fast execution of the Web app as I make changes. Be sure to have the latest version of Visual Studio so you can follow along. I used Visual Studio 2013 Pro, but updated the code with Visual Studio 2013 Community. Also if you have a Mac or Linux, Visual Studio Code is available cross-platform nowadays.

This app will require no server code, so I start by creating a new, empty Web page project in Visual Studio. I’ll use the empty C# template for a Web site by selecting the Visual C# option after selecting File | New | ASP.NET Empty Web Site.

The index HTML file requires just three resources: jQuery, a main style sheet and a main JavaScript file. I add an empty CSS file to the project called style.css and an empty JavaScript file called ping.js to avoid errors when loading the page:

<!DOCTYPE html>
<head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script> <script src="ping.js"></script> <link rel="stylesheet" href="style.css"></script>

Also don’t forget to test this app (or any other) for that matter across browsers & devices. While the code I wrote is interoperable with modern browsers like Chrome, Firefox, and Microsoft Edge, it’s always a best practice to double-check. Now you can do that with free virtual machines and other tools like http://www.browserstack.com.

Continue reading %Build a Web Game in an Hour with Visual Studio and ASP.NET%

27 Aug

Voice controlled PHP apps with API.ai

In this tutorial we’ll be looking into Api.ai, an API that lets us build apps which understand natural language, much like Siri. It can accept either text or speech as input, which it then parses and returns a JSON string that can be interpreted by the code that we write.

All the files we’ll use in this tutorial are available in this Github repository.


Before we move on to the practical part, it’s important that we first understand the following concepts:

agents - agents are applications. We create an agent as a means of grouping individual entities and intents.

entities - entities are custom concepts that we want to incorporate into our application. They provide a way of giving meaning to a specific concept by means of adding examples. A sample entity would be ‘currency’. We define it by adding synonyms such as ‘USD’, ‘US Dollar’, or just ‘Dollars’. Each synonym is then assigned to a reference value that can be used in the code. It’s just a list of words which can be used to refer to that concept. Api.ai already provides some basic entities such as @sys.number, which is an entity referring to any number, and @sys.email which is an entity referring to any email address. We can use the built-in entities by specifying @sys as the prefix.

intents - intents allow us to define which actions the program will execute depending on what a user says. A sample intent would be ‘convert currency’. We then list out all the possible phrases or sentences the user would say if they want to convert currency. For example, a user could say ‘how much is @sys.number:number @currency:fromCurrency in @currency:toCurrency?’. In this example, we’ve used 2 entities: @sys.number and @currency. Using the colon after the entity allows us to define an alias for that entity. This alias can then be used in our code to get the value of the entity. We need to give the same entity a different alias so that we could treat them separately in our code. In order for humans to understand the above intent, all we have to do is substitute the entities with actual values. So a user might say ‘How much is 900 US Dollars in Japanese Yen?’ and Api.ai would just map ‘900’ as the value for @sys.number, ‘US Dollar’ for the fromCurrency @currency and ‘Japanese Yen’ for the toCurrency @currency.

contexts - contexts represent the current context of a user expression. For example, a user might say ‘How much is 55 US Dollars in Japanese Yen?’ and then follow with ‘what about in Philippine Peso?’. Api.ai, in this case, uses what was previously spoken by the user, ‘How much is 55 US Dollars,’ as the context for the second expression.

aliases - aliases provide a way of referring to a specific entity in your code, as we saw earlier in the explanation for the intents.

domains - domains are pre-defined knowledge packages. We can think of them as a collection of built-in entities and intents in Api.ai. In other words, they are tricks that Api.ai can perform with little to no setup or coding required. For example, a user can say, ‘Find videos of Pikachu on YouTube.’ and Api.ai would already know how to parse that and returns ‘Pikachu’ as the search term and ‘Youtube’ as the service. From there, we can just use the data returned to navigate to Youtube and search for ‘Pikachu’. In JavaScript, it’s only a matter of setting the location.href to point to Youtube’s search results page:

window.location.href ="https://www.youtube.com/results?search_query=pikachu"

Continue reading %Voice controlled PHP apps with API.ai%

27 Aug

Sponsor: imgix — Real-time Image Resizing as a Service

Looking to take advantage of the srcset attribute or <picture> element, but don't want to store the different versions of each image? Looking to apply blurs to images that don't peg the browser? imgix can help.

imgix is a real-time image resizing service and CDN. Resize, crop, and process images simply by changing their URLs. Mix and match over 90 URL parameters for unlimited different ways to process images.

It's free to sign up, and every new account gets $10 …

Sponsor: imgix — Real-time Image Resizing as a Service is a post from CSS-Tricks

27 Aug

How We Designed And Built Our First Apple Watch App


One sunny morning in the summer of 2014, I was sitting in a café having just finished an hour-long call with my remote team. Scheduling that call had been a messy exercise: we live in different time zones and it was hard to find a time that worked for everyone. I wanted to make dealing with time zone differences less painful.

I had some free time on my hands, so I pulled my notebook out and started playing around with an iWatch app idea. Yeah, you read that right — 2014 and iWatch, before a watch had ever been announced.

The post How We Designed And Built Our First Apple Watch App appeared first on Smashing Magazine.

27 Aug

Onsen UI: HTML5 mobile framework

Onsen UI is a mobile framework that includes Javascript and CSS frameworks for HTML5, PhoneGap & Cordova apps. It offers a large selection of Web-based UI components, and responsive layouts for smartphones and tablets, among other features.
27 Aug

A Lightweight, Customizable CSS Lightbox Gallery Plugin

jQuery LightGallery is a lightweight, customizable, modular, responsive, lightbox gallery plugin for jQuery. It uses CSS-only approach for resizing images and videos. So it will be extremely flexible, and considerably faster than using the JavaScript approach. Lightgallery comes with a few built in modules, such as thumbnails, full screen, zoom, etc. It is easy to […]

The post A Lightweight, Customizable CSS Lightbox Gallery Plugin appeared first on WebAppers.

27 Aug

The Ultrashock Vintage Design Bundle: Over 2 GB of Top-Quality Resources – Just $37

Stock up on a ton of creative items NOW! This time-limited Vintage Design Bundle contains an incredible assortment of brand new hard to find content including vector art, hi-res antique book and paper textures, four stunning fonts, ornamental elements, elegant tiled patterns, flourishes, guilloche patterns, vintage letterpress ink textures, and much more all with amazing value! With this bundle you will get incredible creative items with a total download size over 2+GB, all bundled togethe...Keep on reading: The Ultrashock Vintage Design Bundle: Over 2 GB of Top-Quality Resources – Just $37