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 - "react-query"
-
Do you ever feel coding fatigue?
My dev mana has run dry, I've hit my rate limit.
That moment where your brain thinks "I should finish building this React project, it's good for my portfolio" or "I should really work on fixing this query performance issue, I already know what the problem is" — but your stomach churns at the thought of having to interpret even a single line of code?
The last few days it really does feel like a physical illness, a nauseated feeling whenever I open an IDE. I have written about 12 lines of code since Monday.
It goes beyond writer's block, it's not a lack of focus or inspiration, it's a big knot in my head of everything that's wrong and inconsistent in development, and it causes feelings of dread, desperation and revulsion when trying to wrap my head around the simplest stuff.
Does anyone have good tips to overcome this feeling, something faster and less savings-account-destroying than "take a sabbatical year and travel the world riding an emu"? (seems tempting though)57 -
Fuck the memes.
Fuck the framework battles.
Fuck the language battles.
Fuck the titles.
Anybody who has been in this field long enough knows that it doesn't matter if your linus fucking torvalds, there is no human who has lived or ever will live that simultaneously understands, knows, and remembers how to implement, in multiple languages, the following:
- jest mocks for complex React components (partial mocks, full mocks, no mocks at all!)
- token cancellation for asynchronous Tasks in C#
- fullstack CRUD, REST, and websocket communication (throw in gRPC for bonus points)
- database query optimization, seeding, and design
- nginx routing, https redirection
- build automation with full test coverage and environment consideration
- docker container versioning, restoration, and cleanup
- internationalization on both the front AND backends
- secret storage, security audits
- package management, maintenence, and deprecation reviews
- integrating with dozens of APIs
- fucking how to center a div
and that's a _comically_ incomplete list; barely scratches the surface of the full range of what a dev can encounter in a given day of writing software
have many of us probably done one or even all of these at different times? surely.
but does that mean we are supposed to draw that up at a moment's notice some cookie-cutter solution like a fucking robot and spit out an answer on a fax sheet?
recruiters, if you read this site (perhaps only the good ones do anyway so its wasted oxygen), just know that whoever you hire its literally the luck of the draw of how well they perform during the interview. sure, perhaps some perform better, but you can never know how good someone is until they literally start working at your org, so... have fun with that.
Oh and I almost forgot, again for you recruiters, on top of that list which you probably won't ever understand for the entirety of your lives, you can also add writing documentation, backup scripts, and orchestrating / administrating fucking JIRA or actually any somewhat technical dashboard like a CMS or website, because once again, the devs are the only truly competent ones - and i don't even mean in a technical sense, i mean in a HUMAN sense of GETTING SHIT DONE IN GENERAL.
There's literally 2 types of people in the world: those who sit around drawing flow charts and talking on the phone all day, and those WHO LITERALLY FUCKING BUILD THE WORLD
why don't i just run the whole fucking company at this point? you guys are "celebrating" that you made literally $5 dollars from a single customer and i'm just sitting here coding 12 hours a day like all is fine and well
i'm so ANGRY its always the same no matter where i go, non-technical people have just no clue, even when you implore them how long things take, they just nod and smile and say "we'll do it the MVP way". sure, fine, you can do that like 2 or 3 times, but not for 6 fucking months until you have a stack of "MVPs" that come toppling down like the garbage they are.
How do expect to keep the "momentum" of your customers and sales (I hope you can hear the hatred of each of these market words as I type them) if the entire system is glued together with ducktape because YOU wanted to expedite the feature by doing it the EASY way instead of the RIGHT way. god, just forget it, nobody is going to listen anyway, its like the 5th time a row in my life
we NEED tests!
we NEED to know our code coverage!
we NEED to design our system to handle large amounts of traffic!
we NEED detailed logging!
we NEED to start building an exception database!
BILBO BAGGINS! I'm not trying to hurt you! I'm trying to help you!
Don't really know what this rant was, I'm just raging and all over the place at the universe. I'm going to bed.20 -
The bossman asked if our signup service sends an automated email after we successfully process someone's payment or when we promote them to full customer.
That sounds like a simple query, yeah?
Well.
Here's some background:
We have four applications; one in React, three in Rails. I'll replace their names to retain some anonymity.
1) "IceSkate" is the React app, and it's a glorified signup form. (I wrote this one.)
2) "Bogan" is the main application, and is API-only; its frontend has been long since deprecated by the following two:
3) "Bum" is a fork of "Bogan" that has long since diverged. It now contains admin-only tools.
4) "Kulkuri" is also a fork of "Bogan" that has long since diverged. It now contains tools specifically for customers, which they can access.
All but IceSkate (obv) share a database.
Here's how signups happen:
Signups come in from IceSkate, which hits a backend API on Bogan. Bogan writes the data to the database, charges the card immediately, and leaves the signup for moderation.
And here's how promotion from signup to customer happens:
Bum has a view allowing admins to validate, modify, and "promote" a signup to a full customer. Upon successful promotion, Bum calls "ServerWrap", a module which calls actions on the other applications; in this case: Bogan.
Bogan routes execution through three separate models before calling "ServerWrap" again, this time calling KulKuri.
Finally, KulKuri actually creates the customer!
After KulKuri finishes creating the customer, execution resumes on Bogan, which then returns, causing execution to resume on Bum. Bum then runs through several other models, references the newly-created customer object (as all three share a database), and ... updates the customer with its current data, and then updates the signup object. After all of this, it finally shows the admin the "new customer" view.
It took me 25 minutes to follow the chain of calls, and I still don't know quite what's going on. I have no idea if any of it sends an email or not -- I didn't see any signs of this, but I very easily could have overlooked something.
So, to answer bossman's question... I asked the accounting people if they send the email manually. If they don't, it's automatic, which means I missed something and get to burrow through that mess all over again!
I really hope I missed something; otherwise I need to figure out how and where (and when!) to send the email...
just...
errrrgghh9 -
I've optimised so many things in my time I can't remember most of them.
Most recently, something had to be the equivalent off `"literal" LIKE column` with a million rows to compare. It would take around a second average each literal to lookup for a service that needs to be high load and low latency. This isn't an easy case to optimise, many people would consider it impossible.
It took my a couple of hours to reverse engineer the data and implement a few hundred line implementation that would look it up in 1ms average with the worst possible case being very rare and not too distant from this.
In another case there was a lookup of arbitrary time spans that most people would not bother to cache because the input parameters are too short lived and variable to make a difference. I replaced the 50000+ line application acting as a middle man between the application and database with 500 lines of code that did the look up faster and was able to implement a reasonable caching strategy. This dropped resource consumption by a minimum of factor of ten at least. Misses were cheaper and it was able to cache most cases. It also involved modifying the client library in C to stop it unnecessarily wrapping primitives in objects to the high level language which was causing it to consume excessive amounts of memory when processing huge data streams.
Another system would download a huge data set for every point of sale constantly, then parse and apply it. It had to reflect changes quickly but would download the whole dataset each time containing hundreds of thousands of rows. I whipped up a system so that a single server (barring redundancy) would download it in a loop, parse it using C which was much faster than the traditional interpreted language, then use a custom data differential format, TCP data streaming protocol, binary serialisation and LZMA compression to pipe it down to points of sale. This protocol also used versioning for catchup and differential combination for additional reduction in size. It went from being 30 seconds to a few minutes behind to using able to keep up to with in a second of changes. It was also using so much bandwidth that it would reach the limit on ADSL connections then get throttled. I looked at the traffic stats after and it dropped from dozens of terabytes a month to around a gigabyte or so a month for several hundred machines. The drop in the graphs you'd think all the machines had been turned off as that's what it looked like. It could now happily run over GPRS or 56K.
I was working on a project with a lot of data and noticed these huge tables and horrible queries. The tables were all the results of queries. Someone wrote terrible SQL then to optimise it ran it in the background with all possible variable values then store the results of joins and aggregates into new tables. On top of those tables they wrote more SQL. I wrote some new queries and query generation that wiped out thousands of lines of code immediately and operated on the original tables taking things down from 30GB and rapidly climbing to a couple GB.
Another time a piece of mathematics had to generate all possible permutations and the existing solution was factorial. I worked out how to optimise it to run n*n which believe it or not made the world of difference. Went from hardly handling anything to handling anything thrown at it. It was nice trying to get people to "freeze the system now".
I build my own frontend systems (admittedly rushed) that do what angular/react/vue aim for but with higher (maximum) performance including an in memory data base to back the UI that had layered event driven indexes and could handle referential integrity (overlay on the database only revealing items with valid integrity) or reordering and reposition events very rapidly using a custom AVL tree. You could layer indexes over it (data inheritance) that could be partial and dynamic.
So many times have I optimised things on automatic just cleaning up code normally. Hundreds, thousands of optimisations. It's what makes my clock tick.4 -
My react code in production broke because one of my senior renamed a field in sql query to 'id' instead of invoiceid.8
-
# Retrospective as Backend engineer
Once upon a time, I was rejected by a startup who tries to snag me from another company that I was working with.
They are looking for Senior / Supervisor level backend engineer and my profile looks like a fit for them.
So they contacted me, arranged a technical test, system design test, and interview with their lead backend engineer who also happens to be co-founder of the startup.
## The Interview
As usual, they asked me what are my contribution to previous workplace.
I answered them with achievements that I think are the best for each company that I worked with, and how to technologically achieve them.
One of it includes designing and implementing a `CQRS+ES` system in the backend.
With complete capability of what I `brag` as `Time Machine` through replaying event.
## The Rejection
And of course I was rejected by the startup, maybe specifically by the co-founder. As I asked around on the reason of rejection from an insider.
They insisted I am a guy who overengineer thing that are not needed, by doing `CQRS+ES`, and only suitable for RND, non-production stuffs.
Nobody needs that kind of `Time Machine`.
## Ironically
After switching jobs (to another company), becoming fullstack developer, learning about react and redux.
I can reflect back on this past experience and say this:
The same company that says `CQRS+ES` is an over engineering, also uses `React+Redux`.
Never did they realize the concept behind `React+Redux` is very similar to `CQRS+ES`.
- Separation of concern
- CQRS: `Command` is separated from `Query`
- Redux: Side effect / `Action` in `Thunk` separated from the presentation
- Managing State of Application
- ES: Through sequence of `Event` produced by `Command`
- Redux: Through action data produced / dispatched by `Action`
- Replayability
- ES: Through replaying `Event` into the `Applier`
- Redux: Through replay `Action` which trigger dispatch to `Reducer`
---
The same company that says `CQRS` is an over engineering also uses `ElasticSearch+MySQL`.
Never did they realize they are separating `WRITE` database into `MySQL` as their `Single Source Of Truth`, and `READ` database into `ElasticSearch` is also inline with `CQRS` principle.
## Value as Backend Engineer
It's a sad days as Backend Engineer these days. At least in the country I live in.
Seems like being a backend engineer is often under-appreciated.
Company (or people) seems to think of backend engineer is the guy who ONLY makes `CRUD` API endpoint to database.
- I've heard from Fullstack engineer who comes from React background complains about Backend engineers have it easy by only doing CRUD without having to worry about application.
- The same guy fails when given task in Backend to make a simple round-robin ticketing system.
- I've seen company who only hires Fullstack engineer with strong Frontend experience, fails to have basic understanding of how SQL Transaction and Connection Pool works.
- I've seen company Fullstack engineer relies on ORM to do super complex query instead of writing proper SQL, and prefer to translate SQL into ORM query language.
- I've seen company Fullstack engineer with strong React background brags about Uncle Bob clean code but fail to know on how to do basic dependency injection.
- I've heard company who made webapp criticize my way of handling `session` through http secure cookie. Saying it's a bad practice and better to use local storage. Despite my argument of `secure` in the cookie and ability to control cookie via backend.18 -
I am a Technical Lead in the department in my company that writes code for our clients that have money but doesn't have the technical expertise to handle the complexities of our own software.
Part of my tasks involve taking care of a few projects written by employees that have left after using third-party tools rather than using our own software. No one else in this department knows these third-party tools, they only know our own, and my *still limited* web development experience means I get dumped these things in my lap.
And I'm SO pissed at these projects and their authors and the manager that let these ex-employees write these things. There is this one project that was managed by two different "developers" (I don't know they deserve this title) at two different times, and it is so riddled with different technologies it makes me want to throw up almost daily.
Don't believe me? Here is a complete list of the dependencies listed in the package.json of this project: babel-polyfill, body-parser, cookie-parser, debug, edge, edge-sql, excel-to-json, exceljs, express, html-inline, jade, morgan, mssql, mysql, pug, ramda, request, rotating-file-stream, serve-favicon, webpack, xlsx, xml2js
What this doesn't even show, is that one part of this project (literally one page) is made using react, react-dom, react-redux, and jade. The other part (again literally one page) is made using Angular and Pug. In case you missed it while picking up your jaw, there's also mssql, mysql, edge and edge-sql. excel-to-json, exceljs, xlsx.
Oh you want *more* juicy details? This project takes the entire data object used by the front-end, stringifies it into JSON, and shoves it into the database *as a single field*. And instead of doing WHERE clauses in the SQL queries, it grabs the entire table, loops, parses the json, and does a condition on it. If even one of those JSON entries gets corrupted, the entire solution breaks because these "developers" don't know what try/catch is.
The client asked for a very simple change in their app, which was to add a button that queries the back-end for a URL, shows it in a modal dialog, after which a button is clicked to verify the link by doing a second query to the back-end before modifying a couple of fields in the page.
This. Took. Me. Two. Months*. Save me. Please, save me.
*between constant context switches between this and other projects that were continuously failing because of their mistakes.4 -
To me this is one of the most interesting topics. I always dream about creating the perfect programming class (not aimed at absolute beginners though, in the end there should be some usable software artifact), because I had to teach myself at least half of the skills I need everyday.
The goal of the class, which has at least to be a semester long, is to be able to create industry-ready software projects with a distributed architecture (i.e. client-server).
The important thing is to have a central theme over the whole class. Which means you should go through the software lifecycle at least once.
Let's say the class consists of 10 Units à ~3 hours (with breaks ofc) and takes place once a week, because that is the absolute minimum time to enable the students to do their homework.
1. Project setup, explanation of the whole toolchain. Init repositories, create SSH keys for github/bitbucket, git crash course (provide a cheat sheet).
Create a hello world web app with $framework. Run the web server, let the students poke around with it. Let them push their projects to their repositories.
The remainder of the lesson is for Q&A, technical problems and so on.
Homework: Read the docs of $framework. Do some commits, just alter the HTML & CSS a bit, give them your personal touch.
For the homework, provide a $chat channel/forum/mailing list or whatever for questions where not only the the teacher should help, but also the students help each other.
2. Setup of CI/Build automation. This is one of the hardest parts for the teacher/uni because the university must provide the necessary hardware for it, which costs money. But the students faces when they see that a push to master automatically triggers a build and deploys it to the right place where they can reach it from the web is priceless.
This is one recurring point over the whole course, as there will be more software artifacts beside the web app, which need to be added to the build process. I do not want to go deeper here, whether you use Jenkins, or Travis or whatev and Ansible or Puppet or whatev for automation. You probably have some docker container set up for this, because this is a very tedious task for initial setup, probably way out of proportion. But in the end there needs to be a running web service for every student which they can reach over a personal URL. Depending on the students interest on the topic it may be also better to setup this already before the first class starts and only introduce them to all the concepts in a theory block and do some more coding in the second half.
Homework: Use $framework to extend your web app. Make it a bit more user interactive with buttons, forms or the like. As we still have no backend here, you can output to alert or something.
3. Create a minimal backend with $backendFramework. Only to have something which speaks with the frontend so you can create API calls going back and forth. Also create a DB, relational or not. Discuss DB schema/model and answer student questions.
Homework: Create a form which gets transformed into JSON and sent to the backend, backend stores the user information in the DB and should also provide a query to view the entry.
4. Introduce mobile apps. As it would probably too much to introduce them both to iOS and Android, something like React Native (or whatever the most popular platform-agnostic framework is then) may come in handy. Do the same as with the minimal web app and add the build artifacts to CI. Also talk about getting software to the app/play store (a common question) and signing apps.
Homework: Use the view API call from the backend to show the data on the mobile. Play around with the mobile project to display it in a nice way.
5. Introduction to refactoring (yes, really), if we are really talking about JS here, mention things like typescript, flow, elm, reason and everything with types which compiles to JS. Types make it so much easier to refactor growing codebases and imho everybody should use it.
Flowtype would make it probably easier to get gradually introduced in the already existing codebase (and it plays nice with react native) but I want to be abstract here, so that is just a suggestion (and 100% typed languages such as ELM or Reason have so much nicer errors).
Also discuss other helpful tools like linters, formatters.
Homework: Introduce types to all your API calls and some important functions.
6. Introduction to (unit) tests. Similar as above.
Homework: Write a unit test for your form.
(TBC)4 -
I wanted to build a website to search for aircraft accidents, so scraped the NTSB and FAA websites and built a database out of it.
Then I went to write search fields for Make and Model. I wanted it to be easy to know if there were results for a given Make before someone tried to query by it. And then fell into the rabbithole of how to make something like that accessible.
One thing led to another and: https://github.com/amyshackles/...
Still need to add testing and better documentation and clean it up a bunch, but it’s starting to look like something, maybe. -
I can now appreciate some design decisions behind react-redux after witnessing some angular OOP clusterfuck.
I am sure there is some clean/correct way to code in angular, but everyone is treating angular as java.
Some angular application (the one I have to work with) is littered with network calls. It's difficult to spot duplicates. People usually resolve promises everywhere. In services, in a top-level component, or in for loops. In react, people use apollo/redux-query or redux-saga to handle network calls. Since these libraries prevent duplicate network calls internally and reassigning apollo network call function or redux action function is always useless, it's easy to spot all network calls in a component tree.
In angular, it's difficult to trace data mutations when data can be updated everywhere. In react, you can easily find UI state updates by tracing state hooks/dispatch/apollo usages.
In angular, it's difficult to trace data pipeline. Since everything is imperative by default, people need to add update functions in data subscriptions. With all the littered mutations. Soon you will lose track of what the fuck is going on.
I hope angular get the agonizing death it deserves and fuck everyone who codes JS OOP clusterfuck UI.8 -
React Native testing is hair pulling.
Every test needs to have 100 different mocks in place and there are: 3 different methods to mock a function (mock, mockImplementation, and fn), 3 different types of query methods to get elements (get, find, and query), and 5 different selectors to query on (accessibility label, testId, accessibility hint, accessibility value, etc.)
And after reading all this, being diligent and learning the difference between stupid, synonymously-named functions which have wildly different side effects like "getByA11yHint" and "findByA11yHint" (ugh...), after all that, you write out a test with all the appropriate mocks and you want to do something simple and it beats you up all over again.
Button enabled or button disabled. Simple right? Logically the former is "expect(elem).toBeEnabled()" and the latter is "expect(elem).not.toBeEnabled()", right?
Wrong! You're an imbecile. Your tests will fail and never tell you that ".not.toBeEnabled()" and ".toBeDisabled()" don't do the same thing even though they look and sound exactly the same. Only the latter will work. The former makes all your tests fail. Where is this written in the docs? Nowhere?! Great!
👌😄🔫3 -
You're kidding. You know how React, GraphQl, and Jest are made by facebook. You would think that Jest then would be framework of choice for mocking gql queries and responses for a React app. And you would be wrong. You "can, but-", depending on your implementation - ours being based on official sources - not without contorting and duplicating everything related to the query implementation at which you are barely even testing the app itself. We're using named imports from .gql files, for those familiar.
Don't you hate it when it turns out the guy going "nah tests were too hard, we didn't bother" was right.3 -
In the beginning I was a retard, but then found out about React Query, learned it, made some abstractions around Axios and my JWTs, and now I have 200+ IQ.
God bless Tanner Linsley, you mormon crazy bastard, you did it, you made my life easier.8 -
Hi, recently I created this package for react: https://npmjs.com/package/...
Its like a smaller alternative for React Query.
Feel free to give it a try. Feedbacks will be appreciated. Thanks :) -
I need just a bit of advice.
I am working with node.js and React and mongoDb
I just want that please take a look at my schema architecture (Specially for address) for profile and suggest me which is better
Approach 1 :
https://paste.centos.org/view/...
The things that scared me with this approach. I tried this also But it become unnecessary headaches to insert address and then query address as it is nested schema .
Also if you check this out
https://stackoverflow.com/questions...
[Answer by Konstantin Smolyanin (Long Version))]
One must not considered nested state in react.
Approach 2
https://paste.centos.org/view/...
I can store address into another collection
Also is there any reference sites where I can learn about schema architecture or database design with practical scenarios.
Thanks for reading out.4 -
Typescript Question
This is something that's been bugging me for a longer time now.
I did couple of React/typescript project (CRA) and it just keeps on happening and I have no idea why and even better - I have no idea how to query google with about problem.
From time to time I open a file that I KNOW was without any errors and suddenly BOOM - Parameter 'XYZ' implicitly has an 'any' type. And now I need to go and add explicit types everywhere it wants me to. TS Server restart doesnt help. Why does this keep happening? Any Typescript guru please?3