By Kimserey Lam on Tuesday, June 14, 2016 — 0 comments

Three ways to manage your resources for WebSharper SPACommunity

Three ways to manage your resources for WebSharper SPA WebSharper official documentation can be found here The doc focus more on how to reference resources for Sitelets so today, I will explain how you can reference your own js and css file and explore the different ways available to make the SPA of your dreams. There are three ways to reference files:
>> Read the full article on
By Kimserey Lam on Tuesday, May 31, 2016 — 0 comments

Transform your WebSharper web app into a Android mobile app with Xamarin.Forms WebViewCommunity

Transform your WebSharper web app into a Android mobile app with Xamarin.Forms WebView With WebSharper, it is easy and quick to build Single Page Applications (SPA) in F#. If you followed my blog, you must have noticed that I regularly post about WebSharper functionalities. Building a SPA using F# is one of the reason why I started to look into WebSharper. It is also the subject of one of the
>> Read the full article on
By Kimserey Lam on Monday, May 23, 2016 — 0 comments

Understand the difference between Direct and Inline attributes in WebSharperCommunity

Understand the difference between Direct and Inline attributes in WebSharper In WebSharper, there are two keywords to bind JS code to our F# code - Direct and Inline. The documentation about the attributes can be found here I have demonstrated the use of it in previous blog posts: External JS library with WebSharper in F# Sort, drag and drop in UI Next
>> Read the full article on
By Kimserey Lam on Friday, May 13, 2016 — 0 comments

Deploy your WebSharper webapp on Azure easilyCommunity

Deploy your WebSharper selfhosted web app on Azure Last week I talked about how to read text from an image using a OCR library. I explained the whole process of creating the web app but I omitted to explain the deployment to Azure. So today I would like to fill this gap by showing you how I deployed the selfhosted web app on Azure. This web app makes use of the WebSharper selfhost template which
>> Read the full article on
By Kimserey Lam on Saturday, May 7, 2016 — 0 comments

Extract text from images in F# - OCR’ing receipts!Community

Extract text from images in F# - OCR’ing receipts!Last week I talked about how I used Deedle to make some basic statistics on my expenses.Using my bank statements, I showed how to categorize, group, sum and sort expenses in order to have a better view on where the money goes.It was helpful but I realised that instead of checking each transaction from the bank statement, it would be better to track individual item purchased. A lot of expense trackers work this way. We need to input every expense[...]
>> Read the full article on
By Adam Granicz on Wednesday, April 6, 2016 — 0 comments

A faster and slicker Try WebSharperCore team

A while ago we rolled out a new UI for Try WebSharper, essentially changing it into a snappy single-page application (SPA). Among others, you can now switch between trying out various snippets and making your own without any noticable delay, no more annoying page refreshes.

Try WebSharper

How to get started

You can check out (= run as is, or edit and re-compile) a whole host of snippets by going to home page and picking one at random, or you can search for any particular one that you like by using the filters on the right. Here, under Libraries you can tick any one of the extensions to search by, or even find snippets by authors.

Logging in

You don't need to sign up or log in to run existing snippets or play with your own, or even to share one, but you will not be able to edit an anonymous snippet, nor will you be able to see all your snippets as a collection that you can manage.

So once you are ready to create snippets for others, you should register and sign in. You can do so from the top menubar:

Logging in

Creating snippets

To create a new snippet, hover over the big orange (+) icon in the bottom right. Clicking it will create a brand new snippet with some default code. Alternatively, you can use the GitHub icon to create a snippet from a Gist.

New snippet

Forking snippets and versioning

You can fork a snippet when you want to edit and make a copy of someone else's. This menu option becomes Update when you are editing your own snippet, use that to save a new copy of it.

Forking snippets

The left and right buttons allow you to flip back and forth in the history of changes to a snippet.

Saving and updating snippets

Once you are ready to save a snippet, you can name it, give it a short description and an optional update note (on subsequent updates to tell your users what changed, for instance).

This is also where you can make your snippet public:

Saving snippets

If you want to show a thumbnail for your snippet, you need to first save it and update it again with the Change snapshot option:

Saving snippets with a thumbnail

Here, you can zoom and pan around to get the right parts into the white box, which will be your new thumbnail. You can also set a timer for when the snapshot should be taken (for instance, 1000 ms after the page load, in the example above), and this comes handy when you have a snippet whose output evolves over time.

Managing your snippets

You can get a list of your own snippets by navigating to My Snippets from either the left charms menu (the hamburger icon) or via your avatar on the top-right.

Charm menu

On My Snippets, you can do all sorts of things to your snippets by clicking the three dots on the top-right corner of each snippet thumbnail.

My Snippets

For instance, you can Tweet it, get a URL to its embedded and direct versions, make it public or private (ON means public), or delete it if you need to.

Operations on a snippet

Have fun using it!

Try WebSharper makes it easy to create and share WebSharper snippets with others. You can use any one of the available WebSharper extensions in your snippets, including those that are premium otherwise, making Try WebSharper an excellent testbed if you are considering subscribing to premium WebSharper tools, which include a variety of client-side data access, visualization and charting libraries, and advanced libraries of UI controls.

I find it a great tool to demo WebSharper at conferences and user groups, and get great feedback about it. One question I regularly get is whether it's possible to create snippets that use RPC functions, essentially, having a server-side as well. The short answer is: not YET. But... keep checking back here for some exciting news about this in the coming weeks.

Happy coding!

By Kimserey Lam on Tuesday, April 5, 2016 — 0 comments

Sort, drag and drop in UI Next with SortableCommunity

Sort, drag and drop in UI Next with SortableFew weeks ago I covered how to use external JS libraries with WebSharper.I explained how we could integrate tagsinput which is a cool library that allows us to use tags in our webapp. It was used with JQuery and I showed you how we could extended WebSharper JQuery and add tagsinput functionalities.Today I will show you how to use another cool JS library - Sortable. Sortable brings drag - drop - sorting functonalities. Also, it does not require JQuery [...]
>> Read the full article on
By Kimserey Lam on Wednesday, March 30, 2016 — 0 comments

Var, View, Lens, ListModel in UI.NextCommunity

Var, View, Lens, ListModel in UI.NextLast week I needed to make a two way binding for a record with nested lists. More precisely, I needed to observe all changes on this record. This changes included normal members but also lists and I needed to observe changes like adding and removing items.It took me a week to come out with a solution where I had to iterate multiple times to get to it. I started with something which was far from ideal then had a conversation on WebSharper forum with Loïc and [...]
>> Read the full article on
By Kimserey Lam on Wednesday, March 23, 2016 — 0 comments

How WebSharper.Warp works behind the sceneCommunity

How WebSharper.Warp works behind the sceneLately I’ve been very happy about how WebSharper.Warp allows me to iterate quickly and without pain. Last week, I covered how we could use WebSharper.Warp to build prototypes quickly. Check it out if you haven’t read it yet. Today, I decided to explore how WebSharper.Warp actually works behind the scene.By looking at how WebSharper.Warp works, we will learn two things:The process of compiling F# to WebSharper using WebSharper.CompilerWhen does the JS fi[...]
>> Read the full article on
By Kimserey Lam on Friday, March 18, 2016 — 0 comments

Prototyping web app made easy with WebSharper WarpCommunity

Prototyping web app made easy with WebSharper WarpScripting quick prototypes in WebSharper can sometimes be troublesome. If for each prototype, a new project has to be created or code needs to be commented/uncommented, it can become quite demotivating as too many steps are required. In F#, .fsx files are a great tool to script disposable code. Write some isolated functions, run on FSI and then forget about it.With WebSharper, it is possible to script a complete sitelets in .fsx files using WebS[...]
>> Read the full article on