Different alignment and order of columns on mobile/desktop using Bootstrap 5

Scenario: Build a pagination partial consisting of 3 parts – the item range (e.g. “Showing 1 – 10 of 30 results”), a dropdown to select the page and a dropdown to select the number of items per page. The 3 parts will be displayed in a different order and have different text alignment on mobile …

Split text into left and right columns using CSS

Result (drawn using ASCIIFlow Legacy): +————————————————–+ | | | 1) This text is left. This text is right. | | 2) This text is left. This text is right. | | | +————————————————–+ Sample HTML and CSS: <style> .split { display: block; } .split span { display: block; float: right; } div { left: 200px; …

Render array of objects together with index in Mustache.js and as Bootstrap rows or dropdown options with selected value

Came across a GitHub issue Collection processing like @index for Mustache.js. It referenced the each() function in another library, GRMustache. Came up with the following and posted my solution back in the Mustache.js GitHub issue ­čÖé Sample output: <h4>Test 1: Loop over array with count & access to existing template vars/fns</h4> <div data-date=”2021-12-03″>item 1/4: ant …

Uploading a folder via HTML form or cURL

References: Upload directory doesn’t send folder name with file Upload files with CURL Multipart formposts How to upload folder using HTML and PHP VGG Image Annotator: Issue 270 – Using Webkitdirectory to import multiple directories and maintain directory hierarchy Contents of folder to be uploaded (drawn using tree –charset unicode –dirsfirst -a -n in bash): …

Everyone Can Code

In today’s edition (Fri 04 Jul 2014) of the TODAY newspaper, there is an article in the Comment & Analysis section titled “How to teach children computer programming”. It┬ámentions that more and more countries are introducing programming, also known as coding, into their schools. This brought to mind the┬áfamous Youtube video┬áby code.org in Feb 2013, …