Archive

Posts Tagged ‘HTML5’

Chrome auto fills email and password

July 25, 2014 1 comment

I have recently ran into a weird situation when testing some of my screens with Chrome.  Consider the following screen shot:

 

Screen Shot 2014-07-25 at 6.42.36 PM

 

As you can see, Chrome is auto filling my email address and password.  As this is a screen that I am designing, I was very surprised to see this behavior.  It took me a while but I found various solutions to the problem.  The one that I elected to use was more by choice of the designer I have built to create these screens than any other reason.

Place the following code before “Login Email”, as in my example:


<input type="password" style="display:none;" />

As you can see from the code above, we are basically creating an Input tag with the Type of Password.  We also set the Style to Display:None.  This ensures that it isn’t visible and fixes our issue with Chrome.

I hope that this is a temporary fix and that Chrome will work properly in the future but until then, we have ourselves a work around.

Here is a screen shot of the form now working properly:

Screen Shot 2014-07-25 at 6.52.45 PM

Hope this helps….

Categories: English Tags: , , ,

Mobile First and Responsive Web Design

December 11, 2013 Leave a comment

I had a great time speaking last night to the Charlotte ALT.NET User Group.  My presentation was on Mobile First and Responsive Web Design.

Here are the slides from the presentation.

Thanks to everyone who came out.

Build Your Own Game (BYOG) – Using CreateJS and Box2dWeb

I am excited to be presenting tonight at the Charlotte Game Dev group.

Here is a summary of what we will be presenting:

In this session, we will take a look at what it takes to build your own game using CreateJS and Box2DWeb.

We will look at the code necessary to create a simple game as well as talk about how all the moving parts fit together.

Bring your laptop and come prepared to build an application. We will also showcase how you can take your game and launch it as a native Windows 8 application. This is a great feature of Windows 8 since it natively speaks HTML and JavaScript.

Hope to see all of you there!

Client-side MVC Architecture

April 17, 2013 Leave a comment

I am excited to be presenting tomorrow night at the WNC .NET Developers Guild.

Here is a summary of what we will be presenting:

With social sites becoming so popular like Facebook, Twitter, LinkedIn, etc, we are reaching a point where consumers are demanding applications and systems that can deliver real-time experiences.  We will look at the landscape and discuss some of the most popular frameworks currently available.  We will also look at the question of ubiquity and how we can leverage good architecture and design to support such models.  Finally, we will take a look a one such architectural approach and look at the pros and cons with such an architecture.

Hope to see all of you there!

Update:  Here is a link to my slide presentation.

Developing Windows 8 – Unable to activate Windows Store app

April 16, 2013 Leave a comment

I have encountered the following error several times and I am sure that I will continue to encounter it in the future.

Unable to activate Windows Store app.  The activate request failed with error ‘This app failed to launch because of an issue with its license.  Please try again in a moment.’

Unable to activate Windows Store app

If you come across this error when you fire up Visual Studio, you may end up doing a lot of things to try to resolve the problem.  Several that come to mind are:

  • Re-starting Windows
  • Re-starting Visual Studio
  • Modifying your package manifest

None of these actually fix them problem.  It turns out that the majority of time that you encounter this problem is because you have already installed the solution into start screen.  I would recommend that anytime you encounter this error, that you always first uninstall the application from the start screen and then try to run it from Visual Studio again.

Hope this helps…

Categories: English Tags: , , , , ,

Building Immersive Windows 8 Apps

March 26, 2013 Leave a comment

I am excited to be presenting with my friend Brian Hitney tomorrow night at the Charlotte Enterprise Developers Guild.

Here is a summary of what we will be presenting:

Windows 8 opened up a whole new set of possibilities for application developers in terms of how their applications can interact with the underlying operating system, with other applications as well as with the users. Specifically this includes the ability to utilize Contracts (search, share, settings) to give the impression your application is ‘one’ with the operating system as well as creating live Tiles to allow your application to communicate with the users even when the application is not running. In this session we will take a look at how you can use Contracts and Tiles to provide your application a great user experience and make your users feel truly engaged.

Hope to see all of you there!

Charlotte Game Dev

March 26, 2013 Leave a comment

I had a great time presenting at our first meeting!  We had a good turnout and it is going to be a lot of fun continuing to work with the group.  I appreciate all the enthusiasm and support from the members and look forward to some great meetings.

Here is a link to the applications that I demoed during the presentation:  games

Look forward to seeing you at the next meeting!

You can sign up for the group here.

Introducing CodePlus!

February 27, 2013 1 comment

CodePlus is an application that I wrote because I wanted a better coding experience on the Windows 8 RT devices since I could not run Visual Studio. Here is a description of CodePlus:

CodePlus – is an editor to allow developers to program in C, C++, C#, CoffeeScript, CSS, HTML, Java, JavaScript, Ruby, Perl, PowerShell, Python, VB.NET, and many more. It supports undo/redo and syntax highlighting. As a developer, you can point to a folder and work on any files in that file.

Here are a couple of screen shots of the application:

Screenshot.39431.1000000

Screenshot.39431.1000001

Screenshot.39431.1000002

Screenshot.39431.1000003

Screenshot.39431.1000004

Screenshot.39431.1000005

Screenshot.39431.1000006

Screenshot.39431.1000007

This application has kept me the busiest by far as I am getting requests for new languages to support and there are a lot of nuances around building a good editor. Luckily, there are some very good libraries available that help making this a breeze.

So what does the application do?

Well, it basically is a NotePad editor but with some added functionality and features.  I wanted to have built-in syntax highlighting for my code that I was working on.  I also wanted to have the ability to point to a folder and recursively display all the files available in the Explorer flyout.  This was important as I didn’t want to open each file for a project manually.  This is where I am trying to be more like Visual Studio with a project structure but only use folders as my driving factor.  I also wanted to be able to preview my HTML when I was coding it.  I wanted to allow for saving my files without interacting with a file picker after I had either loaded an existing file or created a new one.

Here is a list of the libraries that I am using:

CodeMirror – this is the library that does the bulk of the work for me.  (Note: Another similar library that you could use is Ace.)
jQuery – as you cannot point to a CDN for libraries, I wanted to provided jQuery support in my editor and preview tool.
KnockoutJS – I wanted not only to support this but I am also using it internally in the application as well.

I found that writing this application was not only challenging but also gratifying as I am very interested to see what other developers are looking for in an application and what they are looking for to make their development environment better.

When building Windows 8 applications using HTML5 and JavaScript, you are not allowed to point to any library on a CDN and download it at runtime. All libraries that you use must be part of the project. Not only that but most of these libraries are on GitHub or some other location and the file encoding does not match the requirements necessary for Windows 8. One last thing to note about third-party libraries is that you will probably fail the Windows 8 app certification process as the library will be considered unsafe. Luckily both the file encoding and, to some degree, un-safe code is easy to fix. For example, there are several versions of jQuery now that you can download that will pass Windows 8 app certification.

The only other “complaint” that I have with using third-party libraries is that I am stuck with manually updating my application when new versions of a library are available. I understand the security implications and why Microsoft has chosen to lock down and sandbox our applications but I wish this process could be easier.

From a support perspective, I am using UserVoice. Here is a link to my support site.  UserVoice is absolutely amazing and it gives your application the polish that it needs from a support perspective.  It provided a great way for me to get feedback for my application as well as posting FAQs and any support information I wanted.

Where do we go from here?

I would really like to add syntax checking to several of the languages that I support.  I get so much for free from CodeMirror that I don’t know how many languages I can support but it would be really nice to have this feature.

I would also like the ability to fully support the preview aspect of my HTML editor with regard to pulling in scripts or css from different file locations.  Due to the security nature of Windows 8, this isn’t easy but I believe that I can support relative scripts and links.

Again, writing this application has been a great learning experience and a joy.  I know I have said this in several blog posts but I truly love the ability to write native Windows 8 applications in HTML5, JavaScript and CSS3.

Hope this helps and gives you some ideas for your applications…

Introducing DoodlePad!

February 26, 2013 1 comment

Another simple but fun application that I wrote for my boys. DoodlePad is yet another paint-like clone that is touch enabled. I wanted to provide a simple means for my boys to play around and make me some cool drawings.

Here are a couple screens shots:

screenshot_02262013_073728
This is the splash screen.

screenshot_02262013_073831
Here is a screen showing my Appbar and NavBar.

screenshot_02262013_073838
Here is an example of the color picker I use.

screenshot_02262013_073848
Here is a simple example of my size picker I use as well.

Like my games, this application relies heavily on HTML5 canvas to get its job done. I also want to provide a link to a pure JavaScript color picker I used in the app in case any of you are looking for one.

I tried to find a control or some pure JavaScript that would allow me to do the size picker and I didn’t find one. I ended up building it myself as the process is really simple and can be used anywhere you need something to reflect size. First, I used an Input type of “range”. Next I positioned a DIV to the right of it.

Here is the HTML snippet of the flyout that I am using in my application:

<div class="flyout" id="sizeFlyout" data-win-control="WinJS.UI.Flyout"><label>Size: <input id="penSize" type="range" max="100" min="1" step="1" value="5" /></label>
<div id="actualSize"></div>
</div>

Next, I will show you the CSS I used:

#sizeFlyout {
    height:100px;
    width: 425px;
}
#actualSize {
    float:right;
    height:5px;
    width:5px;
    background-color: black;
}

Finally, here is the JavaScript I used to adjust the size of the DIV and color:

var brushColor = "#df4b26";
var actualSize = document.getElementById("actualSize");
var penSize = document.getElementById("penSize");
penSize.addEventListener("change", function (element, e) {
    actualSize.style.height = penSize.value + "px";
    actualSize.style.width = penSize.value + "px";
}, false);

As you can see, it is pretty simple and is a great technique to represent the size of an object based on a range or scale.

Another interesting feature that I struggled with a bit was allowing my boys to pick a background color or even open an existing image and use it as a background. My first approach was to simple paint this on to the canvas and it worked fine if the boys would pick a background color and start drawing but the moment they tried to pick a different background color it would overlay and cover up their drawing. I also noticed that the more I put into the canvas the more I had to worry about performance.

It turns out that my solution was simple, an HTML5 canvas is transparent by default and this turns out to be great. All I had to do was simply set the background color of the DIV that was wrapping my canvas.

This worked perfect until I tried to save my canvas out to a file. When I performed a save, I would get a transparent background because the “real” background was not part of the canvas. Here is the save function that I used. I am showing the full cycle from when the user clicks on the save button:

function saveAs() {
    // Verify that we are currently not snapped, or that we can unsnap to open the picker
    var currentState = Windows.UI.ViewManagement.ApplicationView.value;
    if (currentState === Windows.UI.ViewManagement.ApplicationViewState.snapped &&
        !Windows.UI.ViewManagement.ApplicationView.tryUnsnap()) {
        // Fail silently if we can't unsnap
        return;
    }

    var encoderId;
    var filename;
    var stream;

    var imgData;

    // Create the picker object and set options
    var picker = getFilePicker("save");

    picker.pickSaveFileAsync().then(function (file) {
        if (file == null) return;
        filename = file.name;

        if (file) {
            switch (file.fileType) {
                case ".jpg":
                    encoderId = Windows.Graphics.Imaging.BitmapEncoder.jpegEncoderId;
                    break;
                case ".bmp":
                    encoderId = Windows.Graphics.Imaging.BitmapEncoder.bmpEncoderId;
                    break;
                case ".png":
                default:
                    encoderId = Windows.Graphics.Imaging.BitmapEncoder.pngEncoderId;
                    break;
            }
            return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
        } else {
            return WinJS.Promise.wrapError("No file selected");
        }
    }).then(function (_stream) {
        stream = _stream;

        // BitmapEncoder expects an empty output stream; the user may have selected a
        // pre-existing file.
        stream.size = 0;

        return Windows.Graphics.Imaging.BitmapEncoder.createAsync(encoderId, stream);
        //return Windows.Graphics.Imaging.BitmapEncoder.createAsync(Windows.Graphics.Imaging.BitmapEncoder.pngEncoderId, stream);
    }).then(function (encoder) {
        var canvas = id("doodleCanvas");
        var width = canvas.width;
        var height = canvas.height;
        var ctx = canvas.getContext("2d");

        var canvas2 = id("canvas2");
        canvas2.width = width;
        canvas2.height = height;
        WinJS.Utilities.removeClass(canvas2, "hidden");
        var ctx2 = canvas2.getContext("2d");
        var root = document.getElementById("root");
        if (root.style.backgroundImage !== "") {
            ctx2.drawImage(currentImage, 0, 0, width, height);
        }
        else if (root.style.backgroundColor !== "") {
            ctx2.fillStyle = root.style.backgroundColor;
            ctx2.fillRect(0, 0, width, height);
        }
        ctx2.drawImage(canvas, 0, 0);

        imgData = ctx2.getImageData(0, 0, width, height);
        WinJS.Utilities.addClass(canvas2, "hidden");

        encoder.setPixelData(
            Windows.Graphics.Imaging.BitmapPixelFormat.rgba8,
            Windows.Graphics.Imaging.BitmapAlphaMode.straight,
            width,
            height,
            96, // Horizontal DPI
            96, // Vertical DPI
            imgData.data
        );

        //Go do the encoding
        return encoder.flushAsync();
    }).then(function () {
        WinJS.log && WinJS.log("Saved new file: " + filename, "sample", "status");
        //id("buttonSave").disabled = false;
        //id("buttonRender").disabled = false;
    }).then(null, function (error) {
        WinJS.log && WinJS.log("Failed to save file: " + error.message, "sample", "error");
    }).done(function () {
        stream && stream.close();
    });
};

If you haven’t played with Promises, I would suggest you do as they make asynchronous programming a lot easier in JavaScript. My function saveAs gets called whenever the save button is pressed. I then proceed to display a Save File Picker. Once the user has picked a file name or existing file, I grab the stream object and pass it to my encoding. It is here that I perform a simple swap operation where I use two canvas objects. This allows me to “paint” the background on the original canvas while still saving its content on a dummy canvas. I then just dump the contents from the dummy back onto the original canvas.

All in all, I have plans to continue to improve the application. The boys have requested the ability to have stamps or stencils. They would like to have simple shapes to draw as well as the ability to have stock images for them to color. They also wanted to have a crayon effect and some others that they have used in the past.

Hope this helps….