Monthly Archives: August 2020

Semantic UI – An alternative to Bootstrap?

Posted on by Posted in Frameworks, UI/UX, Web Development 1 Comment

Bootstrap is currently undisputedly the most popular CSS library. I have been using Bootstrap since 2012, starting with version 2.3. The current version is 4.5, with version 5 is under development and expected at the end of this year.

So why is Bootstrap so popular? There are several reasons, but perhaps the most important one is that it is very easy to get started and create attractive webpages, most components you need are available out-of-the-box, and there are  number of different themes to change the visual look of the sites. But perhaps the biggest reason for the popularity is its popularity. There are countless code snippets, samples and plugins available, as well as tutorial and a huge community you can tap into for help. There are currently over 98,000 questions on Stack Overflow for all versions of Bootstrap, and over 21,000 for the latest version.

But Bootstrap is of course not unchallenged. There are a number of other CSS frameworks available today, some more complete than others. One interesting framework I recently found is Semantic UI. It uses simple phrases, called behaviors, to trigger functions. Below is an example with a select box where the code is selecting two values from the list.

$('select.dropdown')
    .dropdown('set selected', ['meteor', 'ember'])
;

<select class="ui fluid dropdown" multiple="multiple" name="skills">
   <option value="">Skills</option>
   <option value="angular">Angular</option>
   <option value="css">CSS</option>
   <option value="ember">Ember</option>
   <option value="html">HTML</option>
   <option value="javascript">Javascript</option>
   <option value="meteor">Meteor</option>
   <option value="node">NodeJS</option>
   </select>

The resulting website looks very similar to one created in Bootstrap, if you use the default theme. One difference you might notice quickly is that the grid system is using 16 as the base, not 12 as Bootstrap does.

Semantic UI also contains several component you will not find natively in Bootstrap. On of them is dividers, which are available in horizontal and vertical variants.

The list component can very easily be configured in a multitude of different ways.

To create the horizontal list, the markup looks like this:

<div class="ui horizontal list">
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/tom.jpg">
    <div class="content">
      <div class="header">Tom</div>
      Top Contributor
    </div>
  </div>
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">Christian Rocha</div>
      Admin
    </div>
  </div>
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/matt.jpg">
    <div class="content">
      <div class="header">Matt</div>
      Top Rated User
    </div>
  </div>
</div>

Take a look at Semantic UI, maybe it will come in handy for your next web project!

Microsoft Flight Simulator – First Impressions

Posted on by Posted in Flight Simulator, Games Leave a comment

The highly anticipated new version of Microsoft Flight Simulator was released on August 18,, and I have been playing with it for a few days in my spare time, and I wanted to share my first impression.

This simulator is impressive. You can fly anywhere you like on Earth, thanks to Bing Maps. Microsoft partnered with Austria-based Blackshark.ai to enhance the satellite images using AI software. The result is a great looking world. The AI is taking 2D satellite images and trying to figure out what the buildings would look like in 3D, and it will of course not always get it right. But as long as you fly at a realistic altitude (say above 1000 ft), it looks very real.

There are certain cities where photogrammetry is available, for example New York City, and there the result is astounding. Many famous landmarks and buildings around the world received manual attention, and a number of iconic airports have been handcrafted to look extremely realistic. The Basic Edition contains 30 of those airports, the Deluxe Edition contains 5 additional airports, and finally the Premium Deluxe Edition (which is the one I purchased) contains 10 more airports.

You can change the tail number of the planes, and even change your call-sign used by the Air Traffic Control. You can fly a number of different airplanes and variants of them, everything from Cessna 152 to Boeing 747.  The airliners in the game (Airbus 320Neo, Boeing 747 and Boeing 787 Dreamliner) all come with a company livery, but there are already liveries to download for free, created by the Flight Simulator community. As I write this there are 40 liveries to Airbus A320Neo available for free, including the British Airways one you can see in the screenshot below. Update: a new version was released during the afternoon and evening, while I was still working on this review. There are now 70 liveries, including several for other airplanes in the game. Download it here: https://www.msfsaddons.org/liveries/liveries-megapack-v6

The simulator also includes a store where you can purchase add-ons like additional airplanes, airports and buildings. There were a handful products available already at launch, and I choose to purchase the London Landmark pack, with about 200 buildings for $7.95. If you viewed Buckingham Palace as it appears by default, it looks like an office building, and HMS Belfast, next to Tower Bridge, is flat and appears to be under the water in the original scenery. After installing the add-on, London looks much better.

What about the hardware needed? Surely you need a top-of-the-line computer? Yes, if you want to fly in 4K in Ultra settings (the best quality), you need a top-of-the-line graphics card. But my 4 year old system with an Intel i7-6700K and AMD Radeon RX 580 can play using the high settings, even if certain areas with a lot of buildings gets a low frame rate. Lowering the resolution from 4K would help, as well as setting the quality settings to medium, improves the framerate, but I really like the 4K experience on my 43″ monitor, so I see myself getting a new graphics card in the near future.

 

There are  many details in the game that amazes me. On the airliners you see the heat distortion from the engines, the sun reflects in the aircraft, and when you change the time, the sun, moon and stars move. When the sun moves, you can see the shadows from buildings move. Clouds casts shadows as well.

If you are interested in flying, or if you just want to do virtual sightseeing, Microsoft Flight Simulator is a great piece of software.

 

HCL Volt – A real life use case

Posted on by Posted in AppDev, Domino 11, HCL, Notes/Domino, Programming, Volt, Web Development 3 Comments

The first update to HCL Volt is now available for download. In version 1.0.1 there are a number of improvements, so if you already have Volt installed, get this update from Flexnet. But this post is not about the technical details of Volt. No, it is an example of how I used the product the other day to quickly put together a small application to help with a very specific task.

Last month my wife and I went on a trip to Estes Park in Colorado, where we enjoyed sleeping with open windows, enjoying the fresh cool mountain air. We started talking about getting an RV, to allow us to leave the Texas heat during the summer. My wife started doing some research on different camping trailers, but soon there was too many models, weights, dimensions and features to keep track of easily. I started to create a spreadsheet in Excel to keep track of everything, but a few minutes later I realized I had a much better tool available: HCL Volt.

I started my browser and went to the Volt Application Manager, where I created a new application by importing the Excel spreadsheet I had started on.

Within a few seconds I had the beginning of my application. I added some additional fields, for example to upload images of the floorplans and to store links to the manufacturers webpages with more information.

It took me about 10 minutes to put the whole thing together. I sent my wife the links, and she logged in and started entering data, as she was researching. A little bit later she asked if it would be possible to add some more checkboxes to the list of features I had created. I gave her the access to modify the application, showed her where she needed to go, and she fixed it herself without me having to show her anything. That’s how intuitive Volt is!

We now have a simple but functional tool to record details about any camping trailer we find, and where we can later go back and review the different alternatives.

There is even a built-in summary page where we can see statistics of the different trailers. This is created automatically from the data entered, no code needed. As a matter of fact, I have not written one single line of code in this application.

This is just one example of how you can create a useful application in a few minutes. But don’t take my word for it. Try it yourself for free, no download required!

If you want to get this very affordable add-on product to HCL Domino, contact your HCL Business Partner.