hey my name is Chris and I'm the
developer of Sling code Selene code is
an online application for coding web
apps without using the command line
basically you can make run and share web
apps using sling code and I've tried to
make it friendly for amateur coders and
kids not just people who already know
how to code you can run the app by going
to slinko dotnet and then clicking on
the try it link in the top right hand
corner when you do that you'll see a
list of installed demo web apps when you
first run it these are here is an
example for you to reference the main
part of the sling code interface is this
here the Edit link so when you click
that you can see the source code for an
app and you can change the source code
you can also add files so you can load a
JavaScript CSS file off your hard drive
or an image and you can create them from
scratch as well by typing in the file
name you can reference the files that
you've added from within the other files
inside your browser so in essence it's a
web-based IDE for building client-side
web applications it's similar it's
similar in concept to jsfiddle
or glitch comm or sites like that but
I'd like to talk about the three main
features that set it apart from those
other online IDE type apps so the first
feature is a feature of the it's a
property of Sling code itself if we go
back to swing code net you can see here
that the entire application fits in a
single HTML file so I've designed to be
fiercely independent or what you might
call trust minimized because it doesn't
reply on any trusted third-party server
if you download this HTML file by
right-clicking and saying Save Link As
you'll get a copy in the HTML file on
your local computer and it works
perfectly well self contained in that
format you can also put on a USB stick
or upload it to your own web server the
apps themselves are all stored inside
the browser's local storage on your
device
so they're not actually stored on a
server anyway the domain I've put this
on slinko dotnet it has no back-end
components it's literally just a
back-end static hosting so that's the
first feature is that it's independent
of any online service runs completely
standalone the second feature I think is
important is the live reloading so
whenever you edit code you can see it to
see the changes immediately when you hit
save so if we run this app here now
there's two different ways of running it
you can run it in a new tab or you can
run it in the same tab adjacent so let's
say next to code and you can see over
here the app loading now this the source
code of the app is here and the app is
here it's got a little bit of
functionality a button you can click and
it pops up an alert saying hello you can
see that in the source code here button
on click JavaScript alert hello so now
let's try editing miss codes that says
hello my friend and we hit save and now
when we click the button that change has
been immediately reflected in the live
version we've also changed the content
here
I am alive and you can see that
immediately when I hit ctrl s to save we
get the hello world iona live update
here on this screen you can also change
the CSS so it will take out this
gradient here and just have a single
background color of red and when we can
save and immediately reflects on the
screen so this live reloading is fully
integrated and we can even include a
separate JavaScript file so if we say
create a JavaScript file and we'll call
it test of jeaious this adds a new file
and we'll put the code in here for alert
this is the load and then save that one
and then we'll add that into our HTML
over here
test of jeaious and hit save and you see
immediately it runs that javascript
because it's embedded in the HTML here
and we can change that so that it says
something else some thing else and when
you get saved when you save it
immediately reloads that javascript file
hot loads it into the browser the same
thing happens with CSS files so yeah
there's quite a tight feedback loop
between editing your web code editing
your web apps code and the what's
actually reflected in the in the in the
display window here now you don't have
to have it in an iframe next door to the
code you can also if we stop that one
you can also run it in a new tab and
what's great about this is you can break
if you have two monitors you can break
this tab off and put the second put it
on a second monitor let's just imagine
that this was on a second monitor
somewhere and then you can have your
code on one monitor and your live
updating version on another monitor and
you can do all the same sorts of changes
so let's again change this background
color to red and save that one let's
reload that javascript and you can see
it reflected in this tab that might be
on your other monitor and so this allows
for quite a natural style of interactive
development that people used to with
other editors and command-line tools
except it's all in the browser so both
of these are browser tabs so now the
third feature i'd like to show you
here's the sharing feature and to do
that i'm gonna have to pull up my webcam
because it's how we send this app from
one device to another so give me a
second to pull that up
so now you can see here I've got a sling
code up on my laptop and I've also
loaded it up on my phone's browser so
I've got two copies of it running one on
each device now what I'm gonna do is
take this hello world example I'm going
to clone it I click clone it says cloned
hello world now I'm going to go ahead
and edit the cloned version I'm gonna
change the title to my cool yeah and
obviously I could make other changes as
well so I'll hit save on that I might
actually remove the icon just so that we
get a nice individual cuz I got this
here this gray circle so you can see
that it's a different app now it's
called Michael laughs in the grey circle
you can put other functionality in there
etc so now what we're gonna do to get
the app that I've written on my laptop
let's say I've made a bunch of changes
I've written a cool new app I want to
get it over on to my phone so I'm gonna
say I'm gonna click on this icon here
the the send icon so I click on the
little lower paper plane it pulls up
this send interface now all you really
have to do is in on the phone hit plus
down in the bottom right corner and then
hit receive app and that will open this
interface if you scroll down and say
scan a QR code then it gives you the
opportunity to scan the QR code that's
up in the screen and that's gone too
fast it's actually just immediately
connected and you can see on both
devices it's making the connection and
downloading the app and it's done so now
on my phone it says added one app so I'm
going to close that and I'm gonna say
cancel and you can see my cool apps it's
from my laptop is now transferred over
onto my phone now that's done using a
library called web torrent so it uses
signaling servers which you can edit but
it's basically not tied to any
particular provider or service so I
think that's a pretty cool little
feature in this way you can make your
own little private web apps that you use
maybe you share them with people in your
family or with friends or with workmates
and get them from device to device
without needing to sort of set up any
domain or centralized system so yeah
that's a sling code in a nutshell thanks
very much for listening