Mastodawn

FiXato Feb 18, 2023

I'm a Dutch father to a young BeardGrabber, with an interest in creative outlets such as code and (aquarelle) paintings, living in northern Norway, making a career change as a prep cook.

This is a secondary profile, trying out #Socialhome. For my primary account, please see my mastodon account @[email protected] (https://toot.cat/@FiXato).

Before following me, please interact with me in some way. Favourite or reply to posts of mine that interest you, or even just send me a message, so I know I'm not dealing with bots or mass-follow requests.

Commonly used hashtags:

#FiXatoPaints for my physical media paintings and #FiXatoPaintsDigitally for my digital ones.
#FiXatoDraws for my drawings made with other materials than paint. Distinction is not always very clear cut, and I may use them interchangeably.
#FiXatoWrites for my writing snippets.
#FiXatoPUNishes for my puns and other wordplays.
#FiXatoFoto for my photography.
#FiXatoCodes for my coding related posts.
#FiXatoStreams for my streaming announcements, should I find the time, energy, and hardware to get back into that.
#FiXatoFood for food pictures, recipes, and other food-adjacent stuff.
#FiXatoCooks specifically for food I've cooked.
#FiXatoBakes for baking-related food preparations.
#FiXatoCreative for all of the above creative work and more.
#FiXatoDrinks and #BeersFiXatoDrinks for my beverages related posts.
#FiXatoRecommends for general recommendations.
#FilmsFiXatoWatches for film reviews and other tidbits, and #SeriesFiXatoWatches for series instead.

#socialhome stream - Socialhome

All content tagged with #socialhome.

Socialhome

FiXato Jan 26, 2023

Here's a bit of #CSS you can use (at least on #GlitchSoc #Mastodon) if you want to display the contents of the #ARIA label attribute (which includes the image descriptions as well as the post's body text) instead of the post body.

I was hoping to do this on the img tag, so I could always display the image alts while retaining the post body with its original formatting, but apparently because the img tag is a 'replaced element', and thus the :after approach doesn't work: https://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements

I'm aware I can achieve this with a browser extension or some other way to insert javascript to manipulate the DOM instead, but I was just trying to see if I could achieve it with just CSS.

Anyway, here's the CSS, even though to me it ended up not being that useful as I prefer to retain the original formatting of the post body without basically duplicating its text:

/* Add the contents of aria-label after the status */
.status:after {
    display: block;
    content: attr(aria-label);
    white-space: pre-wrap;
    word-break: normal;
}
/* Hide the original post body*/
.status__content__text { display: none }

#FiXatoCodes

Does :before not work on img elements?

I'm trying to use the :before selector to place an image over another image, but I'm finding that it simply doesn't work to place an image before an img element, only some other element. Specifica...

Stack Overflow

FiXato Dec 28, 2022

Hmm, idea for a #BrowserExtension: a simple side panel that lists the current page's media grouped by type and sorted by filesize, perhaps with complete URLs and download buttons. I know the media can usually also be found through a developer tools view, but I kinda find that one too clunky for my needs.

onto the #FiXatoCodes #ToDo list it goes.

FiXato Nov 23, 2022

Top 20 instances where my followers and people I am following come from:

mastodon.social (79 total / 39 following / 51 followed)
fosstodon.org (33 total / 17 following / 22 followed)
mastodon.art (27 total / 19 following / 11 followed)
mstdn.social (13 total / 4 following / 11 followed)
hackers.town (12 total / 9 following / 9 followed)
mastodon.online (11 total / 0 following / 11 followed)
mas.to (10 total / 1 following / 9 followed)
mastodon.technology (10 total / 2 following / 9 followed)
icosahedron.website (9 total / 8 following / 5 followed)
tilde.zone (9 total / 5 following / 7 followed)
octodon.social (9 total / 7 following / 5 followed)
tenforward.social (8 total / 7 following / 3 followed)
mastodon.sdf.org (7 total / 5 following / 6 followed)
linuxrocks.online (7 total / 3 following / 4 followed)
toot.cat (6 total / 3 following / 4 followed)
mastodon.xyz (6 total / 3 following / 3 followed)
merveilles.town (6 total / 6 following / 0 followed)
nerdculture.de (5 total / 1 following / 4 followed)
chinwag.org (5 total / 4 following / 1 followed)
chaos.social (5 total / 2 following / 4 followed)

(Taken from the output of a little tool I am currently working on. Note to self, I should add percentages.)

#MastodonStats #FediConnections #FiXatoCodes

FiXato Aug 6, 2022

Updated my Mastodon (glitch-soc) tweaks user-script (which is currently just CSS tweaks) a bit to have a different fallback font as Verdana was causing issues with combining glyph composition. (See this thread for some debugging of that.)

Tweaks included:

Increase the width of the first and last column so there's more space for the text and media of your home timeline, and the expanded posts
Increase size of emoji / emotes when you hover over them, making it easier to see what they are supposed to represent
Change the font to Optima Nova LT Pro, Atkinson Hyperlegible, Roboto, Arial, or a sans-serif font.
Add a small purple bar above images that come without status content text, so you have some easy-to-click-on area to expand the post.

#Mastodon #GlitchSoc #MastoDev #userStyles #userScripts #FiXatoCodes #coding #CSS #stylesheets #Unicode #FontComposition

Show thread

FiXato May 23, 2022

This image has also made me realise that my game 'engine' does not currently handle objects that have 'moved' very well; it only assumes things can disappear, or change in-place... in the case of the arm in the drawing in the previous toot, the clickable area would only be in one relative location; i.e. if I make the clickable region closely around the arm on the left one, you'd have to click on the empty air on the right one. So I'd either have to put a bounding box over the shared area (the arm and the empty air), which is my current approach, or I'd have to add a second region and some how link both together.

#FiXatoCodes #FiXatoCreative #FindTheDifferences #coding

Show thread

FiXato May 23, 2022

Hmm, since the image similarity comparison is done via Structural Similarity Index on greyscale versions of the images, it unfortunately also means that sometimes changes aren't picked up because the changed object actually already blends into the background when their saturation (I think?) is similar to that of the background...

Maybe I can get around this by doing the contour extraction on the individual colour channels, and then merging the contours?

SVG image from https://freesvg.org/find-10-differences-vector-drawing, with minor adjustments.

#coding #opencv2 #Python #FiXatoCodes #FiXatoCreative #SVG

Find 10 differences vector drawing | Free SVG

Vector illustration of two images with 10 differences to find. Color drawing of a fun task for a boring day.

Show thread

FiXato May 23, 2022

Yay, I think I've made some significant progress on detecting the differences between two images with #opencv2, and extracting the contours to #SVG paths. :D

Now all that would be left is to merge the paths and the (bitmap) images into the template SVG I got. :)

#coding #FiXatoCodes #FiXatoCreative #cv2 #openCV #contourDetection #FindTheDifferences #Python

Show thread

FiXato May 23, 2022

#NoteToSelf: see if I can use https://pyimagesearch.com/2017/06/19/image-difference-with-opencv-and-python/ to find the bounding boxes of the differences between left and right images, and generate the SVG from that automatically.

#coding #python #svg #FiXatoCodes

Image Difference with OpenCV and Python - PyImageSearch

Learn how to compare two images by computing image differences and highlighting the differences between the images using OpenCV and Python.

PyImageSearch

FiXato May 23, 2022

This evening I started #coding on my "Find it" or "Spot the differences" kind of game, after seeing #BeardGrabber get rather excited over playing a similar thing with me through a YouTube video we came across, and not being able to find decent free alternatives.

Several hours later I think I have something quite presentable already. So, here is my Secret of Mana-inspired find-the-differences game which runs in your browser.

No third party resources; just some javascript for detecting clicks and toggling visibility of markers indicating successful guesses and updating the counters, and an SVG that contains the two pictures and the difference markers.

Can you find all 12 differences?

(It definitely could still use some improvements, such as maybe have an option of putting the images below each other instead of side-by-side, and looking into accessibility improvements, and making it easier to add your own images, but this #toy will primarily be for me and kiddo to enjoy.)

#FiXatoCodes #FiXatoCreative #SecretOfMana #FindIt #FindTheDifferences #SpotTheDifferences #game #games #gaming #GratisGames #IMadeAThing #browserGames #HTML #JavaScript

FiXato’s Find the differences! Secret of Mana inspired

Find the differences in this Secret of Mana inspired picture search.