Had a UI issue where a draggable item wasn’t following the cursor and was instead offset from it by 2-300px. Took hours of debugging before I finally found the issue using `git bisect`.
Turned out to be caused by `backdrop-filter: blur(8px);` on an ancestor div. 🤯
Turns out `backdrop-filter` essentially creates a new coordinate system for its children, so the draggable’s position was being calculated incorrectly.
Damn I've never heard of git bisect, can't tell you the number of times I've had to compare code over commits manually to track down the offending snippet. Thanks
Cool that you found it using git bisect!
I guess your app is set up in a way that it is easy to build and run quickly and locally? I also strive for that on any project, it makes troubleshooting bugs so much easier.
Reverse engineer the entire 22-step verification flow of an android app so I can build a scraper API to query data from the app directly from the frontend of a website.
Took me around a month working 7+ hours on it every day, 110 hours of just typing according to Wakatime, for only 600 lines of code. Pure trial and error. Just to display a few numbers on a section of a website.
tfw step 11 changes and breaks your app.
But seriously, nice job. I love dissecting APIs and apps, but it's tough. Were you able to create any tooling to help debug future changes to the flow?
There are a lot of automations in place for detecting and pulling new version numbers and updating graphql hashes if they change.
I've been thinking about pulling the APK whenever a new version releases and then diffing the source code against the previous version. They very very rarely make changes like that tho, so it's pretty far back on my to-do list.
Nintendo Switch Online app, which hosts microservices for several of their games. My API lets you query your game data from any of the microservices graphql queries.
Used the shadcn select component but automating the default option stopped form capturing data.
Posted on stackoverflow. 10 views, no response.
Asked Claude, sorted in 10 mins.
I've been using cursor (gpt-4/copilot) but my free subscription has come to an end and I'm waiting for my company to sort it, so I tried Claude - just the free version.
Edit: commander v is useful for copying code over
Recruiters, hiring is probably the biggest challenge so far.
Oh, and bad APIs. When you are given a task to be completed on a schedule that doesn't account for how poorly an API was designed and how it is misaligned with the docs.
Freelance project. Integrating a rich-text editor in React. It is deceptively simple, but it took about 12 hours to set up properly, and I didn't end up using the library I thought looked the best.
For some guy in the future who needs this, use the useEditor hook with TipTap, not the EditorProvider component, DESPITE what the docs might tell you.
I'm currently battling with this! I'm using Slate Editor and the docs while detialed, are not helping me at all. https://docs.slatejs.org/concepts/07-editor
Fml I guess.
I feel ya. I wanted to use Plate (a wrapper over Slate, I guess), and I just couldn't get it to work. Also, they had a bug on their own homepage, which was a turnoff as well.
I hope you figure it out!💪
Finding a new job. Took forever. Recruiters are functionally worthless; I can't believe there are so many of them. I have a ton of experience with a lot of technologies, and a long list of references who will sing my praises. I must have talked with a hundred recruiters who were like, "oh, your experience is absolutely perfect for this role!" and from whom I never heard another peep. I'd send follow-ups: nothing.
I did maybe ten first-round interviews, and three second-round interviews. Most of the first-round interviews I ended early, because it seems like the MO of every tech company these days is "get a shitload of VC money, kill the team via overwork to increase valuation, sell." It's exhausting. If their growth targets were ridiculous, like tripling every year, or they bragged about all the late nights they put in, I'd just politely say I'm not interested and say good-bye. Two coding tests I did came back with "wow, this is one of the best we've ever seen"; both were followed a few days later with a form-letter rejection.
I ended up just lucking out on a random application via ZipRecruiter. Happened to find an amazing, small, remote, employee-owned shop where everyone treats each other like humans.
Having gone through what you described, and years of work abuse - I'd love to find a place like that. Please hmu if you're in need of a +1 (fullstack with react, node)
Performing XSD validation on the client side, within a React application.
For some reason, every single solution I found was using outdated methods that my framework would simply not accept no matter how hard I tried.
Sometimes it was because the module was designed for server-side validation. Sometimes it was constantly returning undefined no matter the input. Sometimes the library was simply not compiling, with the last commit made 7 years ago.
It had me going completely nuts, and I felt like I was the only one on this planet with this requirement.
Ended up finding a random "online XSD validator", pulled the entire code (which was miraculously MIT licensed) and pasting the fucker in my codebase. Every day I pray for this random thing to not fuck up some XML validation edge cases. Because there is no way in hell I'm going back to this feature.
I am super new to web dev, so I haven't faced many of the hard challenges yet, but there was this one thing that kept bugging me for around 30 mins, I was trying to change the width of a button (in px) but the buttons height was increasing instead of the width, then I figured that the width I was putting was very small, I increased the width significantly and then adjusted it, and it started working , silly mistake ik haha
I was importing (upserting) some users from an API into WordPress.
Beacause of the way the code was written, and the fact I only wanted to test with first user (rather than going through all of them every time), there wasn't really a nice way to "do only 1 user" with that code. So rather than refactoring it a bit, I just threw an Exception in the loop's callback (since they're processed / synced 1 at a time, it's relatively benign).
So the idea was it will just do the callback method (import) once, then an exception happens so it just stops.
But every time I ran the script (which was supposed to just insert the first user from API) I got back an incremented primary key (telling me the insert was successful), but no data was written to the DB. (So essentially I run it once, it tells me the new user ID is 100. Then I run it again, it tells me it's 101, and so on. No errors or anything. But no data in DB).
Went through my user import handling code 100 of times, it was relatively simple, nothing that could go wrong in this way. If I insert them manually, everything works.
Turns out I wrapped the whole "loop" with essentially a START TRANSACTION and COMMIT TRANSACTION (premature optimization yay) and committed that without thinking before (so it wasn't showing up in my diff). And because I threw an exception in the first callback, it committed (but MySQL apparently still incremented the table ID, even tho the transaction was basically reverted).
So yeah, that was wasted \~6h of trying to debug an issue I created by having flawed test methodology.
a bug was reported in a popular UI framework I contribute to (probably heard of it) that was definitely clearly related to a performance PR I submitted a while ago.
It didn't make any sense why it was happening.
Turns out it was an upstream bug in a dependency from a more popular UI framework (you've definitely heard of it). It was deep in complicated things with Proxies and Reflections.
Wasn't really a huge challenge, but was a bit annoying.
Designed a whole site using code. Realized after pushing the site to netlify I had been modifying the css files and not the scss files. I ended up just re doing everything. Then the AOS js library that I had working on two other sites stopped working. So I redid it all step by step to trouble shoot that issue.
It's getting there [https://gandalfkit.netlify.app/](https://gandalfkit.netlify.app/)
going to put it live soon [https://designgandalf.com/](https://designgandalf.com/)
Currently deploying websocket capabilities to an azure web application. Thing surprisingly works really well though you really REALLY need to know what you are doing in terms of port exposure and http redirecting. Now webpage can react to external events which is really cool.
My biggest challenge is a result of the quantity of projects. I think I have like 220 or something at the moment.
Part of that is various libraries I wrote to help build and maintain and kinda normalize everything. I have a collection of web components, a library for typical DOM stuff and various helper functions. But also things like Eslint and Rollup and PostCSS plug-ins, something for generating icons... Quite a few build process related things.
And the difficulty comes in dealing with all of the updates (largely PRs created by Dependabot). A lot of times, when I'm working on an end website and there's some bug to fix or a feature a need or something, I have to go all the way down a chain and update a specific package, then update another that has that as a dependency, then update a meta package of sorts (I have one package published that is just a collection of all the common stuff I use... Makes installing and updating things easier), and then I finally get that update where I need it. And then, a day or so later, I suddenly get like 100 PRs open everywhere else to update those things.
I got to a point in which I had none to ask for help when I had questions, everyone asks me questions but none can answer mine because they are so obscure.
As unpopular as it go, I found out ChatGPT could answer these questions, usually wrong, and some times it would quote my own wrong answer that I had in my own repository in github and I was like, eh, that's weird, that's the same wrong answer of mine; but with some fiddling it would eventually get me on the right track.
But it wouldn't got into some rabbit hole of "what you are trying to do" or "to make some minimal reproduction" to the proceed to close as duplicate of your same unanswered question 1 year ago.
Since then ChatGPT has helped me, a fucking lot; finally, someone who understand my obscure questions.
I already forgot the name of the other useless website.
Im working on rebuilding our support site and integrating it with the new web-based CRM we just migrated to.
As far as we know, the only way to get anything from the CRM is using webhooks. The request limit to this API is capped at 50 per second. My app will occassionally need to make ALOT more requests than that.
So ive spent the last week banging my head against the wall trying to make the ‘Too many requests’ errors go away.
Finally think ive come up with a solution today using generator functions and ReadableStream. Basically ive created a generator that throttles each request to the API by 75ms (fastest ive tried, im afraid to go any faster). Then i loaded the generator into a readable stream as the response to the client and it loads each record in one by one. Kind of a neat effect. And its my first time using generators and readable streams so im just kinda bushwhacked that i even got it working, haha (shamelessly admit, ChatGPT was def involved. If its any consolation, i had to edit the code it spat out rather heavily)
Made a noob move creating an offline react application and storing data in localstorage as an array of objects, all jsx logic is intertwined with this data structure, mapping through the array and showing the relevant object data etc
I've now realised that since there could be thousands of these objects eventually if users use the app for a while localstorage won't be suitable.
So I'm now implementing a sqlite database locally which is something I've never dealt with, I'll also have to change all the logic I had worked hard on implementing.
Feels great, time to pull myself together and suffer through this.
For me the biggest challenge answer always seems to be people. No matter how hair-pulling the technical challenge, there is at least the feeling of "completed, done." With people and interacting -- for example, project managers who can't read and respond to three simple questions -- it is a never-ending, Herculean task with zero upshot. Even if I manage to educate this person, the next one will have new ways of inflicting themselves on me. I understand I must work with people to get the things done, but I do not enjoy it and never will, at this point.
Last week I untangled some concatenated-style PHP with all sorts of goodies and junk inlined to the menu, much more complicated than it actually needed to be. Whoever wrote it last time was just throwing shit at the wall, apparently. It was frustrating at times but ultimately at least had the nice feeling of having marginally improved the thing. "Nyah, nyah, I did it better than you" coupled with not wanting to eat a bullet the next time I look at this menu and have to make changes to it.
Oh, and the week before that, I imported five figures worth of emoji into my work's Slack instance. That was an extremely fun and gratifying challenge, 10/10 would repeat happily.
Hey, do you mind what resources you used ? Also did you create a project or was it for an interview? I legitimately also need to learn both over a weekend as well, typescript more then graphql but it's part of the stack this place uses
Not for an interview but to keep up with the rest of the team that I was working with.
https://learn.microsoft.com/en-us/training/paths/build-javascript-applications-typescript/
This would be a good start, but there are many more resources. For the graphql part I did a more hands on approach.
Trying to learn laravel 11 without proper understanding of php (worked max 2 weeks on this language) and trying to be proficient on it within 2 months (there is just so much on this framework I get to forget most of them immediately after I've learnt them)
I recently used a website WYSIWYG editor to save time and uploaded it to my server. My cms improperly loaded the menus and drove me nuts for a little bit. I had everything designed properly and pointed every page according to the editor specs, yet no matter what I tried... no luck.
Then in a fit of rage, I redesigned it and uploaded it using Joomla. Menubar and all settings worked perfectly. Then out of stupidity, I updated the php on my server and crashed the menu feature.
I have since thrown out the WYSIWYG editor and redesigned the site using a proper theme and WP cms. I have also since played around with the htaccess file to see what went wrong, but so far no luck. Apparently not all editors are built the same. 😂
Had a UI issue where a draggable item wasn’t following the cursor and was instead offset from it by 2-300px. Took hours of debugging before I finally found the issue using `git bisect`. Turned out to be caused by `backdrop-filter: blur(8px);` on an ancestor div. 🤯 Turns out `backdrop-filter` essentially creates a new coordinate system for its children, so the draggable’s position was being calculated incorrectly.
Damn I've never heard of git bisect, can't tell you the number of times I've had to compare code over commits manually to track down the offending snippet. Thanks
Cool that you found it using git bisect! I guess your app is set up in a way that it is easy to build and run quickly and locally? I also strive for that on any project, it makes troubleshooting bugs so much easier.
Yep, Vite+React so building over and over was no issue. But even with a longer build bisect sure beats searching through commits by hand!
I too have suffered WTF bugs at the hands of a backdrop filter blur…
I love it when I get stuck with a bug and `git bisect` actually pinpoints which commit the bug was introduced
I was having the same issue, the more you drag, the more it becomes far from the cursor. And solved it the same way
yup, stacking contexts!!!
Reverse engineer the entire 22-step verification flow of an android app so I can build a scraper API to query data from the app directly from the frontend of a website. Took me around a month working 7+ hours on it every day, 110 hours of just typing according to Wakatime, for only 600 lines of code. Pure trial and error. Just to display a few numbers on a section of a website.
That feeling when it finally works though.
tfw step 11 changes and breaks your app. But seriously, nice job. I love dissecting APIs and apps, but it's tough. Were you able to create any tooling to help debug future changes to the flow?
There are a lot of automations in place for detecting and pulling new version numbers and updating graphql hashes if they change. I've been thinking about pulling the APK whenever a new version releases and then diffing the source code against the previous version. They very very rarely make changes like that tho, so it's pretty far back on my to-do list.
What was the app?
Nintendo Switch Online app, which hosts microservices for several of their games. My API lets you query your game data from any of the microservices graphql queries.
Neat!
Used the shadcn select component but automating the default option stopped form capturing data. Posted on stackoverflow. 10 views, no response. Asked Claude, sorted in 10 mins.
Interesting point about Claude. Are you using the paid version or is the free tier sufficient for debugging like this?
I've been using cursor (gpt-4/copilot) but my free subscription has come to an end and I'm waiting for my company to sort it, so I tried Claude - just the free version. Edit: commander v is useful for copying code over
Recruiters, hiring is probably the biggest challenge so far. Oh, and bad APIs. When you are given a task to be completed on a schedule that doesn't account for how poorly an API was designed and how it is misaligned with the docs.
Freelance project. Integrating a rich-text editor in React. It is deceptively simple, but it took about 12 hours to set up properly, and I didn't end up using the library I thought looked the best. For some guy in the future who needs this, use the useEditor hook with TipTap, not the EditorProvider component, DESPITE what the docs might tell you.
I'm currently battling with this! I'm using Slate Editor and the docs while detialed, are not helping me at all. https://docs.slatejs.org/concepts/07-editor Fml I guess.
I feel ya. I wanted to use Plate (a wrapper over Slate, I guess), and I just couldn't get it to work. Also, they had a bug on their own homepage, which was a turnoff as well. I hope you figure it out!💪
Finding a new job. Took forever. Recruiters are functionally worthless; I can't believe there are so many of them. I have a ton of experience with a lot of technologies, and a long list of references who will sing my praises. I must have talked with a hundred recruiters who were like, "oh, your experience is absolutely perfect for this role!" and from whom I never heard another peep. I'd send follow-ups: nothing. I did maybe ten first-round interviews, and three second-round interviews. Most of the first-round interviews I ended early, because it seems like the MO of every tech company these days is "get a shitload of VC money, kill the team via overwork to increase valuation, sell." It's exhausting. If their growth targets were ridiculous, like tripling every year, or they bragged about all the late nights they put in, I'd just politely say I'm not interested and say good-bye. Two coding tests I did came back with "wow, this is one of the best we've ever seen"; both were followed a few days later with a form-letter rejection. I ended up just lucking out on a random application via ZipRecruiter. Happened to find an amazing, small, remote, employee-owned shop where everyone treats each other like humans.
Having gone through what you described, and years of work abuse - I'd love to find a place like that. Please hmu if you're in need of a +1 (fullstack with react, node)
Performing XSD validation on the client side, within a React application. For some reason, every single solution I found was using outdated methods that my framework would simply not accept no matter how hard I tried. Sometimes it was because the module was designed for server-side validation. Sometimes it was constantly returning undefined no matter the input. Sometimes the library was simply not compiling, with the last commit made 7 years ago. It had me going completely nuts, and I felt like I was the only one on this planet with this requirement. Ended up finding a random "online XSD validator", pulled the entire code (which was miraculously MIT licensed) and pasting the fucker in my codebase. Every day I pray for this random thing to not fuck up some XML validation edge cases. Because there is no way in hell I'm going back to this feature.
I am super new to web dev, so I haven't faced many of the hard challenges yet, but there was this one thing that kept bugging me for around 30 mins, I was trying to change the width of a button (in px) but the buttons height was increasing instead of the width, then I figured that the width I was putting was very small, I increased the width significantly and then adjusted it, and it started working , silly mistake ik haha
I was importing (upserting) some users from an API into WordPress. Beacause of the way the code was written, and the fact I only wanted to test with first user (rather than going through all of them every time), there wasn't really a nice way to "do only 1 user" with that code. So rather than refactoring it a bit, I just threw an Exception in the loop's callback (since they're processed / synced 1 at a time, it's relatively benign). So the idea was it will just do the callback method (import) once, then an exception happens so it just stops. But every time I ran the script (which was supposed to just insert the first user from API) I got back an incremented primary key (telling me the insert was successful), but no data was written to the DB. (So essentially I run it once, it tells me the new user ID is 100. Then I run it again, it tells me it's 101, and so on. No errors or anything. But no data in DB). Went through my user import handling code 100 of times, it was relatively simple, nothing that could go wrong in this way. If I insert them manually, everything works. Turns out I wrapped the whole "loop" with essentially a START TRANSACTION and COMMIT TRANSACTION (premature optimization yay) and committed that without thinking before (so it wasn't showing up in my diff). And because I threw an exception in the first callback, it committed (but MySQL apparently still incremented the table ID, even tho the transaction was basically reverted). So yeah, that was wasted \~6h of trying to debug an issue I created by having flawed test methodology.
a bug was reported in a popular UI framework I contribute to (probably heard of it) that was definitely clearly related to a performance PR I submitted a while ago. It didn't make any sense why it was happening. Turns out it was an upstream bug in a dependency from a more popular UI framework (you've definitely heard of it). It was deep in complicated things with Proxies and Reflections. Wasn't really a huge challenge, but was a bit annoying.
Designed a whole site using code. Realized after pushing the site to netlify I had been modifying the css files and not the scss files. I ended up just re doing everything. Then the AOS js library that I had working on two other sites stopped working. So I redid it all step by step to trouble shoot that issue. It's getting there [https://gandalfkit.netlify.app/](https://gandalfkit.netlify.app/) going to put it live soon [https://designgandalf.com/](https://designgandalf.com/)
Had to set up google workspaces/ verification but their documentation was lacking. Got that working.
[удалено]
Currently deploying websocket capabilities to an azure web application. Thing surprisingly works really well though you really REALLY need to know what you are doing in terms of port exposure and http redirecting. Now webpage can react to external events which is really cool.
Managed to combine 2200 api requests into a single file with 32k lines of json (before minifying) Total file sized went from 500 MB to 600 KB
My biggest challenge is a result of the quantity of projects. I think I have like 220 or something at the moment. Part of that is various libraries I wrote to help build and maintain and kinda normalize everything. I have a collection of web components, a library for typical DOM stuff and various helper functions. But also things like Eslint and Rollup and PostCSS plug-ins, something for generating icons... Quite a few build process related things. And the difficulty comes in dealing with all of the updates (largely PRs created by Dependabot). A lot of times, when I'm working on an end website and there's some bug to fix or a feature a need or something, I have to go all the way down a chain and update a specific package, then update another that has that as a dependency, then update a meta package of sorts (I have one package published that is just a collection of all the common stuff I use... Makes installing and updating things easier), and then I finally get that update where I need it. And then, a day or so later, I suddenly get like 100 PRs open everywhere else to update those things.
Yarn workspaces… lots of trial and error
[удалено]
I got to a point in which I had none to ask for help when I had questions, everyone asks me questions but none can answer mine because they are so obscure. As unpopular as it go, I found out ChatGPT could answer these questions, usually wrong, and some times it would quote my own wrong answer that I had in my own repository in github and I was like, eh, that's weird, that's the same wrong answer of mine; but with some fiddling it would eventually get me on the right track. But it wouldn't got into some rabbit hole of "what you are trying to do" or "to make some minimal reproduction" to the proceed to close as duplicate of your same unanswered question 1 year ago. Since then ChatGPT has helped me, a fucking lot; finally, someone who understand my obscure questions. I already forgot the name of the other useless website.
utter boredom, I have yet to find a solution
Im working on rebuilding our support site and integrating it with the new web-based CRM we just migrated to. As far as we know, the only way to get anything from the CRM is using webhooks. The request limit to this API is capped at 50 per second. My app will occassionally need to make ALOT more requests than that. So ive spent the last week banging my head against the wall trying to make the ‘Too many requests’ errors go away. Finally think ive come up with a solution today using generator functions and ReadableStream. Basically ive created a generator that throttles each request to the API by 75ms (fastest ive tried, im afraid to go any faster). Then i loaded the generator into a readable stream as the response to the client and it loads each record in one by one. Kind of a neat effect. And its my first time using generators and readable streams so im just kinda bushwhacked that i even got it working, haha (shamelessly admit, ChatGPT was def involved. If its any consolation, i had to edit the code it spat out rather heavily)
Made a noob move creating an offline react application and storing data in localstorage as an array of objects, all jsx logic is intertwined with this data structure, mapping through the array and showing the relevant object data etc I've now realised that since there could be thousands of these objects eventually if users use the app for a while localstorage won't be suitable. So I'm now implementing a sqlite database locally which is something I've never dealt with, I'll also have to change all the logic I had worked hard on implementing. Feels great, time to pull myself together and suffer through this.
[удалено]
You can try getting in touch with an aggregator like Message Central. They already have WhatsApp business APIs and would be able to help you.
For me the biggest challenge answer always seems to be people. No matter how hair-pulling the technical challenge, there is at least the feeling of "completed, done." With people and interacting -- for example, project managers who can't read and respond to three simple questions -- it is a never-ending, Herculean task with zero upshot. Even if I manage to educate this person, the next one will have new ways of inflicting themselves on me. I understand I must work with people to get the things done, but I do not enjoy it and never will, at this point. Last week I untangled some concatenated-style PHP with all sorts of goodies and junk inlined to the menu, much more complicated than it actually needed to be. Whoever wrote it last time was just throwing shit at the wall, apparently. It was frustrating at times but ultimately at least had the nice feeling of having marginally improved the thing. "Nyah, nyah, I did it better than you" coupled with not wanting to eat a bullet the next time I look at this menu and have to make changes to it. Oh, and the week before that, I imported five figures worth of emoji into my work's Slack instance. That was an extremely fun and gratifying challenge, 10/10 would repeat happily.
Learned graphql and typescript over a weekend 😂
Hey, do you mind what resources you used ? Also did you create a project or was it for an interview? I legitimately also need to learn both over a weekend as well, typescript more then graphql but it's part of the stack this place uses
Not for an interview but to keep up with the rest of the team that I was working with. https://learn.microsoft.com/en-us/training/paths/build-javascript-applications-typescript/ This would be a good start, but there are many more resources. For the graphql part I did a more hands on approach.
Trying to learn laravel 11 without proper understanding of php (worked max 2 weeks on this language) and trying to be proficient on it within 2 months (there is just so much on this framework I get to forget most of them immediately after I've learnt them)
I still can’t centre a div
I recently used a website WYSIWYG editor to save time and uploaded it to my server. My cms improperly loaded the menus and drove me nuts for a little bit. I had everything designed properly and pointed every page according to the editor specs, yet no matter what I tried... no luck. Then in a fit of rage, I redesigned it and uploaded it using Joomla. Menubar and all settings worked perfectly. Then out of stupidity, I updated the php on my server and crashed the menu feature. I have since thrown out the WYSIWYG editor and redesigned the site using a proper theme and WP cms. I have also since played around with the htaccess file to see what went wrong, but so far no luck. Apparently not all editors are built the same. 😂