Recent Posts by Geertjan Wielenga

Here you see two web apps, the first is "ModularSales" and the second is "SimpleSales": The first uses Require.js for modularity, while the other does not. These are two handy samples to play with to get to understand the basics of RequireJS. Get them here: https://github.com/GeertjanWielenga/RequireJSSamples And watch the YouTube screencast to understand the code and the reasons for using RequireJS: https://www.youtube.com/watch?v=v4jnTWFihMU A related blog entry: https://blogs.oracl...

What's your favorite font in NetBeans IDE? For me, I really like "Consolas 18 Bold".  It always looks really good and sharp: 

The HTML5 Fun Pack for NetBeans IDE, first announced in part 1 of this series, is now updated to include HTML5 code snippets for drag & drop, range, color, and e-mail. Click to enlarge the image below and notice the HTML5 Palette in the Component Palette on the right of the screenshot: All the tags and code from line 10 to line 32 above magically appear when you drag and drop the 'Range' palette item into the HTML editor. Similarly, the other palette items typically...

Whereas Response.js, discussed in the previous blog entry, is handy for modifying the DOM by swapping out DOM elements (instead of using CSS rules to hide DOM elements) based on screen size, an alternative approach, focused on HTML fragments, is provided by Foundation.js, in particular, Foundation Interchange. Foundation is a UI framework, comparable to Twitter Bootstrap and Angular UI. In the 5.0 release of Foundation, Interchange was made available. Interchange is...

More often than not, you use CSS media rules to specify whether something should be displayed based on screen resolution. For example, imagine you have a logo which you'd rather not display on smaller devices because you want that real estate for other things: @media (min-width: 481px) { .logo:before { content:url("images/coca_cola_logo.png"); display: block; text-align:center; }}@media (max-width: 480px) { .logo:before { ...

Are you doing anything at all with Knockout.js? If so, sooner or later you'll come across $parent and $root and the other binding context objects. Working with these objects can be quite complex... which is why there are tools to help you specifically with these objects, as demonstrated below in a quick movie:

Let's populate an HTML5 DataList with countries via Knockout.js. The result will be as shown below, that is, you will have code completion via your DataList... ...and, when a country is selected, and focus moves out of the DataList (e.g., use the Tab key), its states will be displayed in an unordered list below: The completed sample code is here: https://github.com/GeertjanWielenga/Countries The starting point is to populate an observable array with your countries and states. I...

What better way to get familiar with the new HTML5 elements and attributes than to have them integrated into the Component Palette in NetBeans IDE? Below, when you look in the palette on the right side of the screenshot, you see a new HTML5 category, which currently contains four new palette items, for audio, data list (code completion), required (validation), and video:  When you double-click an item, or drag it into the HTML editor, new elements and attributes related to the...

Let's now use Solid Knockout to access data from a database: To get to the above point, I made relatively few changes and, most importantly, I made those changes within the modular framework that Solid Knockout provides. Below, the files in green are new, the files in blue are changed. To get started, expose data from your database via RESTful Web Services, which is trivial to do in NetBeans IDE. Then use the Knockout Client Generator plugin to generate the skeleton client...