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 kimsereyblog.blogspot.com
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 kimsereyblog.blogspot.com
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 kimsereyblog.blogspot.com
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 kimsereyblog.blogspot.com
By Kimserey Lam on Wednesday, March 9, 2016 — 0 comments

Create forms with Websharper.FormsCommunity

Create forms with Websharper.FormsIn my previous posts, I have covered multiple aspects on how WebSharper can be used to make nice webapps by using animations, by tapping into external JS libaries or by using the built in router in UI.Next to make SPA. Today I would like to cover another aspect which is essential for making useful webapps - Forms.Most of the site we visit on a daily basis have forms. WebSharper.Forms is a library fully integrated with the reactive model of UI.Next which brings [...]
>> Read the full article on kimsereyblog.blogspot.com
By Kimserey Lam on Tuesday, March 1, 2016 — 0 comments

Create an animated menu with WebSharper.UI.NextCommunity

Create an animated menu with WebSharper.UI.Next@import 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.2.0/katex.min.css';code{color:#c7254e;background-color:#f9f2f4;border-radius:4px}code,kbd{padding:2px 4px}kbd{color:#fff;background-color:#333;border-radius:3px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}kbd kbd{padding:0;font-size:100%;box-shadow:none}pre{display:block;margin:0 0 10px;word-break:break-all;word-wrap:break-word;color:#333;background-color:#f5f5f5;border:1px solid #ccc;border-rad[...]
>> Read the full article on kimsereyblog.blogspot.com
By Kimserey Lam on Sunday, February 14, 2016 — 0 comments

Improving developer feedback loop in WebSharper.UI.Next with FAKECommunity

Improving developer feedback loop in WebSharper.UI.Next with FAKE@import 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.2.0/katex.min.css';code{color:#c7254e;background-color:#f9f2f4;border-radius:4px}code,kbd{padding:2px 4px}kbd{color:#fff;background-color:#333;border-radius:3px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}kbd kbd{padding:0;font-size:100%;box-shadow:none}pre{display:block;margin:0 0 10px;word-break:break-all;word-wrap:break-word;color:#333;background-color:#f5f5f5;border:1px sol[...]
>> Read the full article on kimsereyblog.blogspot.com
By Kimserey Lam on Sunday, February 7, 2016 — 0 comments

Method chaining for Bootstrap components with WebSharper in F#Community

Method chaining for Bootstrap components with WebSharper in F#@import 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.2.0/katex.min.css';code{color:#c7254e;background-color:#f9f2f4;border-radius:4px}code,kbd{padding:2px 4px}kbd{color:#fff;background-color:#333;border-radius:3px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}kbd kbd{padding:0;font-size:100%;box-shadow:none}pre{display:block;margin:0 0 10px;word-break:break-all;word-wrap:break-word;color:#333;background-color:#f5f5f5;border:1px solid [...]
>> Read the full article on kimsereyblog.blogspot.com
By Kimserey Lam on Saturday, January 30, 2016 — 0 comments

External JS library with WebSharper in F#Community

External JS library with WebSharper in F#@import 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.2.0/katex.min.css';code{color:#c7254e;background-color:#f9f2f4;border-radius:4px}code,kbd{padding:2px 4px}kbd{color:#fff;background-color:#333;border-radius:3px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}kbd kbd{padding:0;font-size:100%;box-shadow:none}pre{display:block;margin:0 0 10px;word-break:break-all;word-wrap:break-word;color:#333;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4p[...]
>> Read the full article on kimsereyblog.blogspot.com