When you discover that new CSS animation and want to use it everywhere

When you show your girlfriend the CSS animation that took you 2 days to make and she gives you the most unimpressed look.

after making my first animation..

Designer - *showing an animation made with after effects* Lets add this really cool animation in our website

Me - Actually that will be very difficult with plain CSS. We will have to use some heavy animation libraries, and we don’t have that much time for the project.

*next day*
Designer - Found a better animation
*shows another animation*

Me - *awkwardly* This is more difficult to implement than the previous one

*next day*
Designer - What about this one
*shows yet another difficult animation*

Me - *ashamed and questioning my skills* ummm....

Designer - you know what, just add fade-in-out

>> this === rant
<< true

At beginning of this year, I only knew HTML, JS, and CSS so I just applied for offers like "Jr Apprentice Dev in Front-End"
In a interview call, the woman told me that they will send me a test asking about my JS and HTML5 knowledge.
When I look in my inbox, the mail subject says "Back-end Test".

Then I call the woman:

Me: "Hello, I have received the test mail, but maybe it's wrong. I applied for a Front-End position and the test is about backend! "

She: "Do you have skills in JS and HTML5?"

Me: "Yes!, and CSS3"

She: "Well, the test is about that. JS, jQuery, and HTML5"

Me: "..."

Me: "Sorry, that languages are Front-End. In the subject say 'Back-End' and Back-End is PHP, SQL, MySQL, Java, .Net... I don't know nothing about that. I only know HTML, JS, CSS."

She: "It's the same"

Me: "I sorry but it's not the same. Fron-End is client-side, what users sees. Animation, colors, FXs, buttons, forms... And Back-End is server-side, what users doesn't see."

She: "Well, JS, HTML, and CSS is backend for us. We call it that way too"

Me: "Sorry but that is wrong. I invite you to read some basic info. Now I am confused"

Of course that I am not confused. That idi0t was wrong.
Perhaps recruiters should take some info about areas where they are recruiting... (:T)

Hello everyone.
I've seen people doing story/rant to introduce themselves, and I never done that, probably because I'm terrible at doing so, and the more people their is, the more complicated it gets for me. 😥
Usually I try to blend in, and be the same color as the wall. But I want to try something different, so bear with me as I go through this painful process. 😶

So here I am, a lonely dev, who only have friends through a screen, living in a dark room only lit by green leds (tho sometimes it turn red/pink), lost in a small street of Paris. I usually avoid posting on social media, but here on devRant, I feel alright, somehow, it feels like home... 🤗

Started developing at 14 with html and php, then css and js (with the later still being a mystery to me). 🤔
I never really had a real job. Had 3 month as an intern into a human size web agency, and despite the recommandation they gave, I didn't like the job... Dropped from school and self learned everything I know today. Did a certain amount of personal projects, but no publication for lack of confidence. As of today, I'm 28. 🙂

Then a year and half ago, I changed to c# with unity3D, and I had a ton of fun since. 😄
Learned cg effect, texturing, 3d, a bit of animation. I'm working on a project of indi game with two people that are my only social interaction outside of my family, and now devRant. I don't mind being lonely tho. 😯

But this community is awesome, so I'm glad I stumbled across that sad face on the play store. 😄

Also it's 7:30am, I didn't sleep because of this post, I'm tired, and yes I'm an idiot.

I know last year suddenly lots of animated login popped out.
NPM actually uses one... and it doesn’t look that good

For other just beginning web devs: spending hours fiddling over a bunch of CSS layout/formatting/animation to make a small widget look just right... Then showing someone your 500ms animation and they say "yeah and....???"

Static HTML pages are better than "web apps".

Static HTML pages are more lightweight and destroy "web apps" in performance, and also have superior compatibility. I see pretty much no benefit in a "web app" over a static HTML page. "Web apps" appear like an overhyped trend that is empty inside.

During my web browsing experience, static HTML pages have consistently loaded faster and more reliably, since the browser is immediately served with content useful for consumption, whereas on JavaScript-based web "apps", the useful content comes in **last**, after the browser has worked its way through a pile of script.

For example, an average-sized Wikipedia article (30 KB wikitext) appears on screen in roughly two seconds, since MediaWiki uses static HTML. Everipedia, in comparison, is a ReactJS app. Guess how long that one needs. Upwards of three times as long!

Making a page JavaScript-based also makes it fragile. If an exception occurs in the JavaScript, the user might end up with a blank page or an endless splash screen, whereas static HTML-based pages still show useful content.

The legacy (2014-2020) HTML-based Twitter.com loaded a user profile in under four seconds. The new react-based web app not only takes twice as long, but sometimes fails to load at all, showing the error "Oops something went wrong! But don't fret – it's not your fault." to be displayed. This could not happen on a static HTML page.

The new JavaScript-based "polymer" YouTube front end that is default since August 2017 also loads slower. While the earlier HTML-based one was already playing the video, the new one has just reached its oh-so-fancy skeleton screen.

It would once have been unthinkable to have a website that does not work at all without JavaScript, but now, pretty much all popular social media sites are JavaScript-dependent. The last time one could view Twitter without JavaScript and tweet from devices with non-sophisticated browsers like Nintendo 3DS was December 2020, when they got rid of the lightweight "M2" mobile website.

Sometimes, web developers break a site in older browser versions by using a JavaScript feature that they do not support, or using a dependency (like Plyr.js) that breaks the site. Static HTML is immune against this failure.

Static HTML pages also let users maximize speed and battery life by deactivating JavaScript. This obviously will disable more sophisticated site features, but the core part, the text, is ready for consumption.

Not to mention, single-page sites and fancy animations can be implemented with JavaScript on top of static HTML, as GitHub.com and the 2018 Reddit redesign do, and Twitter's 2014-2020 desktop front end did.

From the beginning, JavaScript was intended as a tool to complement, not to replace HTML and CSS. It appears to me that the sole "benefit" of having a "web app" is that it appears slightly more "modern" and distinguished from classic web sites due to use of splash screens and lack of the browser's loading animation when navigating, while having oh-so-fancy loading animations and skeleton screens inside the website. Sorry, I prefer seeing content quickly over the app-like appearance of fancy loading screens.

Arguably, another supposed benefit of "web apps" is that there is no blank page when navigating between pages, but in pretty much all major browsers of the last five years, the last page observably remains on screen until the next navigated page is rendered sufficiently for viewing. This is also known as "paint holding".

On any site, whenever I am greeted with content, I feel pleased. Whenever I am greeted with a loading animation, splash screen, or skeleton screen, be it ever so fancy (e.g. fading in an out, moving gradient waves), I think "do they really believe they make me like their site more due to their fancy loading screens?! I am not here for the loading screens!".

To make a page dependent on JavaScript and sacrifice lots of performance for a slight visual benefit does not seem worthed it.

Quote:

> "Yeah, but I'm building a webapp, not a website" - I hear this a lot and it isn't an excuse. I challenge you to define the difference between a webapp and a website that isn't just a vague list of best practices that "apps" are for some reason allowed to disregard. Jeremy Keith makes this point brilliantly.
>
> For example, is Wikipedia an app? What about when I edit an article? What about when I search for an article?
>
> Whether you label your web page as a "site", "app", "microsite", whatever, it doesn't make it exempt from accessibility, performance, browser support and so on.
>
> If you need to excuse yourself from progressive enhancement, you need a better excuse.

– Jake Archibald, 2013

/*
"Not wk135, but blah blah blah"
Please don't misuse wk135 (Sorry)
It's about coding tests
Thank you. */

=>
A company took their technical test on this really weird website. There was a Windows Narrator guy's voice giving instructions while a timer was running. I had to flash my ID to the webcam and then fit my head on an outline on the screen. It was for a web dev position. I had to speak into the microphone to answer the Narrator's questions and then send the video to them. The questions were weird and hypothetical, mostly. I just thought that their process was dumb and unnecessary.

=>
I don't like aptitude and algebraic tests. One company, I remember, had their test on Google Forms. For some multiple choice questions, they put check boxes instead of radio buttons. So, I could just blaze through it selecting all options. Some of the questions had their first option as "All of the above" 🤔. Fortunately, I didn't pass the test.

=>
The company I'm interning with, starting from next month, had a good interview process. They asked me questions on JavaScript, CSS, and a few on algorithms and data structures. I was also given a task where I had to make a css animation of trees. I'm glad they didn't have an algebra entry test.
😊

Pull-to-refresh is useless.

If you are a mobile app developer, please get rid of pull-to-refresh. Your users will thank you.

I have the impression that mobile app developers choose to implement the pull-to-refresh gimmick just in order to make their app comply with a design trend. It seems like a desperate attempt to appear "modern" and "fancy", not because of the actual usefulness of the gesture.

Pull-to-refresh is one of those things that are well-intended but backfire. It appears helpful on first sight, but turns out to be a burden.

It takes effort and cognitive strain to avoid triggering a pull-to-refresh. The user can't use the app relaxed but has to walk on eggshells.

Every unwanted refresh wastes battery power, mobile data (if it is an Internet-connected app), and can lead to the loss of form data.

To avoid pull-to-refresh, the user has to resort to finger gymnastics like a shorter swipe for scrolling up or swiping slightly up before down. Pull-to-refresh could even be triggered while pinch-zooming in or out near the top of a page, if the touchscreen does not recognize one of the two fingers.

Pull-to-refresh also interferes with the double-tap-swipe zoom gesture. If one of the two taps are not recognized, a swipe-down to zoom in can trigger a pull-to-refresh instead.

To argue "if you don't like pull-to-refresh, just don't use it" is like blaming a person who stepped on a mine, since the person moved and the mine was stationary.

A refresh button can be half a second away in the menu bar, URL bar, or a submenu, where it is unlikely to be pressed accidentally. There is no need for a gesture that does more harm than good.

Using a mobile app with pull-to-refresh feels like having Windows StickyKeys forcibly enabled at all times. The refresh circle animation sticks to the finger.

If the user actually wants to refresh, pull-to-refresh is slower than a refresh button in a menu if the page is not at the top, meaning pull-to-refresh is useless as a shortcut anyway if the page is in any other position than the top.

An alternative to pull-to-refresh is pull-for-details. Samsung did it in some of their apps. Pulling down against the top reveals additional information such as the count and total size of selected items.

If you own a website, add this CSS to make browsing your website on the pre-installed Android web browser not a headache:

html,body { overscroll-behavior: none; }

Why is this necessary? In 2019, Google took the ability to deactivate the pull-to-refresh gesture on their Chrome browser for Android OS away from users. On Chrome for Android, pull-to-refresh can only be disabled on the server side, not the user side. The avalanche of complaints? Neglected.

Good thing several third-party browsers let the user turn off this severe headache.

My most intense day was in the company at the day we had to publish a website containing lots of jQuery & CSS animated stuff.
We planned to go live at 3pm but due to the fact that before lunch time there began to appear more and more styling and animation problems, we went live at around 9pm. I was sweating and nervous as hell the whole time.
At least my boss and I went to drink a few beers right after that. ;)

Me: Codes a really cool website animation in javascript for 2 days.

*Opens youtube, random tutorial for the same animation in CSS in 30 min.*

Me: * Cries in the corner. T-T *

So apparently Firefox can't handle (quick) animations from opacity 0 to opacity greater-than-zero and glitches around. Instead you need to animate starting from something greater than 0, like 0.001.

I had to debug this shit and it just adds to my reasons to dislike this browser.

Does anybudy still use Adobe Animate/Flash for web animations?

They teach it at my school and at the moment I see no reason to use it. I'm probaly faster writing it by hand in CSS / JS, and it will run smoother that the animate files...

the more i learn about web dev, the more i realise the reason for its mess up . There are 2 major problems in it : the people who create various important concepts and tools for web dev were 1) working on it without any collaboration and agreements on the philosophy and 2) were too stubborn on their ideology i guess.

There is no limitation to anything's functionalities, and the limits that are "defined" are badshit crazy. for eg:

====================================
HTML creator : "I am gonna make a language that would provide a skeleton to web page. it will just have the text and basic markers to let the scripting and styling engines/languages know which text is supposed to be rendered and how.
It won't provide any click or loading functionality.

someone: "So i guess opening a page or loading an image would be handled by JS or other programming language? also, bold , italic or division would be added via CSS?"

HTMLguy : Nah, my html engine would ALSO do that.

someone : what , why? won't that just be stupid and against your philosophy?
HTMLguy : WHAT? am too awesome, can't hear you
w3c , 50 yrs later : sorry can't change this, gotta support the 50 yrs of web dev and billion sites

=================================

CSS guy: I am gonna make the world's best beautifying stylesheet language to provide colors, styling, fonts and backgrounds to a page. every loadings and clicks would be handled somewhere else

Some1: cool, then clicks, hover and running of animation would be handled by JS only

CSSguy :Umm, i guess i could handle those.

Some1 wha-?

CSSguy : Thankyou Thankyou Thankyou for the nobel price!

====================================

JS guy : I am gonna make a god web programming language! It can do everything: add/remove html tags, add styling, control animations, control browser, handle clicks , perform operations, everything!

some1: cool! you must be making very large programming language with lots of modules.

JS guy: No! i am gonna keep it small. no built in classes and file imports! just use the functions directly. if someone wants the additional lib functionality, install them on your server

some1 : innovative! what's typeof NaN ?

JSguy :shut up.

So our company wants us to start learning/sharpening our Python skills for work. We signed up for CodeWars and ran through our first Kata today. I'm excited to learn, but I don't have any actual experience with anything but HTML/CSS and super basic JS for just things like animation... I feel like such a fucking moron trying to work through this Kata. Because our manager wanted us to only spend like 15-20 minutes on it. I spent over 4 hours trying to figure out the right place to even start, even with reading documentation and trying to find similar examples online and after 4 headsmashingly long hours I couldn't even get an idea of how to tackle the problem.

Watching python videos to try and figure this out...

I was designing and building a portfolio page for a photographer. He mostly does black & white portraits with either a white or black background so I had the idea of splitting the page into a light and dark side (Star Wars joke definitely intentional).
I worked waaay too long on a *diagonal* CSS wipe animation when the user switches sides and I was quite proud of it.
Half a year later we realize that basically no one has noticed the switch button. Analytics confirmed it was less than 4% of visitors. 🤦‍♂️

Gna gna gna Chrome you stupid sucker!

I have some objects that I animate using JS triggered CSS translate with a transition duration. Why on earth would Chrome think it's a good idea to apply that duration also after the animation when I zoom the whole page?!

OK, slap a transition end handler on the object and reset the transition duration when the animation is done. But FF doesn't have that problem in the first place, and even IE works as intended!

I fucking hate css. This animation is a fucking dirty hack on top of a dirty hack on top of a selector that looks like regex that only works in chrome

Fuck me

Chrome has failed me. At least, I was disappointed.
So, I have been working with an animation studio to make some changes to their Website, typical WordPress website.
Nothing wrong there, I have a copy of their WP site running on a localhost so I can make changes & tests before pushing to bitbucket (then to be deployed). Now, a lot of the changes I have been making are minor css, html & js changes. Mostly FrontEnd changes.
The frustration came when working on a couple JS sheets; I would change some CSS and JS, save the files then go over to Chrome to test them out.
Open the localhost and test the changes, CSS changes worked! Looks good, but for what ever reason the JS functionality would not change. 2 ish hours of frustration, seeing only half of these changes working I decide to step out for a coffee break. Then I remembered; Chrome has a nasty habit of caching files it has used before for later use. Turns out it was using some older versions of the files that it had cached.
Thankfully I remembered this; only ended up being 2 hours of frustration. For anyone else using Chrome for development; keep this in mind.

I applied for a job as Frontend Dev, went to an interview and was rejected... Well they offered me to come to another interview for another position and if I'm lucky I will do animated and interactive Banners with CSS animation and JS in the future! So freaking awesome!

you call your self master of CSS and the only thing you are good at is using frameworks always for animation and every little task. you can't even do simple animation with css. FUCKING BASTARD

Going into a web animation class hoping to finally learn CSS animations as well as how SVGs work (I never knew)

Ending up finding out that the prof is using frameworks like Animate.CSS. FUCK.

I didn't pay thousands of dollars to learn the frameworks I have been using for the past four years!!!

i am currently learning react and i find it easier to convert vanilla html css websites into react than writing a website in react from scratch. while writing a website, i am now accustomed to writing mobile first flex based css that looks nice , and handles most of the animation, show hide based stuff by classes. whereas in react if i start thinking about how states and context are going to work with it, i end up going bacl to the imported css to get it to look nice at first

Create an animation of tree traversals.
I could use any framework or library, but I just used plain html/css/js.
It was fun.

If kinda curious about the Blazor Framework of Microsoft about the c# replacement. I'm a designer heavily concern about animation on the web, for what i have know till this day. Animation on the web was made by CSS and JS, and if c# replace js. That means all the toys libraries will be gone and we have to reinvents the wheel all over again.

Chrome handles CSS animation on an SVG element with 500 nodes like a champ with an SVG graphic with outline animation over it.

Firefox barely animates the SVG then has tearing issues when a part of the SVG leaves the viewport and re-enters. Annoying AF and now a changed design.

used bootstrap, and the found a prety elastic side menu animation, turned out it can'twork with the best css fw.. fml