HTML5, JavaScript

Keep your password safe!

I’m currently working on a short course on web security. In this course I’m going to show a couple of common mistakes in websites that create gaping holes. I’d like to give you a small tip in advance, just to make you more aware of what you are doing when you hit that ‘remember my password’ button in your browser. Although I’m pretty sure your browser itself keeps the password safe, it has to place it in the password field of the login form to be able to submit it. With this small trick you, (and anyone else that might…

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…

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…

HTML5, JSON, TypeScript, Windows Store apps, WinJs

Combining WinJS, TypeScript, jQuery and KnockOut

In this tutorial we’re going to build a very simple Windows Store application that uses jQuery and Knockout to get some data from the internet and show this in a GridView. I’ll show you how you create a new project, get all the the TypeScript definitions you need, get data from a web service and bind that to the GridView control. I’m assuming you have at least a little TypeScript knowledge. If you don’t you should have a look at the tutorials on http://TypeScriptLang.org first. File – New Start by creating a new project using the template Store apps with…

Blend for Visual Studio, HTML5, Windows 8.1, Windows Store apps, XAML

What’s new in Blend for Visual Studio 2013

First Look On the first day of the Microsoft Build 2013 conference the preview of Visual Studio 2013 was announced. The preview contains a new version of Blend for Visual Studio. This preview has some new features and some “old” features that didn’t work in the previous version, mainly when building Windows Store apps. The first thing noticeable after installing the preview is the new icon. Opening Blend will show you the splash screen which looks pretty much the same as the 2012 version. So does the welcome screen. A thing to note is that while all platforms are supported,…

CSS, Expression Blend, HTML5, Windows Store apps

setting view states in HTML windows store apps using Blend

Intro From developing XAML applications I got used to working with the visual state manager to set various states of my applications and controls. In Windows Store apps that are build using XAML use the visual state manager to change various properties when the view state of the app changes. The app can be ran in fullscreen, filled or snapped state. When building Windows Store apps using HTML and JavaScript I wanted to show some UI different when the view state changes. One way to accomplish this is to change the CSS class of the elements from JavaScript. Just handle…

CSS, Design, HTML5, Windows 8, Windows Store apps, WinJs, WinRT

72 design templates for Windows Store apps

I recently tweeted about some upcoming new design templates. At that time these templates were not released yet. Today I stumbled on them again. And it turns out that they are available for free on codeplex. You can see them all here. It’s not recommended to uses these templates as is. They’re provided as Visual Studio solutions in C# and JS and you should change the design to match your brand, of course. UPDATE May 9th 2013: Added 10 more templates to the list. UPDATE January 1st 2014: Added 12 more templates to the list. Here’s the entire list again.…

HTML5, WinJs

SFX in WinJS

When working on my entry for the Js13kGames contest I was looking for a synthesizer or sound generator for HTML5. I came across a javascript port of an a synthesizer in actionscript. It’s build by David Humphrey. Markus Neubrand added the parameter strings. It is available on github. Due to the time limit I only got it to work in Firefox at the time, but the library works in Chrome too. Unfortunately Internet Explorer is not supported. But, when porting the code to an Windows Store app I suddenly noticed that the sounds worked. I’ve created a small module around…

HTML5

Js13kgames contest

Last few weeks I worked on a an entry for the Js13kGames contest. The main goal of this contest was to write a game in javascript that was only 13k in size. I find that writing software for contests is a great way to learn more about a language. The tight deadline forces you to think and you will end up with a finished product. Because I’m working a lot with javascript lately, this contest was a great training. I build the game Orbizoid. The objective of the game is to catch the colored stars that float around with moons…

CSS, Expression Blend, HTML5, Windows 8

Discovering Expression Blend 5 – ListView

Often you need to display a list of items in a application. The Windows Library for JavaScript contains a ListView control for you to use in your applications. The control can be bound to a data source and templated from HTML. Getting started We’ll start off by creating a new project and choosing the Fixed Layout Application project template. As you can see, the template has added a paragraph (p) to the tree which contains some text. You can use that to place the title of your application. The ListView is going to be in the same div as that…