Static File Server With Deno and Abc

Let’s say I have some static files I want to serve. For example, a React app or a Svelte app. Create Svelte App Let’s use the Svelte template: npx degit sveltejs/template svelte-app cd svelte-app npm install Now we need to create a production build: npm run build The command will create an optimized build in the public folder. Create Deno Server Install Deno. We’ll use the third-party module Abc to create a simple web server.
Read more →

Tuesday Picks 005

Read more →

Tuesday Picks 002

Read more →

Friday Picks 045

Read more →

Friday Picks 044

Read more →

Friday Picks 025

Read more →

Friday Picks 023

Read more →

Learning Update End of October 2019

Read more →

ReasonReact Pause

In the last few days, I’ve been working hard on learning ReasonReact by creating a small project. I’ve learned a lot, but it has been quite frustrating, too. At the moment, I’m trying to set up form validation logic. ReasonReact is giving me the stink eye. I recently bought the book Learn Type-Driven Development by Yawar Amin. He is a helpful member of the community and seems to know his stuff.
Read more →

Working on ReasonReact, Svelte and React

I’m currently working on three different toy apps/learning projects: a Meetup clone in Svelte.js, an online store in React (with Redux, GraphlQL, etc.), and a simple todo with ReasonReact. It’s interesting to see how different framework tackle state management, UI rendering and the complexity of front-end development. So far, I’ve found Svelte the easiest to grasp. React has the best documentation and the best ecosystem. ReasonReact is functional (OCaml with React bindings under the hood) and typed.
Read more →

Friday Picks 016

Today the “Friday Picks” are a day late. Sorry. Problem Solving and Clojure 1.9 Podcast transcript - Rich Hickey, creator of Clojure, talks about problem solving - worth a read, even if you’re not interested in Clojure Jest Tutorial for Beginners: Getting Started With Jest for JavaScript Testing (2019) by Valentino Gagliardi Web Development Simplified With Svelte by Mark Volkmann - excellent in-depth introduction into Svelte.js Docker series - learn Docker from the beginning, in the Cloud, microservices etc.
Read more →

React Render Props and Svelte Slots

I’m trying to wrap my head around React‘s render props and Svelte‘s slots. Not much to write here, I still try to understand how it works. State Management in SPAs is quite complicated. There are a lot of solutions: passing props down, the Context API, the new useContext hook, state management libraries like Redux or MobX, state machines, etc. But you can also use component composition by rendering the children props.
Read more →

Friday Picks 015

Here are some things I’ve found useful this week or that I enjoyed: A web scraping guide for beginners, part 1 and part 2 A weird experiment: The Boost Your Coding Fu With VSCode and Vim Auditory Experience! An Audiobook? A Podcast?! Just Enough Erlang Truly reactive programming with Svelte 3.0 - this post shows what’s exciting about Svelte.js 4 Rules for Intuitive UX - the minimum to get you started - a must read!
Read more →

Played Around With Svelte Tooling for VIM and ESLint

Today I listened to the Localhost.fm Podcast. The most recent episode with guest Chris Ferdinandi inspired me to take a look at Svelte.js again (as an alternative to React.js). So I played around a bit today and got stuck on my tool chain. Oops. I updated my blog posts about Prettier and ESLint for Svelte.js and Vim and Svelte.js. There were still some errors with ESLint thanks to missing parser options.
Read more →

Friday Picks 012

Here are some things I’ve found useful this week or that I enjoyed: The Architecture of Open Source Applications - some free books on architecture! Use Svelte with SASS/SCSS in VSCode - add SASS to your Svelte project An Introduction to Domain-Driven Design - DDD w/ TypeScript - provides a good overview on DDD How to make your NodeJS application or API secure - some beginner-friendly advice on how to tackle security Mastering Phoenix Framework - free online version of a guide to Phoenix with TDD Building a JSON API in Elixir with Phoenix 1.
Read more →

Friday Picks 011

Read more →

An Introduction to Svelte by Dave Ceddia

One of the blogs I follow is Dave Ceddia’s. He has a way of breaking down complex topics to the bare minimum. His blog posts provide a good overview of a topic without going too much into details. Although I’m concentrating on learning the ins and outs of React, I still enjoy looking at alternatives. One of them is Svelte. I wrote about Svelte before. My first impression was positive, as it feels like a straightforward framework to learn with lots of power under the hood.
Read more →

Svelte.js: First Impressions

In the last two days, I started learning Svelte.js. I’m positively surprised. Svelte is easy, and it works. React‘s abstraction level is high, especially if you mix in JSX. With Svelte, you stay near “Vanilla-JS-Land.” (Svelte.js compiles down to standard JavaScript.) In a basic setup, your code also divides into three parts: The <script> block where you write JavaScript: you can define variables and write functions (typically event handlers). The CSS block where you write your component-scoped styles.
Read more →

Vim and Svelte.js

Yesterday I explained how you can add linting and formatting support for Svelte.js with ESLint and Prettier. But how can you integrate it into (Neo)Vim and ALE?

  1. Installation Follow the steps here to get up and running with ESLint and Prettier. Install ALE with your favorite Vim plugin manager (I use minpac). optional: Install burner/vim-svelte for syntax highlighting. 2. Configuration There is no native support for .svelte files but you can define an alias.
Read more →

Prettier and ESLint Setup for Svelte.js

Note: updated on 2020-05-29. In this article I will show you how to setup ESLint and Prettier for a Svelte.js project.

  1. Installation You need to install the following packages as dev dependencies: npm install –save-dev prettier eslint prettier-plugin-svelte eslint-plugin-svelte3 2. Configuration 2.1. ESLint Create an .eslintrc.json file in your project root directory: { "env": { "browser": true, "es6": true }, "parser": "babel-eslint", "parserOptions": { "ecmaVersion": 2019, "sourceType": "module" }, "plugins": ["svelte3"], "extends": ["eslint:recommended"], "overrides": [ { "files": ["**/*.
Read more →