Thank you So I'm not going to talk a whole lot about what this is Except to say it's a way that you can write web front-ends in the house and How awesome is that? It uses a library called reflex, which is an FRP or functional reactive programming library And I'll just leave it at that Hopefully you'll I'm gonna pretty much just live code something here so we can inject As much as much requests as you want and we can go as long or as little as you want So the interesting thing about this is it is using a little web app that I wrote called H snippet and Is currently being hosted by obsidian systems?  I Also sort of intended a snippet to be like a nice web app template that uses snap and reflex and love sockets and servants But I haven't gotten it to that point yet It's on the way. So if you are interested in looking at the code to a snippet you can find it on github at my github page and See how to see some of the code there but so Let's be creed the phone size. Yes, I can We're trying to build a web page. So what's the simplest possible thing we can build? What just happened? We a snippet took this Concatenated in it with like some import statements and a main Into a Haskell file it compiled that Haskell file with GHC JS GHC JS resulted in a JavaScript file as an output Let's send the jazz file back Injected it right here in In the browser and if we want to look at the build messages, we can see them here If we want to have like a little a little error We can see an error Not scope TX So the documentation so reflex is an FRP library This is reflex documentation right here and then a reflex dash DOM is the name of the library that is the like web interface That's based on a reflex So most of the stuff that I'm doing here in this presentation is going to be coming from the reflex DOM library and I'll try to Actually make it seem like I don't know what functions to use and we can look them up here for the fun of it in in the API So okay, we have we have a simple text hello world We run that again. We can see it. What's the next thing we want to do? Well, let's just add like an h1 around it and make it a title How do we do that? Well, if we go back here to reflex DOM documentation Here's the reflex DOM page If we go to reflex DOM widget basic It's where most of these Sorry, we're most of these functions live and if we just scroll through here here We can see the text function. We just used it's basically a function string whoops String to an L And if we keep on looking down here further We'll pass some miscellaneous stuff. Aha for an element This takes a string and it takes another M thing So what we can do is we can say l h1 dollar sign Does that make sense? Or instead of using the dollar sign I could use parentheses But I'm going to use the dollar sign for purposes that we'll be telling you later Hello world in h1 tag Okay, that's Now we now we can see how to start building up a top. You can basically You do this we could say L Diff text by so GACJS is Bit slow But it well and more than makes up for as slow as with things you can do with it Okay, so okay, so now we can see here that this monad that we're in the do notation is basically Equivalent to ordering stuff in your dog This is what like your writing html Now let's do something a little bit more interesting Let's create This is a button. We have to give the string and it gives us back an M event Let's just try this Let's say button You can click it, but it doesn't do anything The reason it doesn't do anything is because we're not doing anything with the event that came back from the button So let's capture this event and Then let's go to Over here to reflex There's a nice little function called Over you can I was I was hoping for a nice hot here we go Count is is a it takes an event of anything and Returns us a dynamic B where B is enough. So now let's say Count E. What does this do? We gave it an event and it gives us a dynamic Now we need to display it. We need to say We need to look for something that takes a dynamic Dine text it takes a dynamic and it doesn't do anything which kind of means it probably displays it in the dog But it takes a dynamic string So we're gonna have to do Dine text this isn't quite right Because it needs a dynamic string and count gives us a dynamic. No So we have to call a function Actually The count function is also romantic So we need to blind this to map dying Very good question that is a super frequently asked question dynamic is not an applicative functor right now for performance reasons because it does some sharing of results going on and and Right is very very concerned about making sure that Everything is is performant enough to be usable in production applications. So he knows That it should be it should be feasible to make it an applicative functor But he just hasn't had the time to actually do it yet. So at some point something like the graph-refined library. I don't know The underlying implementation for reflex is really airy. So I would guess maybe no, but I'm not sure Okay, our error here we couldn't do show. Oh, right because it was a type of no so if we add show int Just for a really simple way of getting getting ourselves a type type invitation if this should And now it can't start clicks. Does this make sense to everybody? So that time is kind of the key thing here. There are events are funters And there's another thing called behaviors, which are also funters a dynamic is really basically a combination of an event and a behavior Behavior is something that you can look at at any point in time And you can say what is this thing and it will it will tell you what what this current value is Event is something that happens at some like discrete point in time or a stream of things that happen at discrete points in time so events kind of are push-driven and behaviors are kind of pull-driven a dynamic is You can think of it as kind of a combination of an event and a behavior it is Pull-driven because I have that behavior in there So you can look at its value anytime you want, but it also contains an event Which tells you whatever the dynamic gets updated. It's like a sample Right if you are provided with the ability to get an event of all its updates and you are provided with the ability to get its current value at any time If you wanted to write count yourself you would take the integral of the form of which Increases by one and then you can sample it by the underlying Let's let's write it. Let's do that right now instead of count let's say Let's see we're gonna do a full dive. So let's go look here fold died it has this type signature It takes an accumulator function an initial value and an event of a's which are the updates So we'll say full time plus one Zero BV plus one is a function BV Yes So this is probably exactly what that is under the hood Interesting Yeah, yeah, I wonder if there's a reason he's using this particular implementation instead of the one we just did I don't know But we can we can see how this thing is implemented Here he's So hold died there's kind of two combinators that let you construct dynamics hold dying and fold die hold dying takes an initial value and then a stream of events of new values Hold dying is what we just looked at Yeah, well, it's implemented with these lower level terms But let's just get back to something a little bit more more interesting here Let's do a text input So over here, there's another module reflex dog widget input which contains most of the input elements And here we have text input and it takes a config and it gives us back a text input So Ti what do you know we have a text input? Okay, that's um now. Let's do this Well, the dime text Now let's go back to this text input It has something called text input value, which is a type dynamic string so this is kind of the definitive value of whatever is in the text input and I I also happen to know that we can Use just the simple a list value To get at it Every time We update anything in the text area It's immediately reflected in that text, but now so my rough outline for this talk is to create a little Twitter time Right, so we can we can change this to be tweet And we can call this h Twitter Now We want whatever the button is we don't want this dynamic text to be updated all the time We want it to be updated only when the button is clicked Now if we go back and look In this file There's a function that does exactly that and it's called tag die It takes a dynamic in the event of B and it gives you back an event a which is whatever the dynamic was At the time that this be event fire. So the be is just completely discarded So we can say instead of value. This is a dynamic Value ti is a dynamic. We can say tag die It's not a monadic function. It's pure Oh Right no tweet yet. That's our initial value. Well, what happens if we want to not just oh, let's let's do something again So now we're always getting the last the last thing What happens if we want to have a whole list of all of our past, okay Oh Well, we'll take the cheesy way out Let's do that with me there We're simply wrapping it now we have to so this is gonna be a dying text because we're calling Matt dying and So the the argument to Matt dying. Let's go look at it It's like that map, right So it's a to be So this thing is a dynamic list Let's let's go to types in the chair on it just so it's clear We may have to take that off. I don't know scope type variable But we'll just leave it there for now. So when we're Matt dying over tweet, it's gonna take a function. Let's let's do list of string to question mark, right You have type post there Yeah I know yes, so he's Thoughtfully picked a trickier thing to do and it's tricky because this thing needs at least the way that the way that I am To worry was solving it in a reflex. You're gonna use a higher order FRP Which is something that not all FRP systems have L by belief is a particularly Like popular today FRP system that does not have a higher order FRP Matt dying Expects a pure value, but we're gonna give it a dynamic, right? Or we're gonna give it a monadic value because we're gonna take text is an M a unit and L also is an M unit So we're we're map dining and we're gonna get back an M unit The way to handle this is with a function called Well, actually there's two there's there's this function called dying and this function called widget hold Dying is more like the type signature. We need it takes a dynamic MA and just gives us back an M with the event Let's try using let's try using time because it's a little bit more straightforward So this is a list of a list of strings so for every string in here we want to map This function over it This will give us a list and then we're gonna need to can cap the list So let's go here to dynamic and search for what do you know and we can cat dying Let's see if this does what we want. We have a list of dynamics and it gives us just a dynamic back Assuming that they form a monoid. Yes Oh Right Dying operator is actually not the one that I usually use I usually use widget hold and The reason the widget hold is kind of nice because it's structured very similarly to hold dying Hold dying takes an initial value and an event and gives you back a dynamic and this thing takes an initial widget and an event of new widgets and Gives you back a dynamic of the value that the widget returns So this is the pattern that I usually find myself using in applications But they're both here and they're both usable Any questions I don't know about canvas SVG. I know is I believe there is There may be For SVG support you need namespaces, so so there is namespace support I know that we we recently got the ability to do SVG. Oh, I'll show you just a little eye candy Example and familiar with the Haskell diagrams package We can build the diagrams all of diagrams diagrams if you don't know is a pretty substantial package for doing Doing diagrams and kind of graphics and it lets you do some really cool things with a really small amount of code And it's got a whole bunch of high-level math going on under the hood and We're compiling all of that into JavaScript in order to render this picture right here, and then we've made it dynamic And attached a little slider that can change the order of the Hilbert diagram so the reason this is slow is because It's JavaScript code redrawing this whole entire Hilbert curve And it's okay when it's fat or when it's a small order But when you get up here to the end it takes a little bit longer But this is just I think a really a really nice cool example of So some ways you can pull together different pieces and create create some really cool things so It is Pretty much the fastest way that you can start playing with reflex today Actually building your own reflex applications. It's a little bit a little bit more work. Ryan has a repository called reflex platform that has a really nice getting started Thing and the read me here goes through a lot of things basically you clone it You see me and you run this try reflex script, and it will install everything that needs to be installed it may take a little while because it it uses the mix package manager to get all the dependencies and Most of the time they're cached. So it's just a download that it had typically And this this is a nice little on-ramp to getting started with your own project But that takes more more than just five minutes Each snippet you can play around with reflex right now any other questions


Thank you Emma J. Are you going to put up my presentation or shall I have a go? Yep, I'm just doing it right this second. Brilliant, thank you. Hello everyone. Some great heartening talks we've experienced over the last couple of days on open source approaches, accessibility, wellbeing, feminism to name a few. Maybe to help out our, to Emma J. If you've got any questions, maybe prefix them with a Q in the chat. Makes it easier to spot them. Anyway, so I'm Tim Franson, a technical tutor in web publishing and design at London South Bank University, involved in teaching and research activities focused on software, hardware and systems associated with web and print based design and production. In this session I'll touch upon some of the initial thinking behind establishing an online social learning space, highlight the assemblage of mainly open source communication tools employed, quickly run through some examples of how I use the space to deliver sessions on web and graphic design to a range of undergraduate and postgraduate students as well as examples of variants of the platform which enabled cancelled educational events and research activities to take place online. I've also set up a demo for you to have an explore as well as there'll be an opportunity to have a personalised version to use over the next academic year. And if we have time we'll do a sort of collective mapping exercise using the demo to list the teaching tools and platforms we've used since lockdown. So in the weeks preceding lockdown, in the well in the week preceding lockdown, in response to the shift from mainly in-person instruction to exclusively distant learning, I rapidly established a low cost, almost no cost, licence free online social learning space to maintain formal and informal student-centred collaborative learning. So what is a social learning space? So following Ray Oldenburg's idea of third places in the excellent book The Great Good Place from the late 80s, one general definition for social learning spaces might be a virtual area that is not predominantly identified with either home or study perspectives but transcends both and facilitates formal and informal student-centred collaborative learning. An open space that combines opportunities for social activities as well as learning enabled by technology. The initial aim was to facilitate connectedness and provide continuity for my students in a time of isolation and uncertainty by bringing together several communication technologies into one coherent online platform. Attempting to approximate previous synchronous bricks and mortar interactions and experiences as well as encourage asynchronous and cross-course learning opportunities. So what I did was just create one classroom and invited my students from varying courses to join me for periods of synchronous teaching and then I would let the room be open and the students from different courses could use it as they felt fit. Additionally, I was aiming to provide an alternative to the tech giants and commercial platforms such as Blackboard that have colonised the university's communications infrastructure which has been further entrenched during the COVID-19 crisis. As a preliminary introduction to this issue and what is at stake, I recommend watching Rectangles RS, a brilliant presentation in which Dr Seder Gussis highlights the main issues that have emerged in the current sort of turn to didactics at a distance. I'll provide a YouTube link at the end later. Notably, the social learning space was developed on an autonomous server on a green web hosting service which I manage for learning and teaching purposes and requires only intermediate skills to set up a short-course idea, I think, for the future on how to actually do this. The main open-source communication technologies initially used were Jitsi Meet, Etherpad, Mural and WordPress which enabled video conferencing as well as textural and visual collaborations. Jitsi Meet, if you don't know, is an open-source video conferencing solution including a screen-sharing, recording, streaming, hand-raising and integrated chat features. Etherpad is an open-source collaborative text tool allowing people to simultaneously edit a text document in real time. There was also a chat box in the sidebar to allow sort of meta communication. Mural is a flexible and free for students and lecturers. Has been for, since it was a start-up in 2012, digital workspace for visual collaboration, brainstorming, cosign, problem-solving, storytelling, et cetera. WordPress is an open-source web publishing platform used to integrate the above tools into one coherent location. So here's a screenshot of an early iteration of the social learning space used to host an online learning and teaching exchange at London South Bank University. This example is built like they all are on WordPress with two separate tabs to access Jitsi Meet. So here are some of my colleagues on the left-hand side and on the right-hand side a sort of access to a neural digital workspace. What you might notice, the devil's in the detail. One side says that these were two different sites. One was on the left was the sort of demo and on the on the right was one for a colleague. So I create personalised versions for several colleagues to trial in their respective teaching contexts. So here's another example. So along with Jitsi Meet and Mural, I introduced Etherpad as a third tool and following the user sort of feedback stacked the tools accordingly. So I'm going to just use the chunky hand here. So we've got Jitsi Meet here. We've got Etherpad here and we've got Mural here. And on the right-hand side, just the screenshot of the sharing the screen to the students. So Jitsi Meet was used for screen sharing to show software features and processes for students to share their and students share their screens for advice from myself and or the group. Everyone has the same privileges and house rules decided collectively, i.e. Microsoft were not speaking, video off or quality set to low definition for environmental reasons, i.e. more data, more carbon pollution. I'll share an infographic on that at the end also. Everyone can stop and start recordings. So the Etherpad on this example was used just for the register and for sharing hyperlinks and Mural for students to share their work and enable a subsequent crit. So another example, so the layout similar and this was with creative writing students who were producing an online literary magazine called the South Bank Review. What we see here is that this is the home page and this and what we've got again, Jitsi Meet for video audio conversations, Etherpad users for sharing links, creating a website site map and working out the spine which ended up being one class, one mission, one enemy, the graduates of 2020 versus COVID-19. Mural for students was used to design sort of layouts in a rough way which were collectively and was then produced using HTML and CSS on the main site. So this is the workings out and this is the end result with all the students stacked up. Okay, so let's just move on. So this is the Centre for the Study of Networked Image Conversations Patch Plan, so another iteration for this particular research centre based in the School of Arts and Creative Industries at South Bank. It brings together researchers from cultural studies, contemporary arts and media practice and computing who seek knowledge and understanding of how network cultures transform the production and circulation of images. The research centre had three events planned for May, June and July, so a version was built following the visual style of CSNI's main site. So the participant feedback throughout has been integral to shaping the user interface and experience for example. So we've got here two buttons which enable you to open up the etherpad which is also here and the mural if you want. So what was identified, some users had dual screens so this allows them to arrange the set however they may like as and then also for other users the stacking solution was the most suitable. So and also embedded was a feedback survey at the end of each event similar to how blackboard has it at the end of these events for this particular conference. So the questions are straightforward. Please rate your experience using the conversations platform today ranging from very poor to excellent and please explain why you selected the above rating and share any other information about your experience today. So just move on. So some of the results of the feedback say here that particular this hot-back one this particular tool is something called Crowd Signal and it's a sister company to WordPress and we have a simple results here. The user experience was never poor or very poor which was heartening to know and we even had one excellent. Also feedback via just conversations in the jitsi meet chat so these two provide sort of two extremes one was thanks to him it was a great assemblage of tools whereas at a conference this was a using Zoom all the different tools makes me feel very anxious and that was from a colleague at a learning and teaching conference that we had in arts and creative industries. So it was to be sort of reassuring to people who don't you don't have to use everything on offer and we can work out what best suits and provide support it could be simply jitsi meet might be perfect for the job. I'm also mindful that the project was born from my own needs and so teaching needs in the platform folds directly back into my teaching practice i.e. a student might want to know how to integrate video conferencing in a web project it was discussions about open source and proprietary software green hosting etc etc I'll also be applying Charlotte Webbs from her talk Feminist Design Tool to the development mix as well which is a great takeaway for me from this conference So here's a fourth example so I'm a board member and web designer for the International Journal of Motorcycle Studies IGMS for short an online scholarly publication dedicated to the study and discussion of motorcycle culture in all its forms from the experience of riding and racing to the history of the machine the riders and design to the images of motorcycling and motorcyclists in film advertising and literature a decision to cancel the annual conference was made and in May we announced a call for memories as part of a celebration of 15 years of the journal and 20 years of motorcycle studies we've been using mural for the timeline wall and here is a little video that explains to a visitor how to use the mural tool to add some content a couple of minutes long and also a more conventional submission form for submitting files or memories and on the right hand side so the time wall became a catalyst for conversations at an online cocktail party at the newly created IGMS CAF which was held on the 26th of July so jitzy meat is used here we had an ether pad here for typing stuff up and we introduced some breakout rooms where we had lots of people and so just here's a screenshot and detail of the call for memories timeline wall taken about a month ago and is still open and growing and we'll hop along one more some additional tools I'll just sort of flag up which I'm introducing to the space one is called xceli draw which sort of emerged in early 2020 is an open source collaborative whiteboard tool that lets you easily sketch co-sketch diagrams with a hand drawn feel this one was flagged by one of my students and it's a rather nice drawing tool padlet which I've seen used during the conference is another versatile digital pin board supporting almost every file types the free version allows you to make three padlets before you need to upgrade to a monthly or yearly subscription and your world of text is an open source infinite grid of text editable by any visitor the changes made by other people appear on screen in real time so hopefully we've got time to have a little go at that this was highlighted at a day of discussion and hands on thinking on the politics of infrastructure and tools the digital aesthetic research centre at Arhus University in Denmark just on Monday gone it's quite a great tool I'm doing a similar presentation to this actually fun enough at the British University in Egypt next week about teaching creative writing online so I think I'll be introducing this tool for a session on collaborative concrete poetry so that sort of idea of the arrangement of text and typographical effects conveying meaning as well as the words so final example another platform developed for crowds a research project exploring networked and social distanced crowds as a rapidly evolving new public condition the visual style evocative of the crowds movement using this at the top here in the mast head of the site using a particles javascript library an embedded padlet uses a repository for resources on the homepage and principal investigator Simon and myself having a chat and a laugh about developing the platforms that's jitsi meter again so just going to pop in the chat a link to access this particular because I believe you can't click on to the hyperlink so I'm going to pop that in and the password hold your horses a second what you'll see when you type in the password which is sls2020 to make it easy you'll see a demo for the alts summer summits we're not going to be using the jitsi meat or the etherpad or the scaladrol or the two pin boards we're just going to go for the middle one and so people could log in and click on this your world of text I'm going to do the same with my screen so you should be experiencing something like this and going to click on the second writing one and with any luck it's taking a few moments my internet connection is a little bit rubbish but I'm seeing some people you could list some of the key communication tools and platforms you've used for learning and teaching since lockdown we can do that for maybe just a minute or so and then I'll wrap things up if the moderator could tell me roughly how much time I've got before we've got around 5 minutes for just a minute I'm just going to stop sharing my screen so I'll leave you to that and just bring up my slides again and so this was a similar exercise we did on Monday at the Digital Aesthetics Research Centre on the slide so if everyone pops back forward and I'll just flag up a couple more things what you'll also see at the space I've popped a link to Dr Cedig because his presentation on Rectangles of Rest what happened when the university went online so you can have a look at that at your leisure and also there's a contact form so please submit your contact details if you're interested in having a personalised version and joining this ongoing exploration and if I I think we've got about 30 people here it takes me about maybe 20 minutes, half an hour to recycle one of these spaces so it's quite a manual process it will be hopefully automated using wordpress multi-site in due course so if I get more than 10 I'll have to pop names in a hat, I'm afraid otherwise I won't be able to manage it all at the current state and that's about it so any questions really and hopefully I can come up with some answers I think Anne raised a point and would you like your microphone enabled if so please raise your hand if not I will read it out for you okay so if my colleague Martin could just activate the microphone for me that would be great hi yes I think there's some hi yes I think there's some really brilliant tools there but I find that the biggest problem for some of the tools is the institutional processes and policies around being able to actually introduce any of the new tools and particularly with the Covid crisis the people who are responsible for the implementation of the policies and approving the new tools they're already flat out with trying to get the ones that they have now covered and so introducing new ones even if they might in the long term be more supportive is very difficult sure I absolutely appreciate that and don't really have any answers I think regarding this particular tool so I'm part of that institute so I'm part of that process part of our team was asked to help the institute find its feet part of my teaching practice is to look at experimental solutions I'm steeped in privacy policies cookie declarations all the legal stuff that's required for web development as well so I come with particular skills and a very focused at what is happening on the coal face and speaking with tutors on what is needed rather than it coming down from policy makers if you see what I mean so I sort of push it up as much as I can so I don't know if that answers the question it's those kind of cultures that we have to develop within the institutions that's really really valuable insight and I think it's the difference between how the different institutions are able to respond or have the staff that have enough training to respond and if there's enough staff in those roles sure sorry to interrupt him I was going to say I think Scott posted in the chat that your institution are very fortunate to have you and with less than a minute to go I would say that if it's okay with you would be okay to wrap up the session yeah perfect thank you everyone for listening and enjoy the next session and I hope I get some sort of volunteers who might find it useful even if it's to show policy makers and senior management here


Flexibility to adapt to the changing needs of students is an important feature of an inclusive school community. Specific delivery models for individualized programs may vary from classroom to classroom and may, at times, require a higher level of support that extends beyond the homeschool. You don't really realize how diverse your classroom can really be until you're at a place like Anfit's Gerald School where there's so many different types of children. A boy in my class who's diagnosed with autism spectrum disorder, I was really concerned. I wasn't sure the strategies to use. Luckily at Anfit's Gerald, we have a great support team. So the first couple weeks he was in our grade one classroom, it was almost like day-to-day with him. Strategies about how we were going to work with him, what his day was going to look like in comparison to the other children's day. And then we found out that he was going to the Genesis program. The Genesis Inclusive Support Transition Classroom, or GIST, supports inclusion for children with autism spectrum disorder. Each child who attends the program is accompanied by their homeschool educational assistant and multiple opportunities are provided for the classroom teacher to also visit the program. I learned more about autism and the way that children in general with autism think, how things affect them. People with autism have so many different functions and I learned how to read all of these functions. So I knew exactly what he needed, when he needed it. I got to come and visit a lot. He still knew me as his teacher too and I got to observe someone else who had a lot of knowledge about autism. And it was nice to have like a step back as they were explaining things that they were doing for him at the time because sometimes as a teacher it's much easier to to watch some of it happen versus just having someone talk to you about it. So we were able to actually see him in a classroom setting where I wasn't actually teaching. When he came back to our classroom there was a lot of transitional support. We created a space for him in the classroom. We had lots of conversations with the other kids about what it was going to look like, what kinds of different things we were going to do. And there was a lot of trial and error within the classroom so we would try some things and they wouldn't work. It was just nice to have the extra support. He transitions from the carpet to to go to outside or gym or anything and he's he he lines up, he knows what to do, he knows that he has to wait. Just like all of his friends, he is he's amazing. We are blessed. Carlito is very blessed with these people around him because they're really taking a lot of him and then they give all their time to him and then they're teaching him a lot. He knows communicate, you know. He called my name Papa. That's my son.