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.

 

Showing blogs tagged with #html

Making Wagtail pages more SEO friendly with Wagtail Metadata

Making Wagtail pages more SEO friendly with Wagtail Metadata

Wagtail pages are great for creating a lot of rich content straight out of the box, but for SEO optimization, they need some tweaking.

Here, I subclass the Page model with some help from the wagtail-metadata plug-in.

This subclassed model becomes the base for all site pages and holds all the data for og metadata, twitter cards, page description etc..
2022-12-22 18:24:27 UTC
Importing Text From File Into a textarea HTML Form Field

Importing Text From File Into a textarea HTML Form Field

This article covers how to add the ability to read the contents of a text file into a textarea form field from the front end without need to upload anything to the server. We'll go through adding a file input button with file type filter, enabling drag/drop and setting up the necessary JavaScript to handle both events.

We'll tie this together by creating a custom FieldPanel in Wagtail's CMS and add some CSS to tidy things up.
2023-05-23 10:20:50 UTC
Creating Custom Django Form Widgets with Responsive Front-End Behaviour

Creating Custom Django Form Widgets with Responsive Front-End Behaviour

This article will take you through the process of creating custom Django form widgets with responsive front-end behaviour. Create a custom Django template and learn how augment an existing widget with additional HTML and embedded JavaScript. For Wagtail users, learn how to seamlessly integrate your custom widget into FieldPanels and StructBlocks.
2023-09-16 03:51:11 UTC
Unlocking Enhanced Navigation with Bootstrap: A Guide to Submenus in Dropdown Menus

Unlocking Enhanced Navigation with Bootstrap: A Guide to Submenus in Dropdown Menus

Bootstrap has a notable feature gap: it doesn't provide a native component for nesting dropdown buttons. In this article, we'll delve into the art of crafting submenus within Bootstrap dropdown menus. You'll gain insights into seamlessly incorporating them into navbar dropdown menus, handling both collapsed and expanded views. Elevate your web navigation with Bootstrap submenus!
2023-09-26 05:21:53 UTC
Crafting a Bootstrap Navbar: How to Create Sticky Items for Persistent Visibility in Collapsed Mode

Crafting a Bootstrap Navbar: How to Create Sticky Items for Persistent Visibility in Collapsed Mode

Explore the art of designing a Bootstrap navbar that goes beyond conventional boundaries. In this guide, discover the secrets to creating sticky items that remain visible even in collapsed mode. Elevate your web design with seamless navigation that ensures key elements are always at your users' fingertips.
2023-12-15 00:49:09 UTC
Efficient Cascading Choices in Wagtail Admin: A Smart Chooser Panel Solution

Efficient Cascading Choices in Wagtail Admin: A Smart Chooser Panel Solution

In the Wagtail admin interface, handling cascading or dependent selections can be a challenge due to the absence of active controls. This tutorial unveils a practical solution by guiding you through the creation of a custom 'chooser' panel. This panel not only elegantly displays dependent elements grouped by their parent element, focusing on categories and subcategories, but also incorporates an intuitive partial match filter for swift and efficient selections.

Learn how to implement this custom chooser panel, providing a one-click method to effortlessly manage cascading selections, enhancing your Wagtail experience.
2024-01-27 00:39:51 UTC
Build an Intuitive Link StructBlock in Wagtail: Simplifying Link Management for Content Editors

Build an Intuitive Link StructBlock in Wagtail: Simplifying Link Management for Content Editors

Learn how to create a reusable StructBlock in Wagtail that simplifies the management of different link types.

Develop an intuitive, compact, and interactive tabbed interface that empowers content editors to seamlessly select link type, path, and text, all while optimizing page space within the editing interface. Implement a common method to retrieve URL and text for the link regardless of link type, including custom link types.

We'll cover concepts essential for achieving our goal, such as transforming Django's radio select widget into a tab group, constructing an interactive panel interface within the StructBlock using a custom Telepath class, dynamically adding child blocks based on initial parameters, integrating data attributes into block forms, custom StructValue classes and designing adaptable choice blocks.
2024-03-09 00:14:43 UTC