LiveCode

better, faster, stronger

by Arnaud Bouchot on March 19, 2014 7 comments

As Twitter Bootstrap released version 3 of its powerful front-end framework recently, I thought introducing it to those of you that are doing some webdev and haven’t used it yet would be a good idea.

Note : At this point I assume that you speak a bit of HTML and CSS, and that you have already used jQuery for some of your web projects before as the Javascript library of bootstrap requires jQuery.

“I’ve never heard of Twitter bootstrap, what is it” ?

That’s fine… If you have been living on Mars since it released in 2011 or came to web development later on then you have a decent excuse. Bootstrap is a powerful Javascript and CSS framework that allows you to make high standard responsive websites in minutes. Basically this is providing you with all the Javascript and CSS power you will ever need to build a rich UI. Bootstrap has done all the good work to make sure you will not need to worry too much about Cross-Browser Compatibility check, it’s using the last goodness of HTML5 and CSS3 in an advanced fashion. Bootstrap is open source and so well documented that you do not even need to be a Front-End dev genius to come up with something sexy. I have forgot to mention that Bootstrap has been created by two talented Twitter Developers and that now huge names of the web are using it, like Mailchimp for example. I promise, In less than 10 mins you’ll be all setup to use it.

Let’s get setup then

Download Bootstrap Framework here : https://github.com/twbs/bootstrap/releases/downoload/v3.1.1/bootstrap-3.1.1-dist.zip

Now create a “tutorial” folder and unzip the compressed folder into “tutorial” to see the structure of (the compiled) Bootstrap. You’ll see something like this:

tutorial
├──
   bootstrap/
   ├── css/
   │   ├── bootstrap.css
   │   ├── bootstrap.min.css
   │   ├── bootstrap-theme.css
   │   └── bootstrap-theme.min.css
   ├── js/
   │   ├── bootstrap.js
   │   └── bootstrap.min.js
   └── fonts/
       ├── glyphicons-halflings-regular.eot
       ├── glyphicons-halflings-regular.svg
       ├── glyphicons-halflings-regular.ttf
       └── glyphicons-halflings-regular.woff

What we have here is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. In the example above we will be requiring the minified versions of the CSS and Javascript, the glyphicons files in the fonts folder have been implemented in version 3 to provide a built in icons library, you can preview these icons here : http://getbootstrap.com/components/ we also need jQuery as the bootstrap Javascript requires it.

Let’s build that page now!

Create an index.html file in the root of “tutorial” folder and paste the following code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Jumbotron Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <!-- <link href="jumbotron.css" rel="stylesheet"> -->
  </head>

  <body>

    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
          <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </div>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a></p>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Heading 1</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Heading 2</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
       </div>
        <div class="col-md-4">
          <h2>Heading 3</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>

      <hr>

      <footer>
        <p>&copy; Company 2014</p>
      </footer>
    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Note I have been taking this html from the examples they provide here : http://getbootstrap.com/getting-started/#examples

we have been including 3 files – the bootstrap CSS between <head></head>

<link href="css/bootstrap.min.css" rel="stylesheet">

– jQuery from the google apis server and bootstrap javascript from our framework just before closing the </body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Let’s tweak it.

according to this awesome documentation : http://getbootstrap.com/components

We could change the appearance of the top navbar so it would stand up better from the banner that’s above. We can do this by replacing the css class “navbar-default” with “navbar-inverse” in the “navbar” container div tag, the colors we had in the navbar will be inverted. The nav bar container is :

<div class="navbar navbar-default navbar-fixed-top" role="navigation">

So replace the line above with :

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

Now let’s add more links into the nav bar, Replace :

<div class="navbar-collapse collapse">

with :

<div class="navbar-collapse collapse">
     <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>

Note: the code we have added here has to be contained within the div having the class “navbar-collapse”, so the menu items are correctly positionned when you are viewing the page on a mobile, or reducing the viewport.

Let’s add a little fancy icon before Heading 1 Replace:

<h2>Heading 1</h2>

With:

<h2><span class="glyphicon glyphicon-thumbs-up"></span> Heading 1</h2>

You can continue to play adding/tweaking components using the doc here: http://getbootstrap.com/components

Once you have a precise project in mind you will very likely need to change the layout of your pages to design a blog, a store or simple content etc; At this point you will need to get familiar with building within the Bootstrap grid system, organising your content into column and rows that will automatically stack depending on the size of the screen. You will find all you need about the bootstrap grid system here : http://getbootstrap.com/css/

You could also build you own customised framework, bring your branding, colors and select the javascript you need if you do not need the whole bunch of functionalities included in the default framework : http://getbootstrap.com/customize/

This was a quick introduction and I hope that you already realize how much time you could save using this framework.

LiveCode Server and Bootstrap are including the same approach to better, faster, stronger. Spend less time doing more using a short and clean syntax. I believe it is a very good idea to use bootstrap along with your Livecode Server Web Projects, building a stunning responsive website, or simply giving a nice and tidy documentation for your last LiveCode Mobile App.

Hi-speed HiDPI

by Mark Waddingham on March 18, 2014 2 comments

With 6.6 almost out of the door (we released 6.6. RC 2 today, for those yet to check) we’ve finally added support for new Retina displays to Mac Desktop. This support means that LiveCode apps will look as crisp as other Mac apps on modern Mac laptops with virtually no work at all (you might need to add some @2x images, but that’s about it). However, this crispness does come at a cost…

LiveCode’s graphics rendering is inherently CPU-bound (for the moment at least). This means that every pixel you see in a window is being generated by operations performed on the machine’s CPU with the GPU only being involved at the Window Server end when its compositing the display. Whilst this approach means that we can deliver a much richer set of graphics primitives and effects than the host OS can manage, it does mean that Retina has a huge cost – a four-fold cost in fact (Retina displays are double the density in both directions, so that means for every single pixel rendered on a non-Retina display, there will be four pixels rendered on a Retina display).

Now, whilst CPU speed hasn’t suddenly jumped 4 four-fold in the same time as pixel counts have, one thing has jumped considerably – the number of cores our CPUs have. Indeed, all Retina MacBook’s have at two cores with each core able to run two threads concurrently. Within this fact lies a potential short-term solution to speeding up display on Retina systems…

The solution I’ve been experimenting with is to split the rendering of a stack up into 4 tiles with a separate thread responsible for rendering each tile. The engine keeps a pool of four threads around on which it schedules this work – as soon as one thread is complete, the main thread takes its work and sends it to the appropriate quadrant of the window buffer (ideally the individual threads would do this last part as well to eliminate the inherent bottleneck this creates, however for the APIs the engine currently uses for window updates this isn’t possible).

In an ideal world you’d hope to get a 4x speed up to rendering but due to the reality of overhead in the approach this is purely a theoretical limit. However, that being said, my current experiments indicate that around a two-fold increase in rendering speed should be attainable for large and reasonably graphically complex stacks (lots of bitmap effects and gradients) which should certainly help to mitigate jump from normal to Retina resolution.

Of course, this approach isn’t limited to Retina displays, the same idea can be applied to any computer with a multi-core CPU – there you could see up to a two-fold increase in rendering speed which is nothing to be sniffed at!

For C-source-level-interested parties, the code for the experiments I’ve been running can be found on the feature-threaded_rendering in my github repo (https://github.com/runrevmark/livecode.git). The code is Mac-only for now (search for MacStackTile in osxstack.cpp), and there’s a few hacks here and there to ensure thread-safety (patterns are disabled and there’s a global lock around text rendering) but it’s certainly showing promise…

The Coder Model

by JoJo Hernandez on March 17, 2014 3 comments

For those of you that don’t know me, I am RunRev’s “Accounts Team”.. for those of you that do, you are also aware of my love of Fashion (and *really* High Heeled Shoes!) So it will come as no surprise to know my Blog Post was inspired by the fashion Industry. In particular a Model – Lyndsey Scott.

Lyndsey is a very successful Model. So successful in fact, she has worked with Prada, Gucci & Calvin Klein and is even one of the Victoria’s Secrets Models. All of this is clearly very interesting to me, however, why is it to you? Well, Lyndsey is a Coder too. The self proclaimed ‘nerd’ has written several apps, including iPort – an app that allows models to upload their ‘book,’ or portfolio onto an iPad.

Ms Scott is also a mentor at Girls Who Code, an organisation that helps teenage girls learn programming. She recently talked to the BBC about challenging people’s preconceptions about beauty as well as taking on stereotypes about women in technology.

“There are some people who maybe do programming and other things who maybe don’t get the attention they deserve, as they are not Victoria’s Secrets Models”.

It’s always interesting to me to see other people’s reactions to the ‘Geek World’ of the Software Industry. I work in it and many of my friends are shocked when they find out what I do.. and more specifically what LiveCode does and can do.

So I applaud Lyndsey Scott on behalf of the Software Industry, for admitting her own self-geekness and standing out to ask “Why shouldn’t everybody Code?”. Why indeed!

To see the Interview: http://www.bbc.co.uk/news/magazine-26473950

7.0 Alchemy

by Sébastien Nouat on March 14, 2014 1 comment

This longed-for day of the 7.0 engine, stable release is coming soon; some of my colleagues have already described before me the most appealing feature linked to this new version is the handling of Unicode characters. But that’s not all: allowing a flow so different from plain text to run through the engine resulted in touching so many parts of it that a deep refactoring has been executed.

In the 7.0 developers team, we’ve been fighting for almost a year the massive beast that renewing the whole engine was, and it’s now more than ever tamed and keen to act as expected.
All this process involved the use of artful alchemy; starting from a closed-mind golem, we had to move and refashion almost every single stone he was made of, and to rearrange all the cogs linking those moving parts to keep the communication between them going in the same way. This included giving a new shape to his brain; and he now has the ability to learn more easily a new knowledge or update independently what he already has, thus making the addition of a new feature a simpler way to go.

Now that the final shape of the new engine is finished, the only thing separating the community from the first stable release is the cogs correctness. All these parts relocations and updates let a little play come in few mechanisms interaction, and the huge amount of changes makes the tracking of those tiny errors way easier with your help: given the symptoms, it’s always possible for us to find the issue and bring the engine closer to the perfection aimed.

The best point in all of this is not that our creature can now handle Unicode: it’s more about all the advantages the community’s applications will be able to gain from it!

10 things you didnt know about LiveCode…well maybe.

by Steven Crighton on March 12, 2014 2 comments

Hi, I’m Steven. When I decided to write this blog post, I started to think … what can I write about? I had a browse through the great blog posts that came before me and It appeared obvious, you love the tech talk.

Being in Digital Marketing, what could I offer you in terms of tech talk that rivals what our incredible development team are talking about? It was at this point I got smart. My marketing genius shone through!

I challenged the dev team to come up with 10 things that they think are very useful in LiveCode but most users might not know about it.

A tricky challenge, considering that the experts in our community can likely show us a thing or two on how to use the LiveCode product, but the challenge was accepted.

Did I get 10 things from the team? Sure. Did I get 10 things that things that you don’t know about LiveCode? I guess that’s up to all of you, from beginners to experts, to let me know in the comments.

A Day in the Frontline. How important is Customer Support?

by Neil Roger on March 11, 2014 No comments

When the time comes to buying a new product, I have always felt that great customer support is key when making your decision.

Imagine the situation of being lumped with a $500 dent in your wallet (or purse) just because you don’t know how to get started. It wouldn’t make you feel particularly great would it? This type of situation can also apply to users, who are more familiar with your product and are considering a purchase.

Knowing that they have access to a basic level of support, with the option of upgrading to a something more tailored, gives them the confidence and final push they need to help them part with their hard earned money.

So what makes good customer support?

Receiving an answer to your question is a good start but its the personal touch that makes customers really appreciate your service. There is nothing better than creating a rapport with a customer and getting to know them on a more personal level. When a customer responds with “its great to hear from you again Neil” it really does make make the job worthwhile. (Receiving thank you chocolates is also a bonus) although my wife would probably tell me I don’t need them.

Our users are at the heart of LiveCode and we would not be here without them. I personally strive to ensure that I am consistently providing the best customer service possible and will always respond to every query I receive, no matter how big or small it may be. Whether it be someone starting out looking for some advice, to a pro support user with an intensive stack related question, our support channels are always there to be used and we will do our best to help. I like to encourage users to feel comfortable and confident to approach me, which I think is key to a successful Customer Service experience.

There are various avenues available for receiving support with LiveCode, with your first point of contact generally being support@runrev.com. Depending on your request, we will try to point you in the right direction and help you as much as possible. If you require more involved support (e.g. intense stack/scripting) then we will mention the various support packages that we have which will allow us to assist you. No matter how many questions you need to ask we will support you all the way until you find the resolution you need.

Along with this direct support path, we also have our more community based support in the form forums which can be found here: http://forums.runrev.com

The other Support systems we provide are also fantastic resources filled with second to none content, the additional links to these can be found at the end of this blog so please feel free to have a good look.

We have a very active and outstanding community who are always willing to share their wealth of knowledge. The Forums, Stackoverflow and Lists are also actively managed by the RunRev staff, which is fantastic as it allows them to input their vast amounts of knowledge regularly, therefore allowing support to be available on a more regular and faster pace.

I hope this has given you some insight into support RunRev and if you by chance require some LiveCode related help in the future, please do not be afraid to ask. (we don’t bite).

Link information: Stackoverflow LiveCode Use List

In-App Purchasing for Amazon and Samsung App Stores

by Panagiotis Merakos on March 10, 2014 2 comments

During the last 2.5 months I have been working on extending in-app purchasing (IAP) feature to apps distributed through Amazon Appstore and Samsung Apps Store. I am excited to work on such a ‘hot’ topic. A quick introduction :

What is in-app purchasing?

With in-app purchasing you can sell digital goods (lives/bullets/extra levels to a game, access to a service etc) from within your app.

Why to use IAP in my app?

There are various ways to make money from your app. All of them fall into one of the following three categories:

Charge users for downloading your app (paid model)
Offer your app for free and charge for additional/premium features (free with IAP)
Charge for both the app and additional features (paid with IAP)

It seems that the “freemium” (i.e. free app with IAP) business model is proved to be the most profitable with the largest revenue shares :

source : Distimo Publication – February 2014

What will change in the existing Livecode API for in-app purchasing?

The Livecode engine currently supports in-app purchasing for apps distributed through the Google Play Store (formerly Android Market), as well as the Apple AppStore. This support will now be extended so that apps distributed through other avenues (the Amazon & Samsung app stores) can make use of the in-app purchase features provided. For this reason, new LiveCode commands, functions and messages will be added. However, all of the existing (IAP-related) commands and functions will still be supported (for Google Play Store and Apple AppStore).

Why is this important?

From the developer’s point of view, being able to distribute a freemium app from multiple channels, means higher revenue. Moreover, they do not have to worry about how each store-specific IAP API works, since the same code will work across all stores. All they have to do is just select the store in the Standalone Application Settings for the app, and then the LiveCode IAP API will “behind the scenes” communicate with each store-specific IAP API, depending on which store the developer has selected to distribute the app through.

IAP APIs for Samsung, Amazon and Google

The new LiveCode IAP API will allow the user to query for specific product information (such as price, description etc) before they make a purchase, and will support purchasing of subscription items for all available stores.

I will keep you posted on the progress of the project, so stay tuned!

Diverging and Merging

by Ali Lloyd on March 7, 2014 No comments

As you probably already know we are getting close to the first developer preview of the Unicode-compatible LiveCode 7. It’s very exciting for me personally, as I have been working on this in one way or another since I started here in November 2012. I knew there was a lot to do, but suffice it to say that at the time I didn’t realise quite how much! In many ways it has been the perfect introduction to the LiveCode engine for me – a not-so-whistlestop tour around all the areas touched on by the refactoring project, which is to say almost all of it.

One of the challenges of maintaining the refactored engine is keeping it up to date, by continually merging in new bug fixes and features. It can already be a little tricky to resolve merge conflicts when so much of the engine has changed, but in many cases code has been moved from its original location to a new file. Sometimes this can result in code getting merged automatically into blocks of code that are no laonger executed, so we’ve had to come up with a system to ensure than any updates which land in the old location are flagged up.

Challenged by Ben to come up with a name for this system, I opted for syntax caravan- the idea being that the syntax branch is diverging from the main branch (going on holiday), but needs to keep being updated on what the main branch is doing (needs to bring the main branch in a caravan). Ok it doesn’t quite work as an analogy, but I was thinking fast and I was asked to be cryptic! It’s a bit snappier than ‘the occasional telephone call from master to tell syntax what it is up to’.

Here is a screenshot of the tool written by Seb which shows the syntax caravan in action:

click image for full size preview

You can see that the usePixelScaling property, and a change to the pixelScale property, have been happily merged by Git. Unfortunately the active version of that code now resides in a completely different file. Thanks to the syntax caravan we can ensure that none of these things get lost in the merge. It shouldn’t be too long now before the syntax branch comes home, and we can put the caravan away for good. Or at least until the next engine overhaul…

better, faster, stronger

“I’ve never heard of Twitter bootstrap, what is it” ?

Let’s get setup then

Let’s build that page now!

Let’s tweak it.

Hi-speed HiDPI

The Coder Model

7.0 Alchemy

10 things you didnt know about LiveCode…well maybe.

A Day in the Frontline. How important is Customer Support?

So what makes good customer support?

In-App Purchasing for Amazon and Samsung App Stores

What is in-app purchasing?

Why to use IAP in my app?

What will change in the existing Livecode API for in-app purchasing?

Why is this important?

Diverging and Merging

Recent Posts

Recent Comments

Looking for LiveCode FileMaker?

“I’ve never heard of Twitter bootstrap, what is it” ?

Let’s get setup then

Let’s build that page now!

Let’s tweak it.

So what makes good customer support?

What is in-app purchasing?

Why to use IAP in my app?

What will change in the existing Livecode API for in-app purchasing?

Why is this important?

Recent Posts

Recent Comments

Tags