javascript

7 articles

Using Create React App with Fable

Published

Tags

2019 has been a great year for me for all things F# related! I helped out with the organization of , gave a and was able to release . To wrap up the decade I'm writing this post as part of the . I had fun and I wish to continue this trend. has been receiving some traction in the community and at one-point Zaid asked me what I thought about it. My reply was, well it's not for everybody 😅. In this blog post I'm going to explore yet another alternative of creating views in Elmish, by using React as…

Building Fable on Travis CI

Published

Tags

Hi nojaf from the future, its you from the past. Today you created a build script for compiling Fable projects on Travis CI. Using a it is pretty easy to set up a Travis CI process. This blogpost is meant to capture what you knew then in case you sorta forgot. Once you logged in to , create a project by selecting a repository. Don't worry you log in with your GitHub account and hit the add button. They know you are you and you get to choose a repository you have on GitHub. If you did that then create a …

Writing a VSCode extension with Fable 2.1

Published

Tags

This post is part of the . I'm very grateful to be a part of this and I hope you will enjoy this one as much as I have enjoyed the others. Today I would like to show you how you can create from scratch using Fable. Along the way we write some code that will extend the syntax. To get started we will follow the general approach of scaffolding a new extension. Using the generator we will scaffold a new JavaScript extension. In order to add Fable we need two main pieces: a couple of npm…

React hooks preview with Fable

Published

Tags

A couple of weeks ago Facebook presented , a new way of accessing React features inside functional components. In this blogpost I would like to show that the new hooks can easily be used in combination with . Disclaimer: Hooks are an experimental proposal to React, currently available in , and the api is not final yet. Use at your own risk. A first example of a hook is . When the hook is called, we receive a variable representing the state and a function to update the state. Example: Note that accepts a default value for the…

Adventures in Elm

Published

Tags

2016 for me personal was the year the I came in serious contact with functional languages. I started looking at F#, applied functional concepts (partial application, immutability, pure functions and so on) in JavaScript, gave RxJS a shot and fell in love with React. A logical next step was looking at Elm. I was first introduced to Elm at a a while ago by . To be honest I was a bit overwhelmed at the time and a bit skeptical afterwards. I decided to give Elm another shot and learned a lot by following . Now I feel ready…

A leap in RxJS

Published

Tags

A while ago I wrote some JavaScript to create a custom slideshow. I recently had to revisit that project and I saw an opportunity to fiddle around with The way the slideshow works is that it shows three images and moves up one frame at a time.So initially the first three images are shown and the rest are hidden. You press the right button to move forward and the left to move backwards. Of course at the beginning of the slideshow you can't move backwards. Thus the left button is hidden. Once you are at the end of the…

Redux Thunk, javascript middleware for Redux

Published

Tags

Lately I've been using a lot of Reactjs goodness in my side projects. React is only the V in a modern day MVW (Model, View Whatever) pattern and that's an interesting subject. Facebook uses its own library/pattern/architecture to cope with the other stuff, however there seem to be a lot of different opinions when it's comes to flux. One of those flux variants is Redux, created by Dan Abramov and others. If you never heard of Redux or don't really know how it works, I suggest you . In this blogpost I'll explain a way of dealing with async…