javascript - MadBob

MadBob

javascript

A collection of 13 posts

Acrobatic Chart Labels

Acrobatic Chart Labels

The web designer of a client of mine has been bold enough to design a multiline, multistyle label for the legend of a chart. And, as charts (and legends) are generated using a commodity JS library, the issue has been to enforce such hardy design. Luckily for me, the JS

Touch to Zoom

Working on a Linux t-shirts e-commerce, I added a simple "hover-to-zoom" feature on the main image displayed in each product's page (this one, for example): it is possible to just hover the mouse cursor to obtain a larger image, which moves accordingly to the mouse movements. Nothing new, here: it

The Wikipedia Graph

The Wikipedia Graph

I've spent the latest days playing around categories in Italian Wikipedia, in the aim to chart them and get a visualization of a semantic graph composed by more than 440K nodes. I've not reached any acceptable nor useful result, but it is worth to document what actually worked and what

Fixing Vite + Bootstrap + jQuery

Fixing Vite + Bootstrap + jQuery

At some point within the version 9 release cycle, Laravel assets' bundling process has been migrated to Vite: yet another bundler introducing breaks and incompatibilities with many JS packages, just for the sake of the Javascript Fatigue. Among the breaks introduced by Vite, the major one affecting my usual JS

Slide to Paginate

Slide to Paginate

An underrated issue with web pagination is the amount of accessible pages: when dozens are available, the selector becomes too large (and unusable on mobile) or incomplete (as not all pages are rappresented and selectable; sometime, just the previous and the next pages are available). So I tried to replace

Laravel Infinite Scroll

Laravel Infinite Scroll

I needed to quickly implement a very simple infinite scroll behaviour on a very simple page. Due laziness I got a look for any dirty hack suggested by random people on the internet to do that in Laravel, ready to be copied and pasted; I found a method using jScroll

Scrollable Calendar

In a web application of mine I've added a simple calendar to display time-based informations. Classic month view, colored cells, implemented with FullCalendar. Then, a user asked to not limit the view to a month at a time, but just display the current week and the next three or four.

Material Navigation

Recently I wanted to use the navigation transition suggested by the Material Design guidelines (the element into the list growns when selected) into a web page, but I've not been able to find any working example online. So I've managed to provide my own implementation. This is part CSS and

Check the Checkbox

I often use the "add and remove rows from a grid" pattern to permit handling groups of data, but today I had to manage a particular use case. Given a simple table

Overcomplicating Images

Sometimes a user's "It doesn't works" becomes a story. This "It doesn't works" was about uploading images on a website. A simple task to achieve, which becomes a little more complex when a live preview is required by the usual "I need images in every page! Big images! Always!" designer.

The Distro You Like

I need to get some practise with d3.js, the Javascript library used to display complex data and relationships, so tonight I've produced a first sample. It is a visualization of the popularity of Linux distros between 2002 and 2016, accordly to the data published by Distrowatch. The larger the

Fullscreen Navigation

Me: Well, it's 10 days to the deadline. Back-office panels are mostly done, but still I've seen nothing about design. Do you have some template, a mockup, a wireframe, a layout drawn on a Post-It...? Designer: Errr... Nope... But it have to be like this. How elegant! How smart! Do

WKT to SVG, the Hard Way

I needed an SVG with boundaries of "circoscrizioni" (administrative sub-municipal areas) in Turin (the city in which I live). The only thing I found was a CSV with the coordinates, in WKT format. "No problem, for sure a geo-hacker published some tool to convert the data!", I thought. I was