End Your If

Category: JavaScript

  • Replacing Radio Buttons with a Button Group using Bootstrap and #KnockoutJS

    Radio buttons are hard-to-see, not easy to select, and let’s face it, quite mundane. You would like to JavaScript String replace() these radio buttons with a group of buttons that represent the same functionality, e.g. only one of the options may be selected at any given time.

    Leveraging Bootstrap which provides many incredibly styled components for buttons, alert boxes, tables, forms, etc… regular radio buttons will be replaced by a button group (see screenshot below). This Knockout.js tutorial will be used to create a custom data binding that will make the group of buttons act like regular radio buttons (with a nicer look of course).

    radiobuttongroup

    This example assumes you have a basic understanding of both Bootstrap and Knockout.js. If you don’t, feel free to explore my latest book ASP.NET MVC 5 with Bootstrap and Knockout.js for a great introduction, plus many more examples.

    The versions used for this example are 3.3.4 for Bootstrap and 3.3 for Knockout.js. This example should be compatible with older versions of these frameworks. (more…)

  • (Un)Check All using #KnockoutJS

    When I wrote Knockout.js: Building Dynamic Client-Side Web Applications I was trying to focus on demonstrating specific things, such as custom bindings, extending observables, etc. Unfortunately this didn’t leave room for what I would call “random” examples of things that I do on a semi-regular basis. This blog post will demonstrate how to create a (un)check all list of checkboxes.

    If I haven’t said it before, Knockout js examples like this are why I love working with this framework on a daily basis. This example is accomplished in under 50 lines of code, with most of it being whitespace for readability!

    The following example assumes you understand how to install Knockout.js and have a brief understanding of Knockout ViewModels. If you are looking for a good introduction *cough* *cough*, my book does an excellent job of it 😉

    (more…)

  • ASP.NET MVC 5 with Bootstrap and Knockout.js

    I can’t believe 9 months has gone by since I came to an agreement on writing two books with O’Reilly Media! The first book was on Knockout.js which is a great framework that focuses on the Model-View-ViewModel (MVVM) architecture pattern. I finished the initial draft at the end of September 2014. During October and November, I multi-tasked by writing the second book while working through copy edits and multiple rounds of QC on the first book.

    The concept for this book started with creating many Knockout js tutorials and the first book official released (in e-book format) in December with the print version releasing early in January.

    December, January, and February were all busy months while I was working on the second book. I cannot stress how difficult this book was to write. Each chapter would take days to write, tweak, and finalize all the while continuing to write blogs like how to use SQL Server Convert String to Date with examples.

    March, and now April contained more copy edits and QC rounds for the second book. I think the book is about to be finalized and the e-book version should be ready sometime in the middle of May with the print copy following shortly after!

    As the title of this blog states, the book is titled ASP.NET MVC 5 with Bootstrap and Knockout.js. The (un)official back cover reads as follows:

    “Bring dynamic server-side web content and responsive web design together to build websites that work and display well on any resolution, desktop or mobile. With this practical book, you’ll learn how by combining the ASP.NET MVC server-side language, the Bootstrap front-end framework, and Knockout.js—the JavaScript implementation of the Model-View-ViewModel pattern.

    Author Jamie Munro introduces these and other related technologies by having you work with sophisticated web forms. By the end of the book, experienced and aspiring web developers alike will learn how to build a complete shopping cart that demonstrates how these technologies interact with each other in a sleek, dynamic, and responsive web application.

    • Build well-organized, easy-to-maintain web applications by letting ASP.NET MVC 5, Bootstrap, and Knockout.js do the heavy lifting
    • Use ASP.NET MVC 5 to build server-side web applications, interact with a database, and dynamically render HTML
    • Create sleek and responsive views with Bootstrap that render on a variety of modern devices; you may never code with CSS again
    • Add Knockout.js to enhance responsive web design with snappy client-side interactions driven by your server-side web application”

    I think this does a great job of describing why I chose these three technologies for the book and how they come together allowing you to easily build dynamic and responsive websites.

    While writing these two books I jotted down a lot of ideas for examples. Unfortunately (or fortunately), I was unable to include them all into the books. So over the next little while, I will work to bring them as examples on my blog. Stay tuned. If you have any questions about the books, feel free to post questions/comments here on my blog or find me on Twitter @endyourif

  • Javascript, the Back Button, and Windows Phone 8 Development

    I recently had the opportunity to begin exploring and toying around with Windows Phone 8 development.

    Why you ask?  Why not really, but mostly because I was giving a free phone and it’s an untapped market when it comes to apps.  At this stage it’s not over diluted like the Android and iPhone stores are.  That and of course there is an option to create apps using HTML, Javascript, and CSS – technologies I’ve used and mastered for years!

    I actually submitted my first app last weekend – and sadly – it got rejected 🙁  I was given two reasons; firstly I did set a default application icon, whoops my bad.  Secondly, I didn’t properly handle the back button since there are “multiple pages” in my application.

    It took me several hours to finally found the answer so I thought I would share it.  Please note, this feels like a bit of a hack, but I wasn’t able to get the “suggested” solutions working…

    (more…)

  • Node.js Versus Nginx: Bare Bones Test

    This is a quick follow up to yesterday’s post on Node.js Versus Apache2: Bare Bones Test where I performed a straight HTML test of Node.js tutorial versus Apache.  With my recent switch to Nginx, I thought it prudent to perform this exact same test swapping out Apache for Nginx.  The results are much more interesting to yesterday’s since there is no total destruction (sorry for the spoiler if you didn’t read yesterday’s article).

    (more…)