Create a command-line tool which downloads a README template for your coding projects Why Nim? Nim is a statically typed systems programming language. Nim generates small, native dependency-free executables. The language combines a Python-like syntax with powerful features like meta-programming. Nim supports macOS, Linux, BSD, and Windows. The language is open-source and has no corporate affiliation. Nim compiles to multiple backends, for example, C, C++, or JavaScript. The ecosystem and community are small, but the language has reached its first stable release.

I’ve moved this blog from Gatsby.js to Hugo. My build times have gone down from more than 7 minutes to a few seconds! The slow build times with Gatsby have been an ongoing concern for me. I’ve slowly been creeping towards Netlify’s free 300-minutes-build-time cap. Hugo runs a magnitude faster, and it integrates well with Netlify. Hugo is a static site generator built with Golang. The project’s selling points are incredible speed, ease of use, and the ability to configure tons of settings.

We’ve come quite far with our music player in ReasonReact. We created a React Context with state, a hook to manage the Context, and we started with our UI. In this post, we will create a component for the music player control buttons, and we will finally implement the functionality to play the track via the DOM API. You can find the complete code on GitHub. Create Player Controls Create src/PlayerControls.

Our goal is to create a music player with ReasonReact like this one: ☞ Demo. James King wrote the JavaScript version of the tutorial at upmostly. My blog post series is a port of the tutorial to ReasonML and ReasonReact. I encourage you to check out the original JavaScript tutorial if you’re unsure about how useContext works. ReasonReact compiles (via BuckleScript) to React. We can leverage our existing React knowledge. We have all the power of React, but with the type-safety of OCaml, a mature language.

In the last post, we set up our project: a music player with useContext in ReasonReact. You can find the demo on GitHub pages and the full code on GitHub. The tutorial is a port from the React tutorial How to Use the useContext Hook in React by James King. Type-Driven Development ReasonReact is a statically typed language. We should now think about our data model and create types. That will help to flesh out our app’s state.

What Are We Building? This tutorial will show you how to build a music player with ReasonReact and the useContext hook. You will learn how to bootstrap a ReasonReact project, how to build a simple application, and how to use hooks with ReasonReact. ☞ View Demo Why ReasonML and ReasonReact? ReasonReact provides a type-safe way to build React applications. It leverages the mature OCaml language that comes with a superb type system.

In the last post, we finally finished the custom useForm hook. You can see the code on GitHub. Use The Custom Hook Let’s switch to our main form component: scr/Form.re. We need to connect the component to our custom hook. /* src/Form.re */ [@react.component] let make = (~formType) => { let logger = () => Js.log("Form submitted"); let (state, formRules, handleChange, handleSubmit) = UseForm.useForm(~formType, ~callback=logger); // JSX here }; So far, so good.

We set up our form validation rules, tackled state management and most of the logic. Now, we have to hook up our validation logic with the form. Each time a user types into the form, we want to update our validation rules immediately. We can then display the form validation status and give feedback to the user. The user should only be allowed to submit the form if all rules are valid.

What We’ve Done So Far We’ve laid the groundwork for adding form validation to our app. We defined our types; we have a simple form and a functioning useForm custom hook in a separate module. Create Form Rules And State Management Let’s define our validation rules1. /* inside UseForm.re */ let registerFormRules: FormTypes.formRules = [| // (A) { id: 0, field: "username", message: "Username must have at least 5 characters.", valid: false, }, { id: 1, field: "email", message: "Email must have at least 5 characters.

What We’ve Done So Far So far, we’ve created a simple ReasonReact form with a custom useForm hook and client-side routing. The custom hook uses a useReducer to handle state and transitions. The state is a Reason Record, a type-safe immutable “object.” We first define a type for this record, then we create the initial state: type state = { username: string, email: string, password: string, }; let initialState = {username: "", email: "", password: ""}; The code for our custom hook looks very similar to JavaScript, but it uses some nice ReasonML features like pattern-matching.

Our reusable Form component works, but we don’t have any routing. How can we navigate to our two forms (register and login)? Enter ReasonReact Router It’s a breeze to set up the inbuilt ReasonReact Router. My forays into the world of React Router have been far more painful. /* src/App.re */ [@react.component] let make = () => { let url = ReasonReactRouter.useUrl(); switch (url.path) { | ["login"] => <Form formType="login"/> | ["register"] => <Form formType="register"/> | [] => <Main /> | _ => <NotFoundPage /> } } Yes, that’s all (for development).

So far, we’ve created a simple form component with a useReducer hook. This form works with an email and a password - it could be a login form. But what if we would like to use the same logic to create a register form, too? Make The Form Component Re-Usable With a Custom Hook We know the shape of our data: we have three form fields: email, password, and username. We will only show the username field on the register page.

In my last post I tried to create a custom hook function for React forms. That didn’t work as I expected. Some kind folks helped me out and gave me some suggestions. Let’s pivot and try something different. Instead of creating a custom hook, I’ll take a step back and add the logic to the Form component. Maybe I can decouple it later. Using a Js.Dict to store data (email and password) proved to be difficult and seems to be an anti-pattern.

My goal is to learn more in public, so that it also may help others. I’ve given ReasonReact a first try. I’ve read a bit of the documentation, took a peek into Exploring ReasonML, and found some useful blog posts. Let’s try to build a form in Reason React! This is a simple project, but forms are one of the most common things you’ll need in a web application. Installation & Setup Installation via npm or yarn is painless:

Why ClojureScript? With React, you build small components and combine them. You design from data and then flow it through functions (and React classes). You start with the programming logic. You then add your UI with HTML-like syntax (JSX). I enjoy the data-centric approach. It also powers the core of Clojure and ClojureScript. I hate Javascript’s verbose syntax. Don’t get me started on the object model and the pitfalls of this.

This is part 2 of my Clojurescript Reagent Tutorial. In part 1 we created a simple random quote app that displays quotes from the TV-series “Breaking Bad”. Here is the live demo: Breaking Bad Quotes. And here is the Github Repo, so you can see the whole code (minus the sensitive login details for Firebase): Github. Now it’s time to deploy it. We will use Google Firebase for that, just to learn on how to do it.

Learning to code takes practice and building projects. So, here is how to build a simple “Random Quote Machine” with Clojurescript and Reagent. Hopefully, you’ll get a sense on how Clojurescript and Reagent work. Here is the live demo: Breaking Bad Quotes. And here is the Github Repo, so you can see the whole code: Github. The app displays a quote from the “Breaking Bad” TV series with its author. You can click on a button to get a new quote.