dev notes

I built a Lily58 split keyboard

Sun, 19 Jan 2025 00:00:00 +0000

So about a month ago I took the plunge into the DIY keyboard space and ordered a split keyboard kit called Lily58 kit from keebd.com. In this post I’m going to go over the parts, building process and my current thoughts on the keyboard.

The parts

There are a few stores selling the Lily58 kit but I ordered mine from keebd.com. The price for the kit was 55.95€ before taxes. Keebd.com is located in Australia and I’m in the EU so I of course had to pay customs and taxes on top of that. Total for the kit shipped to Finland was about 110€.

What I really want from AI

Sun, 22 Dec 2024 00:00:00 +0000

I’ve been using GitHub Copilot since it became available in the technical preview in 2021. During this time the field of AI developer tools has changed dramatically. Now we have many alternatives to Copilot such as Cursor, Windsurf and Aider. The tools have not only improved the autocomplete suggestions developers get but also changed the workflow of developers using them. Cursor specifically was the first tool I felt was a major step forward in using AI as coding assistant. It seemed to understand the context and the project I was working on much better than Copilot and was able to make large changes spanning multiple files. Recently GitHub has added to Copilot the support for editing multiple files and providing a larger context for the LLM to work with similarly to what Cursor does. It seems to work reasonably well in most cases even if I have to make some changes to the results to make them usable. I think this is already a huge step forward from the initial Copilot versions.

Dynamic aggregation fields in Django

Tue, 05 Sep 2023 09:33:01 +0000

In this article I will walk you through on how to create dynamic aggregation in Django. By dynamic aggregation I refer to the ability to define the resulting aggregation fields programmatically.

Aggregation is a powerful tool when working with data in Django. With it you can have your database summarize or convert data into the format you need.

Here’s an example of a basic Sum aggregation.

from django.db import models
from django.db.models import Sum

class Order(models.Model):
    total_price = models.DecimalField(max_digits=10, decimal_places=2)

# Calculate the total sum of all order prices
total_sum = Order.objects.aggregate(total=Sum('total_price'))['total']

print(f'Total sum of all order prices: {total_sum}')

We have a Order model with total price. If we want the total sum in some collection of orders (all orders in the example), we can use aggregate with Sum .

How to search files from Azure Blob Storage using Python

Tue, 13 Dec 2022 00:00:00 +0000

Searching for files using index tags is a common use case but the Azure documentation can be quite hard to grasp.

To search for blobs with specific tags in Azure Blob Storage using Python, you can use the find_blobs_by_tags method from the Azure Storage SDK. It takes as a single parameter filter_expression which can be used to query blobs with specific tags, container or name.

Here’s an example of how to use find_blobs_by_tags to search for blobs with specific tags

What are template literal types in TypeScript?

Thu, 21 Apr 2022 00:00:00 +0000

Before diving into template literal types, we first need to discuss string literal types

In TypeScript, string literal types are types that constrain the type of a variable to a string or a union of strings.

type Greeting = "hello world";

const text1: Greeting = "hello world"; // ✅  This is ok
const text2: Greeting = "hello"; // ❌ Type '"hello"' is not assignable to type '"hello world"'.

Constraining the value of a variable to a single string is not that useful but a union of strings is something you’ll see often.

How to implement useMediaQuery hook in React

Sun, 13 Mar 2022 00:00:00 +0000

What are Media Queries?

Media Queries are a CSS feature that can be used to conditionally apply selected styles on an HTML element. Some examples of media queries include checking for the width of the browser window, checking for the media type (print, screen), or checking for dark/light mode preference.

The most common use case for media queries is using it to implement responsivity on a website. Checking for the width of the viewport and applying styles based on it allows us to define different styles on different devices (desktop, mobile, tablet).

Basics of React server-side rendering with Express.js

Sat, 05 Feb 2022 00:00:00 +0000

If you want to develop SEO friendly and fast websites with React, you have two choices: server-side rendering (SSR) or static site generation (SSG).

There are some awesome frameworks like remix.run , next.js, astro or 11ty, which allow you to use one of (or both) techniques. So if you’re building a production app, I recommend using one of them because server-side rendering is quite hard to get right.

But if you want to understand how it works and what is happening under the hood in these frameworks, you definately should try it out. This article will focus on how SSR works and we will also go through a simple example of using SSR.

Use Model Manager to filter queryset by default

Tue, 18 Jan 2022 00:00:00 +0000

How can you filter a queryset by default so that no matter where you use the model, the filter will be applied?

This can be achieved by creating a custom Manager and overriding its get_queryset method.

For example, if we have a soft delete feature in our app implemented by adding a deleted column, we can force only returing non-deleted objects by creating a custom model manager which filters for deleted=false

Should you use React.FC to type your components?

Tue, 07 Dec 2021 00:00:00 +0000

TLDR: No. You should probably not.

const Dialog: React.FC = ({children}) => {
	return (
		...
	)
}

The consensus in the React community now seems to be that, you should avoid using React.FC because it causes the component to implicitly take children. This means the component will accept children, even if they’re not supposed to.

Let’s take a look at the pros and cons of React.FC.

Pros of React.FC

Excplicit return type

In addition to the children prop, React.FC declares an explicit return type for the component. The return type is ReactElement | null; and we will get a type error if we try to return something else from the component.

Why you should use the URL to store state in your application

Sun, 28 Nov 2021 00:00:00 +0000

It seems we have, in the web community, collectively forgotten the role of the URL in storing the state of our application. For good or bad, we’ve started developing websites like they are apps and forgotten one of the key elements of the web. I’ve seen (and built) applications where opening modals, searching, filtering, or navigating a wizard doesn’t change the URL. And this is wrong because it doesn’t fit the web paradigm.

What are HTTP cookies

Thu, 28 Oct 2021 00:00:00 +0000

A HTTP cookie is a small piece of data that a server sends to a user’s web browser. The browser may then store the cookie and send it back to the same server with later requests.

Cookies are used typically to tell if two HTTP requests come from the same browser/user. So for session management, tracking and to a lesser extent personalization

For general data storage on the client, there are more modern APIs.

How to make TypeScript understand Array.filter

Mon, 04 Oct 2021 09:33:01 +0000

If you’ve ever used Array.filter to filter a list to certain type of items, you’ve probably been hit by TypeScript not realizing what type of items your list contains after filtering. To fix this, you can use user-defined type guards.

Let’s say we have content items of two type: Post and Image.

interface Post {
	text: string;
    title: string;
    date: Date;
}

interface Image {
    url: string;
    alt: string;
    date: Date;
}

We are going to store items of both types in a array.

Why Docker is eating your disk space

Thu, 23 Sep 2021 09:33:01 +0000

I learned recently, in less than ideal circumstances, that Docker doesn’t do any log rotation by default 😱

So if you’re running your application in production with Docker and using Docker’s default logging driver you might be awakened some night at 3 AM to fix a service outage when you can barely think straight. 😅

The default logging driver is json-file which caches the container logs as JSON. In practice, this means Docker is writing all the container stdout and stderr to a JSON file located in the host systems /var/lib/docker/containers folder.

How to type an object with exclusive-or properties in TypeScript

Sun, 12 Sep 2021 09:33:01 +0000

How can we define a type for an object, which has some required attributes and some attributes, of which one and only one must be defined?

Let’s say we want to define a type for a message that has a timestamp and either a text or an id.

// ✅ This should be valid
const messageWithText = {
    timestamp: "2021-08-22T19:58:53+00:00",
    text: "Hello!"
}

// ✅ This should be valid
const messageWithId = {
    timestamp: "2021-08-22T19:58:53+00:00",
    id: 123
}

// ❌ This should be a type error 
const messageWithBoth = {
    timestamp: "2021-08-22T19:58:53+00:00",
    id: 123,
    text: "Hello!"
}

// ❌ This should be a type error 
const messageWithoutEither = {
    timestamp: "2021-08-22T19:58:53+00:00",
}

Union type

One way to approach this would be to use a union type

Advanced Django queries

Tue, 27 Jul 2021 00:00:00 +0000

Django Framework comes with a powerful ORM and query capabilities built-in. If you’re only familiar with the basics of Djangos Query API, this article will introduce some more advanced queries and methods you can use.

In the examples, I’ll be using the following data models.

class Author(models.Model):
    nickname = models.CharField(max_length=20, null=True, blank=True)
    firstname = models.CharField(max_length=20)
    lastname = models.CharField(max_length=40)
    birth_date = models.DateField()


class Book(models.Model):
    author = models.ForeignKey(Author, related_name="books", on_delete=models.CASCADE)
    title = models.CharField(unique=True, max_length=100)
    category = models.CharField(max_length=50)
    published = models.DateField()
    price = models.DecimalField(decimal_places=2, max_digits=6)
    rating = models.IntegerField()

Filtering

Basic filtering in Django can be done using something called field lookups with the filter method. Field lookups consist of the field and a suffix defining the lookup type. If no suffix is defined, the default behavior is equivalent to using the exact suffix.

How to use a cache busting filename with webpack

Sat, 17 Jul 2021 00:00:00 +0000

If you’re using a custom webpack config, instead of a template or Create React App, you’ll want to make sure the filename has a cache busting suffix. Cache busting means making sure the users browser loads the newest version of our app, if it has been updated, instead of using a cached version.

A naive webpack setup would just use a single output file with a fixed name.

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: './src/index.js',
    plugins: [
      new HtmlWebpackPlugin(),
    ],
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  }

Here, we are using HtmlWebpackPlugin to manage the creation of our index.html file and it will handle inserting a <script> tag into the index.html with our bundle filename. For now we are bundling all of our JavaScript into single file called bundle.js.

Convert an array to a map in JavaScript

Tue, 06 Jul 2021 00:00:00 +0000

Sometimes it’s useful to convert a array to a map for convenience or performance reasons. But how can we achieve that so that the resulting code will be easy to understand?

I’m using the term map here to mean a data structure where a value can be accessed using an unique key. In JavaScript, objects can be used as maps but there also exists a special Map type which has some advantages and disandvantages when compared to using objects. We won’t be covering Map in this article.

Hidden gems of the Chrome DevTools, Part 2: CSS tools

Fri, 25 Jun 2021 23:59:01 +0000

In the last article on the series we looked into some features on the Chrome Console API. This time we’ll see some of the tools Chrome has to offer when working with CSS and layouts.

Inspect layout

Chrome developer tools include handy tools for inspecting and debugging grid and flexbox layouts. When we open Chrome developer tools on the Elements tab, you’ll find a Layout tab right next to Styles and Computed. Under Layout we will see a listing of all the grids and all the flexbox layouts on the current page.

Hidden gems of the Chrome DevTools, Part 2: CSS tools

Mon, 21 Jun 2021 09:33:01 +0000

Accessibility features

accesibility tab

debugger

Experimental

font editor in styles
CSS overview
flex box debugging
accessibility tree

Creating layouts with CSS grids

Wed, 16 Jun 2021 09:33:01 +0000

Grids are a powerfull feature of CSS but they can be a little overwhelming at first. There are rows, columns, areas, lines, and multiple syntaxes for defining layouts. How do these concepts fit together and how to use them effectively?

In this article, we’ll go through some basic concepts of CSS grids and learn how we can use grids to build layouts. My goal is to shed some light on how to define grid areas grid lines, which I found somewhat confusing when learning CSS grids.

CSS grid by examples

Sat, 15 May 2021 09:33:01 +0000

Three column grid layout

The next example is a three column layout that could be used for example in a blog or a news site. It has a navbar and a grid that uses a automatic layout for it’s child elements.

Here’s the HTML structure we will be using

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Three column layout</title>
  </head>
  <body>
    <nav>
      <div class="title">Nav</div>
    </nav>
    <main>
      <article class="hero">
        <div class="title">
          Article
        </div>
      </article>
      <article>
        <div class="title">
          Article
        </div>
      </article>
      <article>
        <div class="title">
          Article
        </div>
      </article>
      <article>
        <div class="title">
          Article
        </div>
      </article>
      <article>
        <div class="title">
          Article
        </div>
      </article>
    </main>
  </body>
</html>

In this layout we will not be using grid for the whole page. Instead we will use conventional layout method like position and margin for the navbar and positioning the grid container. We will then use a grid for the layout of the content.

Create a retro text effect with CSS

Tue, 13 Apr 2021 09:33:01 +0000

In this article, we’re going to create an 80’s style text effect with CSS. The effect uses multiple text-shadow, background-clip, filter, linear gradients and -webkit-text-stroke to achieve a cool metallic effect.

Before we dive into the actual CSS you probably want to see the end result.

Let’s start by defining our HTML markup that we will be using.

Hidden gems of the Chrome DevTools, Part 1: The Console API

Sat, 03 Apr 2021 09:33:01 +0000

Debugging, or finding the reason why your code doesn’t work, is one of the most important skills a software developer needs. If you can debug effectively, you’ll catch problems faster and even gain a better understanding of how things work under the hood.

In frontend development, we have a variety of tools available to debug our code. We can use a debugger to step through our code, we can log values to the browser console and we can use the DevTools of our browser.

Setup Spectron and Testing Library to effectively test your Electron.js application

Sun, 14 Mar 2021 09:33:01 +0000

In this article, we will setup Spectron and use Testing Library with WebdriverIO to test an Electron.js application.

Spectron is an open source framework for writing integration tests for Electron apps. It starts your application from the binary, so you can test it as a user would use it. Spectron is based on ChromeDriver and WebdriverIO.

Testing Library WebdriverIO is a library you can use to test web applications through WebdriverIO. It’s part of the Testing Library family of libraries.

How using Testing Library will help you improve the accessibility of your application

Tue, 23 Feb 2021 09:33:01 +0000

Testing Library is a JavaScript testing framework that focuses on testing the way the application is used. Testing Library will also help you avoid testing implementation details and make your tests more maintainable. Testing the way the application is used will give us the confidence that the application is working as intended.

What’s also nice about testing-library, is that its recommended queries are designed to work well on accessible elements. This means using Testing Library will also reveal accessibility problems in your application.

Mocking GraphQL APIs with Mock Service Worker

Sun, 14 Feb 2021 09:33:01 +0000

Mock Service Worker (MSW) is a library for mocking, or faking, a backend API. This is extremely useful when you are developing new features into your application, or when you are running tests.

In this article, I will guide you through setting up MSW for mocking a GraphQL API and show a few different kinds of ways you can mock queries and mutations. GitHub GraphQL API is used in the examples.

Creating a VS Code theme

Mon, 25 Jan 2021 09:33:01 +0000

Ever wanted to create a theme for VS Code? It’s simpler than you’d think but the process is a bit laborious and requires you to painstakingly go through all the attributes you need to change.

If you want your theme to work, and look nice, on multiple programming languages, you’ll need to add a lot of color definitions.

I’ve just released my first theme called Lupine and this post goes how I created it and what I learned on the way.

Use box-sizing: border-box for simpler element sizing

Mon, 04 Jan 2021 09:33:01 +0000

The CSS property box-sizing defines how the width and height properties behave on a element with border or padding. Normally, when box-sizing has its defualt value of content-box, width and height affect the size of the content. This means that if you have a element with padding: 10px, border: 8px and width: 100px then full width of the element will be 136px. This also affects elements which have a relative width or height.

My year in review 2020

Thu, 31 Dec 2020 09:33:01 +0000

This has been a horrible year for most of us. COVID-19 has killed millions of people and changed life for millions more. The pandemic has also changed the way we work and live our daily lives.

In this article I’m going to focus on the more positive things which have happened to me in 2020.

Work habits

At the start of the year, I read Cal Newports Deep Work which had a positive effect on my daily work routine. I started using time blocking to get more focused work. I also try to schedule all meetings on the afternoon because I’m the most productive in the morning.

A Tailwind CSS plugin for adding gradient masks

Mon, 09 Nov 2020 00:00:00 +0000

Some time ago I added excerpts to my blog. A small sample of the full blog text is now shown on the front page after the post heading, date, and tags. To make the excerpts look a bit nicer, I wanted to add an effect that makes the text fade into the background.

You can do this with the CSS mask-image property by setting its value to a linear-gradient.

.some-class {
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 1.0) 0%, transparent 100%);
}

I use Tailwind CSS to style my blog so I wanted to find a solution which doesn’t require adding CSS classes or files to my project.

Use useReducer to manage complex state

Sat, 31 Oct 2020 00:00:00 +0000

useReducer is a React Hook which helps you manage complex state with a simple API. The hook takes a reducer function and the initial state as parameters. You can also pass in an optional argument which can be a function for lazy initialization of the state.

Here’s the simplest example of using useReducer you can think of.

import React from "react";

function reducer(value, newValue) {
  return newValue;
}

export default function App() {
  const [value, setValue] = React.useReducer(reducer, 0);
  return (
    <div className="App">
      <h1>{value}</h1>
      <button onClick={() => setValue(value + 1)}>Increment</button>
    </div>
  );
}

We are using useReducer for managing a single value, like when we use useState. But useReducer can do much more than that!

Manage React state with the useContext hook

Wed, 14 Oct 2020 00:00:00 +0000

DISCLAIMER: This post is based on state management ideas presented by Kent C. Dodd’s in Application state management with React. If you haven’t read it, I encourage you to do so.

React projects have many options for managing state. While libraries like redux and mobx are a popular choice, React also has it’s own API for managing state. The Context API is useful when you have state which is accessed in multiple places in your app and you want to avoid prop drilling.

Make custom marker displaying users location and direction with react-native-maps on iOS

Wed, 30 Sep 2020 00:00:00 +0000

NOTICE: This post is about showing a custom location and direction indicator with react-native-maps on iOS. This involves a hack which probably isn’t needed on Android. On Android rotation works just by adding the rotationprop to the Marker and setting it to the current heading. As far as I know this hack is only required for iOS.

If you want to display the current GPS location with your own custom graphics in React Native Maps, you need to create a custom Marker. This is done fairly easily, since the Marker component accepts a View as child.

What is React Strict Mode?

Sat, 26 Sep 2020 00:00:00 +0000

React Strict Mode is a tool, which comes with React, for detecting possible issues and problems in your application. Currently (Sept. 2020) Strict Mode detects if you have unsafe lifecycle methods, usage of legacy string ref API, usage of findDOMNode, detecting unexpected side effects or detecting usage of legacy context API.

So basically, using Strict Mode will help you detect if your app or libraries are using React APIs which are deprecated, unsafe in async code or have problems which might cause bugs. Strict Mode warnings are only displayed in development, so you don’t have to worry about them showing up in production. In the future, Strict Mode will likely add other warnings so even if you don’t have any now, it’s a good idea to keep using it.

Access DOM element in a child component in React

Tue, 18 Aug 2020 06:45:01 +0000

Sometimes we need access a DOM element which is contained by another React component. If we try to just use ref and pass it to the child component, we get an error.

function ChildComponent(props) {
  return <div ref={props.ref}>Hello there!</div>;
}

export default function App() {
  const childRef = React.useRef();

  return (
    <div className="App">
      <ChildComponent ref={childRef} />
    </div>
  );
}

This is because ref is a reserved prop name so you can’t pass it to a child component. Instead we can use forwardRef when defining the child component.

Customize Django admin with list_display property

Thu, 23 Jul 2020 23:32:01 +0000

One of the great “batteries included” features Django has, is the automatically generated admin panel. It provides a simple UI for creating, editing and deleting data defined with the Django ORM. In this article we are going to enable the admin user interface for a simple model and customize it from a simple list view to a more user friendly table like interface.

Lets say we have a simple model Item which has two fields nameand price.

Using namedtuple to create simple data objects in Python

Mon, 29 Jun 2020 23:30:00 +0000

Python standard library has a handy collection factory function called namedtuple, which can be used to assign names for each position in a tuple.

Named tuples behave otherwise like a normal tuples but each element has a name which can be used for retrieving the value just like with class objects.

from collections import namedtuple
Item = namedtuple("Item", ["name", "price", "quantity"])

Here we first import namedtuplefrom the collectionsmodule in the standard library and then create a named tuple called Itemwith the properties name, price and quantity.

Introduction to relative CSS units

Mon, 22 Jun 2020 23:38:00 +0000

With CSS you can use absolute units like the familiar px, pt or relative units like em and rem . Absolute units are quite simple to use and rarely cause confusion. Relative units however can twist your brain if your not familiar with how they work.

We are going to go through some of the most common relative units with simple examples that hopefully help you understand how they work and how to use them.

Create a React Hook to show browser online status

Sun, 31 May 2020 09:33:01 +0000

React Hooks are a way of adding logic to your functional components in an simple and elegant way. In addition to the standard hooks like useState or useEffect you can also create your own hooks if find you need the same logic in multiple components.

A custom hook is nothing more than a JavaScript function which starts with “use” and that may call other hooks. In this article I will show you how to create a simple hook for showing the network status of the users browser.

Small projects for learning the Rust programming language

Tue, 19 May 2020 09:33:01 +0000

Inspired by some of Jon Gjensets Rust streams and videos I decided to start learning Rust (again!). I’ve previously read part of the Rust book but never started any projects with it so I didn’t retain much of it.

This time I decided I’ll go through the book but I’ll also create a repository with increasingly difficult practice problems to solve.

So far I’ve come up with the following list of problems

Making API calls in React useEffect

Sat, 16 May 2020 09:33:01 +0000

useEffect is a hook added in React 16.8. It allows you to perform side effects in function components. This means you can update things outside of React based on your propsand state. Fetching data when the component state changes, changing the page <title> or connecting to a WebSocket server are all examples of side effects that can be done with useEffect.

As an example, we are going to build a component which fetches data from Cat Facts API and displays the received facts as a list. Finally we’ll add buttons to select the animal we want facts about.

Dark mode using prefers-color-scheme rule and CSS variables

Thu, 14 May 2020 09:33:01 +0000

In this article I’ll show you how to implement dark mode in your blog or site using CSS variables and how the toggle it automatically based on the users preferred color scheme.

CSS variables are a new way to make CSS more maintainable by defining reusable variables which are defined in one place and can be referenced in multiple other places.

For our dark mode example we’ll be changing the sites background and text colors when the user has set dark mode as preference at system level.

How to loop over a JavaScript object

Thu, 30 Apr 2020 09:33:01 +0000

There’s a few ways to loop over a object in JavaScript. Let’s look at a couple of them.

Let’s say we have a object like this

const animals = {
    cat: "meow",
    dog: "woof",
    duck: "quack",
    pig: "oink",
    turkey: "gobble"
}

One way to loop over a object is to use the Object.keys() function to first retrieve the keys in a object and then loop over the returned array.

const keys = Object.keys(animals);
for (let i = 0; i < keys.length: i++) {
  const animal = keys[i];
  const sound = animals[animal];
  console.log(`A ${animal} says ${sound}!`);
}
// A cat says meow!
// A dog says woof!
// A duck says quack!
// A pig says oink!
// A turkey says gobble!

You could also use Array function forEach for looping the array but in ES6 the for..of syntax was introduced for looping iterators (including arrays).

The very basics of React Hooks

Mon, 27 Apr 2020 09:33:01 +0000

Hooks are an React API that were introduced in React 16.8 a little more than a year ago (february 2019). They let you use state in your React components without writing classes.

In this post I’ll talk about the useState hook and after reading it you’ll have a basic idea how to use it to add state to your functional components.

Let’s start with a simple functional component.


import React from "react";
function Cat() {
  return (
    <span>
      🐱
    </span>
  );
}

Here we are simply rendering a cat emoji inside a humble span element.

Memoization in Python

Fri, 17 Apr 2020 09:33:01 +0000

Memoization is a optimization technique frequently used in functional programming. It means storing the result of a computationally intensive function call and returing the cached result when the function is called with the same arguments.

Python 3.2 introduced the functools.lru_cache decorator which enables memoization of function results in Python.

Using lru_cache is simple as we can see from a example taken from the Python documentation

@lru_cache
def count_vowels(sentence):
    sentence = sentence.casefold()
    return sum(sentence.count(vowel) for vowel in 'aeiou')

When calling for ex. count_vowels('Count vowels in this sentence') the result is cached and when you call the function with the same argument the cached result is returned instead of counting the vowels again. This can be a huge performance boost when dealing with big datasets with potentially similar data.

Python class and instance variables

Wed, 11 Mar 2020 18:18:03 +0000

Confusing class variables and instance variables in Python is a pretty common mistake. Or.. atleast I’ve made it more than once. Python doesn’t use static keyword but instead the location the variables are defined in to differentiate between the two which will seem pretty foreign to people coming from other object oriented languages.

Here’s an example of how you would declare class variables in Python

class Foo:
    bar = True

instance = Foo()

bar is now accessible by Foo.bar, self.bar inside the methods of class Foo and with instance.bar using a instance of the class.

Using functools.partial

Sun, 23 Feb 2020 20:28:34 +0000

I’ve gotten used to a functional programming style in JavaScript and I’m finding I want to use same kind of paradigms in Python.

Builtin methods like map() and filter() already help but the functools module provides additional ways to do functional programming.

Let’s look at what the functools.partial function can do.

partial() can be take a function of many parameters and make it a function of few paramters. This is very useful if you have to call the same function
multiple times with almost the same parameters.

Generating forms from JSON schema in React applications

Sun, 19 Jan 2020 20:19:10 +0000

Automatically generating UI from a schema document can be a powerful prototyping tool or can even be used to build simple apps if the requirements aren’t too complex.

One awesome library for generating UIs from json-schemas is react-jsonschema-form. react-jsonschema-from can be used to automatically generate forms in a React application from a JSON schema document.

I found the library easy to use and it was perfect for my use case of a form input app which could later be expanded with additional forms with minimal coding.

JSON diffing

Sun, 08 Sep 2019 09:33:01 +0000

Some time ago a client asked if I knew a tool for formatting and comparing JSON data. The use case he was after was comparing JSON data returned by an API to the expected output.

I’d been on the look for a similar tool myself mainly for formatting and inspecting sizeable JSON data dumps. A number of online tools exist for formatting JSON but most of them either were serving ads or had a horribly cluttered interface.

Lexers and parsers

Wed, 14 Aug 2019 18:42:03 +0000

Read some blog posts by Drew Youngwerth on lexers and parsers at drew.ltd/blog/posts/2020-7-18.html They inspired me to use a lexer and a parser for formatting JSON in a electron app I’m working on.

-brandfilt

Using django-registration for simple user registration

Fri, 05 Jul 2019 21:10:01 +0000

Recently I had to setup a web app with simple one step user registration. After some searching I came accross a Django library called django-registration which seemed like the best way to implement user registration. It features single step and two step registration flows, some simple views and simple installation and configuration. In this blog post I’m going to go over the steps needed to implement user registration in a Django app.