Weekday mornings are chaotic. Different start times, after-school activities, one kid finishes early on Wednesdays, another has music on Fridays… and the paper timetable on the fridge never reflects reality for long. We wanted something: Fast and offline-first — works on a phone without an account or network. Kid-centric — plan per kid, not per class; color-code “matters” (subjects/activities). Touch-friendly — drag and resize blocks the way your brain thinks: up/down on a vertical grid. Shareable when needed — send a link to a caregiver; they open and import, done. Respectful of privacy — everything stays on your device unless you explicitly share. That became Horari (Catalan for “timetable”): a small PWA you can install, use offline, and share on your terms.
Here there are few projects I've been working recently, mostly for my own amusement. In some of them I used Vite, Typescript and React to build small Progressive Web applications with local-first approach. The other ones are about coding in Elm, which is one of my favourite programming languages.
What is Elm ? Elm is a functional language that compiles to JavaScript. And that means it moves the functional programming paradigm into the frontend development, allowing you to build from simple websites to complex web apps. Don't be scared 🙀. Elm is both a functional programming language with its own syntax and grammar but is also an application development framework. The hard part (not at all if you continue reading) is that is a typed functional language. And that means that you should deal with functional terms like immutable, monad, currying and recursion...
This is an example of how different components implemented with different frontend frameworks or libraries can share the same Redux store. Different frameworks and libraries in same project The idea of the project is to implement the same component, a simple counter with two buttons, one to increase the value and other to decrease it.
I decided to go with Webpack to build and bundle everything.
Webpack has a large set of plugins and my thought was that there should be a loader in case I need it to load and build the resources. (I was right as I could check it)
What is Jest? Jest is a testing framework to run Javascript unit tests focused on the simplicity. It can work with Babel, Typescript and a wide set of frameworks like Angular, Vue, React as well as Node.js code.
What are CSS variables? The CSS variables are more accurately known as CSS custom properties. You can define a value under a variable key and use it along your stylesheets wherever is in its scope.
They can be very useful to avoid CSS repetition, with a better performance in run time for things like theme switching and very useful for extending or 'polyfilling' future CSS features.
