Tech Blog

Here I'll be sharing insights from my professional experiences and studies in data science and web development. There'll be plenty of Wagtail, Django and Python, a bit of JavaScript and CSS thrown in, and more on data science & engineering. There might even be a bit of time for some project management and business analysis too.

I'll also provide insights into how this site was made, as well as code examples and thoughts on how those could be further developed.

Feel free to leave questions or comments at the bottom of each post - I just ask people to create an account to filter out the spammers. You won't receive any unsolicited communication or find your email sold to a marketing list.

Filter:

Data Science

Web Development

#analysis

#css

#django

#draftail

#gis

#javascript

#knitr

#mapbox

#markdown

#multi-language

#nginx

#postgres

#python

#reporting

#seo

#shiny

#wagtail

#webserver

Showing blogs tagged with #css

Creating Wagtail Streamfield StructBlocks with a Customised Editor Interface

This article will take you through the process of creating custom Wagtail Streamfield StructBlocks. You will learn how to customize the editing interface with CSS and JavaScript to achieve responsive front-end behaviour.

I'll demonstrate the creation of a StructBlockAdapter and the registration of JavaScript using Telepath. Additionally, I'll give a real-world example, showing how to include a custom StructBlock as a component of a parent StructBlock.

Wagtail: Extending the Draftail Editor Part 4 - Custom Lists

The fourth part of this series looks at creating custom lists in Draftail, including the limitations considering this is not currently a supported feature in the editor.

I'll show how to create custom list styles within those limitations, and also how you can use a custom list to apply styling around a group of consecutive blocks of the same type.

Creating Responsive Font Sizes Based on the Viewport

Previously, responsive typography required a series of media queries, font definitions, and other complexities. All of that has changed thanks to widespread browser support for variable fonts and the all-important CSS clamp() function.

I'll show you how to linearly scale text between a set of minimum and maximum sizes when the width of the viewport changes, with the goal of making its behaviour at different screen sizes more predictable without the use of media queries and with only one line of CSS. Use the on-screen calculator to build your font sizes.