Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API
From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
-
Holy shit firefox, 3 retarded problems in the last 24h and I haven't fixed any of them.
My project: an infinite scrolling website that loads data from an external API (CORS hehe). All Chromium browsers of course work perfectly fine. But firefox wants to be special...
(tested on 2 different devices)
(Terminology: CORS: a request to a resource that isn't on the current websites domain, like any external API)
1.
For the infinite scrolling to work new html elements have to be silently appended to the end of the page and removed from the beginning. Which works great in all browsers. BUT IF YOU HAPPEN TO BE SCROLLING DURING THE APPENDING & REMOVING FIREFOX TELEPORTS YOU RANDOMLY TO THE END OR START OF PAGE!
Guess I'll just debug it and see what's happening step by step. Oh how wrong I was. First, the problem can't be reproduced when debugging FUCK! But I notice something else very disturbing...
2.
The Inspector view (hierarchical display of all html elements on the page) ISN'T SHOWING THE TRUE STATE OF THE DOM! ELEMENTS THAT HAVE JUST BEEN ADDED AREN'T SHOWING UP AND ELEMENT THAT WERE JUST REMOVED ARE STILL VISIBLE! WTF????? You have to do some black magic fuckery just to get firefox to update the list of DOM elements. HOW AM I SUPPOSED TO DEBUG MY WEBSITE ON FIREFOX IF IT'S SHOWING ME PLAIN WRONG DATA???!!!!
3.
During all of this I just randomly decided to open my website in private (incognito) mode in firefox. Huh what's that? Why isn't anything loading and error are thrown left and right? Let's just look at the console. AND IT'S A FUCKING CORS ERROR! FUCK ME! Also a small warning says some URLs have been "blocked because content blocking is enabled." Content Blocking? What is that? Well it appears to be a supper special supper privacy mode by firefox (turned on automatically in private mode), THAT BLOCKS ALL CORS REQUESTS, THAT MAY OR MAY NOT DO SOME TRACKING. AN API THAT 100% CORS COMPLIANT CAN'T BE USED IN FIREFOXs PRIVATE MODE! HOW IS THE END USER SUPPOSED TO KNOW THAT??? AND OF COURSE THE THROWN EXCEPTION JUST SAYS "NETWORK ERROR". HOW AM I SUPPOSED TO TELL THE USER THAT FIREFOX HAS A FEAUTRE THAT BREAKS THE VERY BASIS OF MY WEBSITE???
WHY CAN'T YOU JUST BE NORMAL FIREFOX??????????????????
I actually managed to come up with fix for 1. that works like < 50% of the time -_-5 -
<!doctype confusedRant 😕>
Plot: we need to release our website in two weeks which holds at least a thousand pages. All these pages are manually migrated from the old website, which doesn't have a database. Current status: 650 pages/1000 are completed, 40 different templates need to be adapted. I'm alone on these templates, my colleagues create the pages and fill the new database
So I'm working on the templates a WebDev coded for our website on a licensed CMS, and had this decently simple html block that looks like a square and consisting of roughly this (Emmet style):
a.area > blockquote > strong.title + p
After adding another <a> element inside the p, I noticed that my <a> wouldn't display and bust the whole look of the square.
Just for more details, the CSS the dev made is ultra specified (meaning each element is too precisely "described" : div.class .child .child2 { /* styles */ } when it could be .class .child2 for example). Also, the templates he made need to be compatible with any "module" the website has, thus the need of this high specificity
So I fired up the DevTools to check what happened, and had:
Expected: a.area > blockquote > strong.title + p > a
Actual result: some new a.area were wrapping the <strong>, the <p> and the <a> I just added. The source code was not showing any of this but just the rules I initially wrote - the expected result
Wtf?! I thought the JS the dev made was adding elements. I disabled said JS, and bam, these a.area were still wrapping everything!! What black magic would add these stupid tags I never asked for.
So I went looking in the CSS files in case some wizardry was happening, but everything was OK.
I tried changing my structure, changing tag (swapping a.area to p.area or without .area), HTML just said "nope, have those please".
Eventually I rewrote my own module out of frustration after three quarters of an hour fiddling with this stupid "module". I hate losing time for such shenanigans and under a lot of pressure because of deadlines.
Still haven't figured why those <element>.area would wrap everything out of nowhere...3 -
OK, I could maybe write a quick app in C++ and cross compile it so I can send it to my friends who use windows, what is wrong with you I am ashamed for us all.
But why do that? Let's just go the EXTREME route and do things in a very inappropriate way that is natively """portable""" so we can say that (((It Just Works™))).
So if you haven't guessed already, it's 100% js rawdogging and I'm doing the graphics in SVGOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO uoykuf OoOOOOOOOOOOOOOOOOOOOOOOoOOOOOOOOOOOOOOOOOOOOO it's not so bad but here's things I've learned:
If you're using inkscape to convert your lazy 8x8 pixels per frame spritesheet.png into an svg file, and don't know how to use inkscape, you have to stack each frame on top of one another. Yes.
Erase the layers, erase everything that isn't the paths you want. Also erase invisible paths generated by the pixelart mode of the trace bitmap thingy, sometimes these ghosts exist for mysterious reasons.
Then, neatly stack everything into one square big enough to hold all the frames, select all the frames, resize to selection. OK, now double check that the names of your layers werent changed to generic path94958509 out of the fucking blue AGAIN, all good.
Also double check that inkscape hasn't changed the name and extension of your output file AGAIN then make sure inkscape hasn't changed the dimensions of your export AGAIN and then AGAIN and AGAIN...
OK, so you've exported your svg, now we start doing even more stupid and questionable things. We go into the file and delete the header, specially the comment at the top that clearly states this file was made with inkscape, because my experience was so DELIGHTFUL that I very much require some abstract form of petty vengeance. Also a cigarette.
Hold on. Patiently erase useless tags such as defs and g and shit, all you want is the svg and paths. Then, painstakingly convert each <path id=$ .../> into <symbol id=$> <path .../>.
Why didn't I write a perl script for this part? Actually that's a good idea, goes on the todolist, I didn't write a todolist app though, because I have a textfile. I mean, just what kind of negative IQ troglodyte would do something like that? ;>;>;>;>;>;>;>
Anyway, now utilize your black-magic-infused devilspeak q$p e r l$ script to fasten together an entire webapp into a single html file, all done with duct tape and clown jizz of course, see previous rant for VERY technical details. Also I jjust time traveled and wrote the previous paragraph while writing this one everything is out of order oh noes.
No matter it works now me is happiee.
I got heart icon for health bar but no health bar implemented not aproblem.
Uh also outlines. Here, let's keep it topical, this is rom.rol:
```rol
# vars:
$:%peso;>
let sprite,"$.elems.srpite";
$:/peso;>
# css:
$:%asis;>
path {
· stroke: $080808;
· stroke-width: 0.1;
· stroke-linejoin: round;
· paint-order: stroke;
}
$:/asis;>
# html:
$:%asis;>
<svg width="2.1166811mm" height="2.1166601mm" viewBox="0 0 2.1166811 2.1166601" xmlns="http://www.w3.org/2000/svg">
<symbol id="{$$.%sprite}_hp_0">
<path d="M 0.264594,0.26458 V 0.52916 H 1.1e-5 V 0.79375 1.05833 1.32291 H 0.264594 V 1.5875 H 0.529177 V 1.85208 H 0.793761 V 2.11666 H 1.058344 1.322927 V 1.85208 H 1.587511 V 1.5875 H 1.852094 V 1.32291 H 2.116677 V 1.05833 0.79375 0.52916 H 1.852094 V 0.26458 H 1.587511 1.322927 V 0.52916 H 1.058344 0.793761 V 0.26458 H 0.529177 Z"/>
</symbol>
<!--NOW DO THE OTHER NINE FRAMES-->
</svg>
$:/asis;>
```
so now I can say (in base.rol):
```rol
$:%peso;>
lib "[based]";
rol "rom.rol";
let hud,"$.elems.hdu";
$:/peso;>
$:%asis;>
<svg viewBox="0 0 23.283329 2.1166601" width="16%" height="16%" fill="#880808">
<use id="{$$.%hud}_hp" href="#{$rom.%sprite}_hp_0"/>
</svg>
<script>
document.getElementById("{$$.%hud}_hp").setAttribute('href',"#{$rom.%sprite}_hp_" + n).
</script>
$:/asis;>
```
Where `n` is just some frame counter this is duct tape now request animation frames REQUEST THEM YOU MUST.
Anyway this is immensely stupid but it made me giggle so I share.
AAA RPG with full svg graphics when?1
Top Tags
Weekly Rant
View