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
-
So, you start with a PHP website.
Nah, no hating on PHP here, this is not about language design or performance or strict type systems...
This is about architecture.
No backend web framework, just "plain PHP".
Well, I can deal with that. As long as there is some consistency, I wouldn't even mind maintaining a PHP4 site with Y2K-era HTML4 and zero Javascript.
That sounds like fucking paradise to me right now. 😍
But no, of course it was updated to PHP7, using Laravel, and a main.js file was created. GREAT.... right? Yes. Sure. Totally cool. Gotta stay with the times. But there's still remnants of that ancient framework-less website underneath. So we enter an era of Laravel + Blade templates, with a little sprinkle of raw imported PHP files here and there.
Fine. Ancient PHP + Laravel + Blade + main.js + bootstrap.css. Whatever. I can still handle this. 🤨
But then the Frontend hipsters swoosh back their shawls, sip from their caramel lattes, and start whining: "We want React! We want SPA! No more BootstrapCSS, we're going to launch our own suite of SASS styles! IT'S BETTER".
OK, so we create REST endpoints, and the little monkeys who spend their time animating spinners to cover up all the XHR fuckups are satisfied. But they only care about the top most visited pages, so we ALSO need to keep our Blade templated HTML. We now have about 200 SPA/REST routes, and about 350 classic PHP/Blade pages.
So we enter the Era of Ancient PHP + Laravel + Blade + main.js + bootstrap.css + hipster.sass + REST + React + SPA 😑
Now the Backend grizzlies wake from their hibernation, growling: We have nearly 25 million lines of PHP! Monoliths are evil! Did you know Netflix uses microservices? If we break everything into tiny chunks of code, all our problems will be solved! Let's use DDD! Let's use messaging pipelines! Let's use caching! Let's use big data! Let's use search indexes!... Good right? Sure. Whatever.
OK, so we enter the Era of Ancient PHP + Laravel + Blade + main.js + bootstrap.css + hipster.sass + REST + React + SPA + Redis + RabbitMQ + Cassandra + Elastic 😫
Our monolith starts pooping out little microservices. Some polished pieces turn into pretty little gems... but the obese monolith keeps swelling as well, while simultaneously pooping out more and more little ugly turds at an ever faster rate.
Management rushes in: "Forget about frontend and microservices! We need a desktop app! We need mobile apps! I read in a magazine that the era of the web is over!"
OK, so we enter the Era of Ancient PHP + Laravel + Blade + main.js + bootstrap.css + hipster.sass + REST + GraphQL + React + SPA + Redis + RabbitMQ + Google pub/sub + Neo4J + Cassandra + Elastic + UWP + Android + iOS 😠
"Do you have a monolith or microservices" -- "Yes"
"Which database do you use" -- "Yes"
"Which API standard do you follow" -- "Yes"
"Do you use a CI/building service?" -- "Yes, 3"
"Which Laravel version do you use?" -- "Nine" -- "What, Laravel 9, that isn't even out yet?" -- "No, nine different versions, depends on the services"
"Besides PHP, do you use any Python, Ruby, NodeJS, C#, Golang, or Java?" -- "Not OR, AND. So that's a yes. And bash. Oh and Perl. Oh... and a bit of LUA I think?"
2% of pages are still served by raw, framework-less PHP.32 -
!rant
This was over a year ago now, but my first PR at my current job was +6,249/-1,545,334 loc. Here is how that happened... When I joined the company and saw the code I was supposed to work on I kind of freaked out. The project was set up in the most ass-backward way with some sort of bootstrap boilerplate sample app thing with its own build process inside a subfolder of the main angular project. The angular app used all the CSS, fonts, icons, etc. from the boilerplate app and referenced the assets directly. If you needed to make changes to the CSS, fonts, icons, etc you would need to cd into the boilerplate app directory, make the changes, run a Gulp build that compiled things there, then cd back to the main directory and run Grunt build (thats right, both grunt and gulp) that then built the angular app and referenced the compiled assets inside the boilerplate directory. One simple CSS change would take 2 minutes to test at minimum.
I told them I needed at least a week to overhaul the app before I felt like I could do any real work. Here were the horrors I found along the way.
- All compiled (unminified) assets (both CSS and JS) were committed to git, including vendor code such as jQuery and Bootstrap.
- All bower components were committed to git (ALL their source code, documentation, etc, not just the one dist/minified JS file we referenced).
- The Grunt build was set up by someone who had no idea what they were doing. Every SINGLE file or dependency that needed to be copied to the build folder was listed one by one in a HUGE config.json file instead of using pattern matching like `assets/images/*`.
- All the example code from the boilerplate and multiple jQuery spaghetti sample apps from the boilerplate were committed to git, as well as ALL the documentation too. There was literally a `git clone` of the boilerplate repo inside a folder in the app.
- There were two separate copies of Bootstrap 3 being compiled from source. One inside the boilerplate folder and one at the angular app level. They were both included on the page, so literally every single CSS rule was overridden by the second copy of bootstrap. Oh, and because bootstrap source was included and commited and built from source, the actual bootstrap source files had been edited by developers to change styles (instead of overriding them) so there was no replacing it with an OOTB minified version.
- It is an angular app but there were multiple jQuery libraries included and relied upon and used for actual in-app functionality behavior. And, beyond that, even though angular includes many native ways to do XHR requests (using $resource or $http), there were numerous places in the app where there were `XMLHttpRequest`s intermixed with angular code.
- There was no live reloading for local development, meaning if I wanted to make one CSS change I had to stop my server, run a build, start again (about 2 minutes total). They seemed to think this was fine.
- All this monstrosity was handled by a single massive Gruntfile that was over 2000loc. When all my hacking and slashing was done, I reduced this to ~140loc.
- There were developer's (I use that term loosely) *PERSONAL AWS ACCESS KEYS* hardcoded into the source code (remember, this is a web end app, so this was in every user's browser) in order to do file uploads. Of course when I checked in AWS, those keys had full admin access to absolutely everything in AWS.
- The entire unminified AWS Javascript SDK was included on the page and not used or referenced (~1.5mb)
- There was no error handling or reporting. An API error would just result in nothing happening on the front end, so the user would usually just click and click again, re-triggering the same error. There was also no error reporting software installed (NewRelic, Rollbar, etc) so we had no idea when our users encountered errors on the front end. The previous developers would literally guide users who were experiencing issues through opening their console in dev tools and have them screenshot the error and send it to them.
- I could go on and on...
This is why you hire a real front-end engineer to build your web app instead of the cheapest contractors you can find from Ukraine.
19 -
TABLE BASED WEB DESIGN
I was surprised there were no rants about this topic before I realized it was more than a decade back 😳
We've never had it better! So to help add a little perspective for all those ranting about what is unarguably the golden age for web developers... let me fill you in on web dev in the late 90's;
JavaScript was a joke. No seriously! - I once got laughed out of the room for suggesting we try use it for more than disabling a button - (I wanted to check out the new XHR request thingy [read AJAX]).
HTML was simple and purely a markup language (with the exception of the marquee tag). The tags were basically just p,ul,ol,h*,form inputs,img and table and html took 10 minutes to learn. Any style was inline and equally crude - anything that wasn't crude could not be trusted and probably wouldn't render at all in most browsers (never mind render correctly).
There were rumors of a style TAG and something called a cascading style sheet which were received with much skepticism since it went against the old ways and any time saved would be lost writing multiple [IE version specific] style sheets for each browser just to get it to work - so we simply didn't.
No CSS meant the only tags you had to work with to create a structured layout were br, hr and table... so naturally EVERYTHING was in nested tables! JS callback hell can't touch this! - it was not uncommon to have 50+ nested tables all with inline style in a single page which would be edited without any dev tools or linting.
You would spend 30 minutes scanning td tags until your eyes bled to find something, make a change, ftp the file to the server, reload the web page and then spend 10 minutes staring at the devastation on your screen convinced you broke
the internet before spotting an un-closed td tag with your bloodshot eyes.
Tables were not just a silver bullet - they were the ONLY bullet and were in the wild west!
Q: Want an inline form or to align your inputs left?
A: Duh table!
Q: Want a border with round-corners, a shadow or blur?
A: That's easy! Your gonna want to put that table in the center cell of another table then crop a image of the border into 6 smaller images to put in the surrounding cells... oh and then spend 10 minutes fucking with mystical attributes like cell-padding and valign to get them flush.
...But hey at least on the bright-side vertically & horizontally centering stuff was a breeze!22 -
Today I was 25 years old, asking for a raise or a opportunity to reach the next level of my career.
My department manager simply said:
"I'm sorry, but in terms of salary you have already reached the end of your career."
Bye then :)34 -
I wanted you to notice that XHR (XML HTTP Request) is an acronym composed by two other acronyms and a word. Thank you for the attention15
-
Junior: I don't think the methodology you came up with is working.
Me: Why?
Junior: There's an exception when I ran it
Me: ...what exception
Junior: FileNotFoundError
Me: ......have you checked if the path to the file is correct?
Junior: No
(A few moments later)
Junior: Oh I forgot to decompress the zip. Nevermind.9 -
ajax hell/dom hell
do you know it? no dont talk abut the callback hell.
i fcking hate it when i load any modern site, and it needs a few seconds to calc some stuff, xhr this, calc that, dom/css visible that. at all it takes more time specially if you on low end to mid equipmemt.
And then you think its finally loaded, you want to click or tab something and then another xhr was Finished, dom/css changed, and the button i was about to Click moved and i click something else.
friends of me hates this to.
so please dear webdevs, stop try to be cool and fancy just because you found out how "cool" conditions in css and dom is. stop using that bullshit angular (and so on) bullshit if you cant manage to pull out a html at start that will not changr its layout all the time after being loaded, ty.9 -
#1 life lesson learned from coding:
Don't work on projects for the government or any authority EVER!6 -
I've kinda ghosted DevRant so here's an update:
VueJS is pretty good and I'm happy using it, but it seems I need to start with React soon to gain more business partnerships :( I'm down to learn React, but I'd rather jump into Typescript or stick with Vue.
Webpack is cool and I like it more than my previous Gulp implementation.
Docker has become much more usable in the last 2 years, but it's still garbage on Windows/Mac when running an application that runs on Symfony...without docker-sync. File interactions are just too slow for some of my enterprise apps. docker-sync was a life-saver.
I wish I had swapped ALL links to XHR requests long ago. This pseudo-SPA architecture that I've got now (still server-side rendered) is pretty good. It allows my server to do what servers do best, while eliminating the overhead of reloading CSS/JS on every request. I wrote an ES6 component for this: https://github.com/HTMLGuyLLC/... - Frankly, I could give a shit if you think it's dumb or hate it or think I'm dumb, but I'd love to hear any ideas for improving it (it's open source for a reason). I've been told my script is super helpful for people who have Shopify sites and can't change the backend. I use it to modernize older apps.
ContentBuilder.js has improved a ton in the last year and they're having a sale that ends today if you have a need for something like that, take a look: https://innovastudio.com/content-bu...
I bought and returned a 2019 Macbook pro with i9. I'll stick with my 2015 until we see what's in store for 2020. Apple has really stopped making great products ever since Jobs died, and I can't imagine that he was THAT important to the company. Any idiot on the street can you tell you several ways they could improve the latest models...for instance, how about feedback when you click buttons in the touchbar? How about a skinnier trackpad so your wrists aren't constantly on it? How about always-available audio and brightness buttons? How about better ports...How about a bezel-less screen? How about better arrow keys so you can easily click the up arrow without hitting shift all the time? How about a keyboard that doesn't suck? I did love touch ID though, and the laptop was much lighter.
The Logitech MX Master 3 mouse was just released. I love my 2s, so I just ordered it. We'll see how it is!
PHPStorm still hasn't fixed a couple things that are bothering me with the terminal: can't reorder tabs with drag and drop, tabs are saved but don't reconnect to the server so the title is wrong if you reopen a project and forget that the terminal tabs are from your last session and no longer connected. I've accidentally tried to run scripts locally that were meant for the server more than once...
I just found out this exists: https://caniuse.email/
I'm going to be looking into Kubernetes soon. I keep seeing the name (docker for mac, digitalocean) so I'm curious.
AWS S3 Glacier is still a bitch to work with in 2019...wtf? Having to setup a Python script with a bunch of dependencies in order to remove all items in a vault before you can delete it is dumb. It's like they said "how can we make it difficult for people to remove shit so we can keep charging them forever?". I finally removed almost 2TB of data, but my computer had to run that script for a day....so dumb...6 -
Can someone help me settle an argument with a coworker?
So let's say there is a REST interface that returns a PDF representation of an resource...but it requires the authorization header in order to authorize that you have access to the document in question.
And let's say there is a link on the page that redirects to this endpoint to serve up the document. He thinks you can add a header to the HTTP request that goes out when you click on the link (a regular old anchor tag) with onclick without making an xhr call.
I told him that you would have to use an xhr call to add headers, and that even then you would receive a byte stream back, which without using a blob and an object url or a data uri you wouldn't be able to display it in a new tab or start a download.
Regardless he went on to tell me I was wrong. The next day he said he had done it. I asked him to show me, and he said "oh it's at home", and then proceeded to ridicule me in front of my architect. He always pulls this one up's man ship bullshit and I hate it. And I am pretty sure he's wrong.10 -
[at the end of a coding interview]
Me: Do you have any questions for me or the company that I can help to answer?
Candidate: Normally I have many questions to the future teammates, but you're not from the team I'm interviewing for so no I have no questions.
🤯11 -
For almost a week , I was stuck with the incorrect order of xhr response due to multiple api calls. Tried everything .
Turns out I could have called all the required data in one call only .
SHOULD.HAVE.READ.THE.DOCUMENTATION1 -
~rant
I think we need to change way how websites deliver themselves to its users. This HTML CSS JS clusterfuck is just a huge PITA in the ass.
What is a website?
It's an application where users find, communicate or share information, can buy or sell their penis pumps and loads of shady stuff.
Why must a website (the delivered application) be split into multiple languages/scripts and lots of HTTP requests?
In my opinion, PWA is a start to make us look at websites more like apps as we are used to on the machine, but they don't solve the mess.
Per my experience, many people working on websites regularly confuse what's executed on the server and what is on the client. They send data to the client via XHR, for example full DB tables of private data, just to then filter it in their beloved Array.filter function.
You can tell those people again and again and this is why I start thinking that the Web, as we know it, needs a big change.14 -
Fack I hate this CMS we have. Using Fetch and sending data as encoded JSON doesn't get parsed nor recognized by the CMS. I was pulling my hair out, understanding the differences, switched back to XHR... and then noticed the buggar:
XHR sends data as "FormData()".
I switched everything to FormData and TADAAA IT WORKS MOTHERFUCKA
Lost a whole fucking day on this trying to understand whether it was my code or the CMS the problem.
Ah yes, of course, I had to reproduce the CMS on my machine, instead of having the developers lend us a "development" platform on it, so obviously I don't know what's happening under the hood :))))))))2 -
Most actual GraphQL explanation:
1. Still uses your xhr/fetch/axios on FE
2. Just sends all the requests to single endpoint
3. On BE uses its own resolution schema to call proper controller to handle the request, rather than relying on router for that
That's all!
Just another useless layer of abstraction with its learning curve, tricks and bugs as ORMs are9 -
me: builds a python-script to transport data in .json-format into a config-file written in .xml for a coworker
my boss: "I am glad you have earned yourself a reputation as the 'programmer' in our team" -
Clock: Friday, 15:45 PM - just go home now, idiot!
My stupid ass: Makes substantial changes to the code I have been working on and breaks it.4 -
Spent the whole night trying to get a react native component to push a csv file to multer in the backend.
Tried using fetch, then dependencies, then xhr.
Realised I had to create formdata. No such documentation on the internet.
Used God knows what after 3 hours, suddenly things are working.
I'll never be able to get answers in life -_- -
Having to sit and explain the difference between json and jsonp to a graphic designer and and SEO manager
-
Me to my peer: "Yo the code that they sent us works but it sucks and is insecure"
My peer: "Yo that sucks they should definitely change that, go submit a ticket so they change it up, that really sucks!"
Me: *prepares ticket, gets it checked by peer:
My peer: YOoOoO U cAnT tElL tHeM tO cHaNgE oR tElL tHeM hOw tO wRiTe tHeIr CoDe ThAt ThEy DeLiVeR tO uS!1!1!eleven
--
classics1 -
imagine the guys in the datacenter are switching out power distribution units - and suddenly your productive database cluster reboots :)1
-
Somehow mocking xhr requests (?) for Axios is really hard to make it work. I use React Cosmos as I'm re-doing the frontend of this already running in production and works great, but when my component communicates with the backend it breaks and I'm unable to test the full behavior.
Then, it occurred to me that trying to mock Axios may not be the best. So I came with this scheme where I would have a configuration variable with a default value and change that when I need to work with React Cosmos, which in turn changes the behavior of `/auth` to return a valid JWT in response to a GET, put an Axios interceptor in my outermost Cosmos decorator and BAM! suddenly was able to develop and test my React components closer to how they would work in production.
It surprises me how simple this endeavor was, and because everything runs orchestrated by docker compose things run smoother.
(this is not an excuse to not to learn how to deal with the mocking issues of Axios, after all I wont have a working backend every time I work in some frontend application)5 -
Anyone else has the same issue with XHR on Firefox, where it sends shitload of requests and then does something?
Testing the same code on Chromium stuff works just fine, only one request and calls another method. Firefox does free DDOS4 -
My first experience with a computer was actually sitting on my dad's lap and watching him play world of warcraft - and damn, that hit hard1
-
I am a stupid monkey that spilled coffee all over his keyboard, and now it seems to be EOL.
Looking for some "inspiration" - what keyboards (and mice, might also just buy a whole new set) are you guys using?9 -
imagine you "manage" your applications firewall rules by writing them into spreadsheets and sending them to the fw-admins to implement them
imagine they don't implement exactly what you tell them / implement rules for you that you did not ask for
also imagine it is crucial that you have a reliable source of information about what firewall rules are and are not implemented for your application, because the firewall-guys cant simply check and tell you what rules are implemented for your application
:o2
Top Tags
Weekly Rant
View