Идея “измерьте, прежде чем делать выводы” — вроде бы очень простая, я в неё верю применительно ко всему
(перформансу приложения, перформансу разработчиков, эффективности ai и даже уровню счастья и методам его достижения).
Однако идея, которая мне очень срезонировала — это то, что скорее всего через пару лет каждый разработчик будет менеджером, который
управляет командой AI-агентов. Так что даже если сегодня вы не планируете становится менеджером и лидом, возможно, надо подумать.
Хорошее время, чтобы укрепить свою техническую экспертизу, навыки код-ревью и координации процессов (как будто есть плохое время, чтобы все это развивать, хе-хе).
P.S. Еще обсуждали интересный практический пример эффективного применения AI - для миграций. Как и юнит-тесты, мигранции
обычно не вдохновляют приблизительно никого. Однако при правильном подходе здесь AI может и ускорить, и снять нагрузку.
I read that hakerrank has challenges organized by domain — for example, the React domain — and decided to solve them as part of my interview
preparation.
I completed all of them, but not satisfied. Here’s why:
The challenges don’t feel like real interviews. They give you a lot of
code, while in actual interviews you often write components almost from scratch.
The tests are not reliable. In one case, I had to remove the key from react element just to
make their test pass. Test kept a reference to the element at the start and didn’t update it
after re-render.
In another challenge, tests used hardcoded outdated dates, so I had to add a weird condition
just to pass.
The platform itself has issues. Sometimes my progress wasn’t saved. A couple of times I
submitted a solution, saw the “Congratulations” screen, went back to the challenge list — and it showed the challenge as unsolved. I had to redo the solution. Eventually, I started double-clicking the submit button just in case, because I didn’t want to retype everything again.
Overall, I regret the time spent a little, because mostly I fought with tests, not with
solving problem. Moreover, challenges turned out to be not so interesting. I liked leetcode
experience more.
Two days before release — and guess what? Suddenly, all popovers with information about meeting rooms in our app broke and stopped displaying. We hadn’t even changed anything related to this functionality — how could this happen?
Situation
It turned out that the popovers were broken in all browsers except Chrome. And after the latest Chrome update, they stopped working there too.
What happened?
Four years ago, someone decided it was fine to hide a <g> element using display: none, but still call node.getBoundingClientRect() on its child elements to calculate the popover’s position.
It worked… until it didn’t. Now, all modern browsers correctly return zero for the coordinates and size of any child inside a display: none element.
To be honest, I didn’t want to refactor much, so I replaced display: none with opacity: 0. In this case, the element is still invisible to the user but remains in the document flow and keeps its size.
I hadn’t parsed a JWT token on the client before, but this week our backender said that he
didn’t have time to create a new endpoint like /user, and that I should extract user information
from the JWT token in a cookie.
My first thought was: is this okay? On all projects that I’ve seen backend gave me endpoint like
/user, /me, /current — and these endpoints were created for a reason, weren’t they?
Yes, there are reasons:
you cannot store sensitive, confidential information in JWT payload
you should be mindful of the size of the JWT (it is transmitted with cookies in every request)
For example, it is not a good idea to store in JWT permissions for user and rely on it in your
UI. Because someone can modify the token, and your application could be at risk.
However, this means you can use a JWT to store some basic user information. In my current
situation, I only need name, email and photo of the authorized user, so I started parsing JWT for
this data and backend developer took another task.
What do you need for parsing JWT on client?
JWTs are Base64 encoded and contain of three parts: header, payload, and signature. You can
write your own decoding function or use one of the ready-made solutions. I checked what is there on
the internet for handling JWT tokens on the client-side:
jsonwebtoken — very popular library for Node.js.
It is used for generating and verifying JWTs on the server-side, can be used on the client side.
It’s a good library, but overkill for my case.
jose — another library for implementing JWT, it provides
functionality for signing and verifying tokens and set of utility functions. Again: good, but
overkill for my case.
jwt-decode — lightweight library only for decoding
tokens. Single-purpose, easy to use, zero dependencies — that’s the winner for today.
I’ve been using Cursor for 3 weeks, and I’m really impressed. Of course, it is not ideal and it
doesn’t replace a human developer (for now), but it can help in a lot of ways.
My favorite uses for it are writing tests with instructions, creating TS types, and
drawing diagrams. Let’s look closer at each case.
Writing tests
Not all developers love to write unit and integration tests. I personally lose my inspiration
when I need to create a lot of mocks, do some routine tasks for preparing the test environment and
try to make everything work with components or other libraries.
And that’s the place where AI shines! Of course not without a helping hand, but…
How I improved results of generation
created mdx files with instructions for writing tests with examples (separate files
for unit and integration tests)
described the flow: AI ought to write tests, after that run them and check results. If there are
failed tests, AI fixes them
run command write tests for ... and add relevant instructions to the context
Of course, there is still a lot of work with reviewing, but with mocks and setting up
environments it helps a lot.
Generating types
When you get a new endpoint and add it to your application, you need to describe types. In all our
projects we use TypeScript, and before starting to use AI I created types manually (there is
Swagger only on some of the projects). But now… I just need to give the API response to AI and
describe what it is and some constraints — and after a few minutes I have generated types. There
is room for improvement, but it speeds me up a lot.
Diagrams
I love diagrams, and I believe that it is easier to understand processes and technical details
from diagrams and schemes, not from plain text. And I explored a whole new world for me with
this prompt: @project explain how is ___ implemented and draw a scheme of how ____ works.
I can read and have a mermaid diagram (I just copy and paste in an online mermaid editor) in front of
my eyes — it has simplified a lot.
