JavaScript

Poor Mans jQuery

A lot of people use jQuery in their HTML/JavaScript applications. There’s nothing wrong with that. But I’ve seen a lot of people use jQuery only to make it easy to find elements and they are not using any of the other jQuery functions. It’s pretty clear that writing a single ‘ $ ‘ instead of the way longer usages of various function on the ‘document‘ object, like getElementById. One of the functions on the ‘document’ object is the querySelectorAll function. This function brings a similar experience to vanilla JavaScript by taking selectors as a parameter.  So if we take a…

HTML5, Presentation, UWP app

Speaking about JavaScript UWP apps.

Last week I was invited by iSense to give a presentation about JavaScript Frameworks in Universal Windows Platform Apps. I decided my personal goal was to show people that JavaScript is a perfectly legit language of writing your apps for Windows 10, specially when you have a web development background. I started with an introduction about the way the JavaScript UWP apps work in Windows 10 and talked a bit about the great support of ES6 in Microsoft Edge. I then demonstrated how easy it is to convert a web application to a hosted UWP app, including what you could do in…

Video

OAuth in a JavaScript UWP app

A quick walkthrough on how to get authenticated with YouTube using oauth, in a JavaScript Universal Windows Platform (UWP) app. It uses a few classes from the Windows Runtime. The demo code can be found on my github account at: https://github.com/sorskoot/UWP-OAuth-demo Guide from YouTube for setting up oauth: https://developers.google.com/youtube/v3/guides/auth/installed-apps Documentation of the YouTube API: https://developers.google.com/youtube/v3/docs/ Getting your own client ID and client secret: Google developer console – https://console.developers.google.com/ How to obtain credentials – https://developers.google.com/youtube/registering_an_application More on the oauth flow – https://developers.google.com/youtube/v3/guides/auth/installed-apps Twitter: @Sorskoot Weblog: http://winjs.ninja Channel: http://youtube.com/c/winjsninja

CSS, Design, HTML5, UWP app

Styling default JavaScript UWP app controls

When working on my drum machine app I started changing the look and feel a little. I started my changing the black and gray to some more bright colors. Pretty quickly I ran into some issues with changing the look and feel of the default controls. The blue color is specified as a named color ‘Highlight’, which seems to be controlled by Windows. After searching for quite a while I came across some MSDN documentation that describe a couple of vendor specific CSS pseudo-classes to alter various elements of the controls. The whole list of pseudo-classes you can use to…

WinJs

List item delay in Pivot

In one of my apps I wanted to have the items in a list with the list being in a Pivot control. I wanted to have the items slide in with a little delay, like they are in the Windows Phone mail app. I’ve been looking for that a lot, but couldn’t find anything. Until I stumbled upon the Pivot Control Sample app. The actual solution is demonstrated in this sample. It doesn’t seem to be documented anywhere else… Here’s how it’s done… All you have to do to get the delay on the items, or basically any HTML inside…

WinJs

Detecting Phone, Desktop or Web with WinJS

I’m my previous post I showed how you can add a website to a universal project and share some JavaScript between all three. This is nice, but I will run into a situation where you’ll have some code that is not supposed to run on one of the platforms. In the C# world you can use compiler directives in situations like this. In JavaScript this is not possible (Although you could create constructions that mimic directives using Grunt for example). WinJS has some functionality build in that can help finding out what platform you are using. There are two properties…

WinJs

WinJS Promises

For a while now I wanted to dive a little deeper into Promises, so I decided to write this tutorial. For this tutorial I used the WinJS version as available on GitHub. If you want to follow along you’ll have to compile the code yourself. Which is very easy, but if you have any issues or questions please let me know and I’ll do a tutorial on that. What’s a “promise”? A promise is an object representing a value that is eventually returned by an operation. This object can be passed around like any other object. Various frameworks have various…

TypeScript, Windows Store apps

Windows Store app with TypeScript and Knockout

In this tutorial we’re going to make a very simple Windows Store app that uses TypeScript. The app is going to use Knockout to handle user input to search patterns on http://colourlovers.com. I assume you have read my previous tutorial on how to set up TypeScript compilation in a Windows Store app. We’ll start with an empty project after adding TypeScript compilation. Packages First we’ll start by adding our dependencies through NuGet. We have a dependency on KnockoutJS, because this is what we need for our bindings. To make the request to colourlovers we are going to use jQuery. First…

Windows Store apps

Using Grunt to compile .less in Windows Store apps

I was playing with Grunt. Grunt is a JavaScript task runner. It automates a lot of repetitive tasks like minification, unittesting, linting and more. I’ve used it to compile templates and compile .less files to .css. In this tutorial I’ll show you how to do the latter. Before we dive into Grunt you need Node.js. Just go to http://nodejs.org and install it. NodeJS can serve websites, but can also run tools. Like Grunt. Node.js uses a package manager (a bit like NuGet), npm. You’ll be using npm a lot when using Node.js. Getting started First let’s create a new project…