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
Search - "css animations"
-
A sidebar.
Literally just a sidebar.
And yes, this was in Hell.
Its code was spread across at least 40 files, and it used a bunch of freaking global variables to unfurl accordion sections, hide other sections/items, highlight the active item, etc. These were set (and unset!) in controller actions, so if you didn’t unset one, it remained open and highlighted until another action unset it.
Some of the global variable checks (and permissions checks) were done in the individual views, some outside of the `render` statements that include them. Some of them inherited variables from the parent, some from the controller, some from globals. Getting a view to work was trial and error. Oh, and some had their own inline css, some used css classes.
Subsections were separate views, so were some individual items, both sometimes rendered using shared templates, and all of the views and templates had the exact. same. filename. (They were located in different directories, and thus located automagically via implicit relative paths.) So, it was a virtually endless parade of`render partial => “sidebar”`. Which file does that point to? Good luck figuring it out!
Also, comments in several places said adding a new section required a database migration. I never did figure out why.
Anyway, I discovered this because I had an innocuous-sounding ticket to rearrange the sidebar, group some sections/items under different permissions, move some items to another menu, and nest some others differently.
It took me two bloody weeks, and this was when I was extremely productive every day.
Afterward, I was so disgusted by it that I took a day and removed every trace of the sidebar I could find, and rewrote it. I defined the sidebar in a hash, and wrote a simple recursive builder to generate the markup. It supported optional icons, n-level nesting, automatic highlighting of the current item and all parent nodes, compound and inherited permissions, wrapping of long names, hover and unfurl animations, etc. Took me a couple hundred lines of Ruby at the most, plus about the same of css.
Felt so good to remove that blight.5 -
Fuck Firefox's CSS engine! Why is it so fucking buggy?
I needed to position some elements in a circle, so I used Math.cos(Math.PI / 2) to calculate their x positions. So, mathematically speaking, that should return 0, right? Turns out in JS it doesn't (because fuck precision). It actually returns 6.123233995736766e-17 and I was using that in the style, like top: offset + that.
In chrome it was working perfectly, but in Firefox all hell broke loose. All animations stopped working, scripts stopped working, demons were eating people alive.
And I lost hours hunting that down. My fault because I should have tested it immediately on other browsers, but fuck!11 -
Complete and total rant:
You know what fucking confuses the holy fucking shit out of me? DESIGN
I have MAD respect for motherfuckers that spend their days tailoring shit away in CSS, writing custom animations and toggles in JS and ensuring that their HTML is pristine as fuck. I really do and in my opinion they should b getting mad props from everyone, because if they so decide to learn GOOD server side scripting then they are most definitely on their way to create some awesome functional and beautiful shit.
But...
I am not a designer by any means of it. And I know that shit is supposed to look good and work across a multitude of devices. Doing something like that takes me a couple of lines of code (granted, after hours of work that is) that may take a designer way less.
But why oh why do I see THOUSANDS of lines of CSS code for shit that does not take me half the amount of work that it takes other people?
Like seriously. I am trying to emulate the menu that university of Chicago uses(as an example for a lil design practice cuz i suck at it) and looking into their CSS I see thooooousands of lines of code to do something that I did in about two hundred.
So wtf man, do I suck so hard that I am missing some serious shit? wtf is happening? This confuses me, because in my mind it should take me just about as much work as it takes them right?
AGAIN MAD RESPECT FOR DESIGNERS -- If you are a designer reading this please tell me wtf is happening14 -
Okay, here we go...
I need a new Programming language.
Coming from a Python background, so go easy on me. x.x
C# can do what I need, but it's quite complex for me. I'd rather something simplier is possible.
Brief summery:
So, I've come to realize that I wont be able to make my Python game(ExitCode) as powerful and fancy as I'd like. And I decided that I should just start from scratch before I go any farther. (Though, I might go ahead and stabilize the current versions on GitHub)
Here's what I need:
Powerful UI support;
* I am re-creating an OS as my game. I will need to drag and position windows and icons in-game, as you would in a real OS.
* Needs to support Ads, Animations, Images, Videos, Sound, and any other media I might need?
* Preferably can render HTML & CSS (Though, this is just a preference)
Support for reading JSON and/or XML files SAFELY (XML had major vulnerabilities in Python)
Supports Windows, but I would prefer cross-platform-ability
Easy to compile
I am not really looking for a game ENGINE. I am looking for a language to create a game in from scratch, that has powerful UI libraries.
In the end, the game will be Free, and Open Source. (Always!~)undefined yeah python was a bad idea shouldn't have trusted a snake let the personal biases roll in come at me bro we will take over the world! maybe.. thats great but can it run crisis? programming languages47 -
made a terminal themed portfolio website in 5 hrs
I used GitHub pages to host the website and name.com for the domain from the GitHub's student dev pack
I was able to implement basic typing animations using css although my website doesn't take any user input
Website : https://satvik.ninja
Repo ; https://github.com/satvikDesktop/...8 -
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 -
I might be fucked up, but I have a tendency to gravitate towards the shit that everyone else dislikes for the sake of knowing if their bias against is actually because shit is truly fucked up or if shit is legit plain WRONG.
From all technologies that I have worked with professionally I can count:
Java(currently in the form of old JSP services for an "enterprise level application")
Java for Android development - i was the lead engineer for a mobile project
Swift with IOS dev, same gig as the above.
C++ for Android development in the form of OpenCV with Java as well.
Javascript in all possible forms, basic input validation, ajax services, jquery datatables, jquery animations and builders.
Css/sass heavily
Clojure for an ldap active directory application
Python for glue scripts
Classic ASP with JScript and VBScript
VB Net forms
C# For ASP.NET MVC
Bootstrap for multiple intranet frontends
Node+Express for a logistics warehouse management tool
Ruby on Rails freelancing small gigs
Php in all ways possible from complete standalone php apps to Laravel and just php+composer apps aaaaall the way to wordpress
Django consulting
I have found that the one that I dislike the most is wordpress. And the one that I like working with the most is Node. Don't know why, i just do really fucking like messing around with Javascript, the language has changed a fuckload throughout the years and continues to increase and change. It was my first scripting language following a stint in me trying to learn cpp way when i was starting and royally FAILING
Never really got the hate for it, even when I used JScript with classic ASP i just enjoy working with Javascript a lil too much. And from all the above mentioned stacks safe from Php is the one, or one of the ones in which i don't royally suck :V3 -
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, 20139 -
Phew... okay, I think it's time for me to go to bed. I just coded two webpages in HTML/CSS/JavaScript/PHP, everything works great and I also added some smooth animations when you hover over parts of the page :D
Basically... this last part (a.k.a. "smooth animations") was useless to this exercise, but... y'know... i was interested in experimenting it.
The more I code, the more I think I should be a design guy, lol.
Anyways... jeez, I really should go... it's 2:50 AM right now @.@
Goodnight y'all... 💙
( ¯﹃ ¯๑) zzZ...1 -
Why do people feel so compelled to create their own custom components when the component library you're already using HAS ONE ALREADY?!
You can change the styling and animations using CSS and props. Stop building buggy shit from scratch.7 -
Ive never used vim. In my life. I've never had the need to.
It was only yesterday while I was installing a new relic plugin to my MySQL server when the plugin installed opened vim for me to add some configurations. Took me about a minute to add the configs, and another 20 minutes to figure out how to quit vim.
Gotta say that I'm more comfortable making HTML websites with pretty CSS animations in sublime text than working in VIM!!! 👀5 -
A simple poll
Let's say there is a program or whatever sort of thing that does the exact same thing except the gui...
1. A shitty gui with default buttons, etc but with ok paddings and margins so that it is a bit usable (if it is a web app, no css) -- 5MB
2. A super cool 1337 h4X0R looking gui with awesome animations -- 100MB
What is your choice?20 -
What a coincidence. JQuery gets an update to 3.4.0 - and I removed the JQuery dependency that a mid-sized widget (15 kB minified) needed.
Rewriting the selector, css and trim stuff was easy. Each, children, append, empty, remove and extend were not too hard. Animations gave me more headache, but in the end, JS triggered CSS transitions worked nicely.
I was able to shave off the usual 30 kB over the wire for JQuery, and the whole thing seems snappier. Finally, I'm at vanilla everything!
Of course, it's largely due to JQuery's merits that vanilla JS is where it is today. So, thank you JQuery, and farewell.3 -
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 -
Busy playing with HTML5's history api and content replacing. Got the timing on css animations perfectly so the transitions between pages are smooth as butter. Dont even notice the pages changing aside from the url. Shits pretty cool1
-
UI designers! Please understand that whilst animations are pretty, people don't want their webpages, apps and game UI elements jumping around when they're trying to interact with a button.
So Firefox for Android recently received an update that, stripping out 90% of the browser's functionality aside, has two glaring issues:
1_ about:config got disabled, so any options that, say, scaled webpages to not look like they're made of Duplo are now totally ignored. Enjoy your toddler websites!
2_ The search bar auto-hides. On every scroll. It changes the viewport size when it hides, making webpages frantically jump around and change CSS rules. There's no option to turn off auto-hiding. Twitter already jumps around like a rabbit on the strongest crack carrots can buy, and they somehow made it WORSE.
F%^&7 -
I just styled something that appears to be an "parent" style change when a certain "child" was hovered.
Vanilla CSS. I think I've seen it all now.
My brain is spaghetti right now 🤪1 -
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 -
Started an open source css library, consisting of class based animations
Check it out and please suggest some points to make it more better.
VOV.CSS
https://github.com/vaibhav111tandon...4 -
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!5 -
I thought I knew about CSS but now I'm working with animations and learned about composite layer and how CSS is rendered...1
-
Started playing around with HTML and CSS when I was about 8. Tried JavaScript but it never stuck. Started to learn a bit of Python when I was about 13 and enjoyed it, but never applied it to anything other than some maths. Used some basic ActionScript in Flash animations. Wrote some simple VBA in Excel. Learnt Matlab during my Engineering degree. Now I use Mathematica for my PhD work, Python for fun and useful bits of software for myself, and the occasional bit of PHP and whatever else I need at the time to get something working.
-
Why are CSS animations so funny? I always have the best laughts when some page or element spin uncontrollably for no reason6
-
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 -
The most frustrating part with css is like seeing people make animations on codepen where a fkin panda closes eyes or moves around,
And you are like how to Center align this box or this Dam image keeps rolling around the screen -
Setting up some CSS animations and ended up with the value "infinite ease" and now I am having an existential crisis.1
-
Dev goals for 2022? Best and worst DX in the past?
Wish to prioritize customers with useful business goals who are open to sustainable web dev, usability and accessibility.
Want to use even more CSS and find a way to use new features like parent selectors without sacrificing compatibility.
Continue learning and using Symfony, but also continue with my full-stack side project using JS or even better TypeScript for the backend also for the backend.
Best developer experience: getting new customers for my own business after leaving a company last winter.
Worst developer experiences:
Corporate customers with large budgets and design agencies seem to fancy all the antipatterns I thought bad and obsolete, like carousel content, animations everywhere, and autoplay videos on the home page. Poorly written, poorly thought, and sometimes contradictory, requirements. Customers and agencies changing their mind halfway through a project.
"Agile" daily meetings, not giving devops necessary repository permissions, and making Webpack mandatory for no real reason.2 -
!rant
I work currently on a little startup and something that bothers me it's that even though I've been telling them I'm a Backend developer, they want me doing Frontend.
So, I beg to you, fellows, any recommendations on books or tutorials to learn CSS good practices, design, scrolling animations and whatsoever?4 -
{TL:DR/ a super non web dev non frontend non interested person aka me somehow cracked the interview(through wrong practices i guess) landed into an internship that would have gone to a better person.I cracked the interview but am shit scared if i could stand the job}
- So 3 days ago i was talking to my friend regarding random stuff, when he told about needing a front end dev for making static template based html pages for their company.
- (I haven't ever worked in deep with web dev, just generated a few websites using mardown to html convertors, and was recently trying to learn flask/bootstrap/js) I was in need of some work so immediately requested him to talk about me in their company.
- yesterday i get an interview call from the hr of that company . She ask what i know, what they want and if i could do. I honestly tell them about my experience with web dev( with some maybe's)
- moments later , she adds me to a group with another guy, and gives us both a task to use create a clone of same website in 2 days.
- The website is a super graphically designed web page with lots of animations, custom mouses and what not. I could sense the basic elements out of it , like the nav bar and the carousals, but those animations were way beyond my knowledge. yet i start working on it
- I try with taking the clever top down approach of cloning the website and fixing its structure. It has such long code files of 10k+ lines, but i was still able to clean the css and html files and some of js code to make the website work
- later my friend calls and tells me that the other guy is a 1st year student / his brother and he doesn't know much stuff so he's kinda like me.
- He shows me a video of his code that he sent to him. That guy took the honest, bottom up approach, used the design as inspiration and was trying hard to create the similar design and animations via js.
- among other things, he also tells me that this challenge is super difficult and the level of difficulty in the work is certainly going to be lesser than this.
- In my task, I was super stuck at js because i haven't learned it much, therefore after spending 1.5 days, i made a submission without the main thing, i.e one particular carousal working
- later I get a call from another friend (B) of mine and while discussing random things, i show him my code over anydesk and ask him if he could somehow get my code to work. He asks for some time and sends me a complete refactored version of code with the same design but fully working carousal and other stuff.
- meanwhile i get to see the other guy's code and he had legit made all the designs and functions by himself, but his code looked less polished and different from the design.
- I pushed my friend(B)'s refactored version and added a comment on the group the carousal in mu code is now working.
- later at night my friend1 calls and tells me that their company was considering my submission and i would be getting the selection call
- I feel like a crazy fraud who somehow cracked the interview but is going to get his ass whipped. Where and how can i learn js, and jquery?5 -
I hope it's ok advertising my channel, it is programming related so...
I'm doing my first livestream on my YouTube channel. It will focus on CSS animations! Come 3pm EST on Thursday if you want to participate!
https://youtube.com/channel/... -
looking for minimalist developer personal portfolio examples for inspiration for a redesign of my current site.
i want to keep it basic but i really want something slick yet minimal for a replacement to what i have now - possibly with some nice css animations and whatnot.
(current version: http://jfry.info/)6 -
Wow Chrome, you can just go fuck yourself. I am trying to make this epic CSS effect for one fucking hour just to find out filter animations are completely trash and broken there. At least our Firefox clients will still see it thanks to @supports...4