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
-
When you show your girlfriend the CSS animation that took you 2 days to make and she gives you the most unimpressed look.
5 -
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-out7 -
>> 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)3 -
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.21 -
I know last year suddenly lots of animated login popped out.
NPM actually uses one... and it doesn’t look that good
14 -
Bottom navbar with great animation made with pure CSS. https://codepen.io/flavio_amaral/...
What do you thing?3 -
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....???"1
-
CSS Grid Clock (Animated)
A Clock with the power CSS Grid and animations the result is a beautiful and futurist approach. The demo shows two variants one with the full power of the animation and the other with real clock logic.
Check it out guys and tell me what do you think.
link: https://codepen.io/flavio_amaral/...
10 -
/*
"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.
12 -
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. ;) -
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.5 -
Let it snow! let it snow! Let it snow! A christmas tree made only with css. Codepen: https://codepen.io/flavio_amaral/...5
-
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...6 -
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.6 -
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. 🤦♂️3 -
A coarse implementation on Google’s Thanos effect (mobile version) on codepen with raw css and js.
😈 what do you guys think?
https://codepen.io/changx03/pen/...
The desktop one seem use a html2canvas package, which isn’t something I really interested.5 -
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 me8 -
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...15 -
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!2
-
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 BASTARD1
-
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!4 -
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.1 -
!rant
For the brave souls among you... Email On Acid have made an excellent PDF guide on CSS animation in email.
No, that's not a typo! 😮💥
https://emailonacid.com/images/...3 -
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!!!3 -
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 first1
-
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.5
-
Create an animation of tree traversals.
I could use any framework or library, but I just used plain html/css/js.
It was fun.2 -
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 -
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.
Top Tags
Weekly Rant
View