Juhana Jauhiainen

Juhana Jauhiainen

Hi there 👋
Advanced Django queries
#django#python#sql

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.

How to use a cache busting filename with webpack
#webpack#javascript#caching

If you're using a custom webpack config, you'll want to make sure the filename has a cache busting suffix.

Convert an array to a map in JavaScript
#javascript#computer science#reduce

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?

Hidden gems of the Chrome DevTools, Part 2: CSS tools
#web#chrome#tools#debug

In the second article of the series, we take a look at some of the CSS and layout

Creating layouts with CSS grids
#css#grid#layout

Grids are a powerfull feature of CSS but they can be a little overwhelming at first. In this article, we'll go through some basic concepts of CSS grids and learn how we can use grids to build layouts.

Create a retro text effect with CSS
#web#css

Ever wanted to create a cool 80's text with HTML and CSS? This article will show you how.

Hidden gems of the Chrome DevTools, Part 1: The Console API
#web#chrome#tools#debug

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 on how things work under the hood.

Setup Spectron and Testing Library to effectively test your Electron.js application
#testing-library#electron#javascript

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

How using Testing Library will help you improve the accessibility of your application
#testing-library#accessibility#javascript

Testing Library is a JavaScript testing framework which focuses on testing the way the application is used.

Mocking GraphQL APIs with Mock Service Worker
#mocking#testing#graphql

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.

Creating a VS Code theme
#vscode

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.

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

The CSS box model and it's behaviour with different box-sizing values might be difficult to visualize.

My year in review 2020
#review#2020

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.

A Tailwind CSS plugin for adding gradient masks
#tailwind#css#open source

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

Use useReducer to manage complex state
#react#hooks#reducer

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.

Manage React state with the useContext hook
#react#context#state

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
#react#react native#maps

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?
#react#frontend#debugging

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.

Access DOM element in a child component in React
#react#ref#dom

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. 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
#django#python

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.

Using namedtuple to create simple data objects in Python
#python#namedtuple

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.

Introduction to relative CSS units
#css

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.

Create a React Hook to show browser online status
#react#hooks

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.

Small projects for learning the Rust programming language
#rust

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.

Making API calls in React useEffect
#frontend#react#javascript

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 props and 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.

Dark mode using prefers-color-scheme rule and CSS variables
#css#design#usability

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.

How to loop over a JavaScript object
#javascript

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

The very basics of React Hooks
#javascript#react#hooks

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.

Memoization in Python
#optimization#python

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 class and instance variables
#python

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.

Using functools.partial

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.

Generating forms from JSON schema in React applications

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.

Using django-registration for simple user registration

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.