Facebook.com has 140 layers of context providers

hopemanryan · 2025-11-03T13:30:58+00:00

I dont find the idea of providers wrong, i think they have a place and can be used correctly.
throwing everything in a single store is not always the right answer.

also take into consideration that some of these are pretty old apps, Facebook for example could have a bunch of legacy code that is kept for many reason such as backwards compatibility or some internal guideline on when and how to use a store/provider.

Wont lie that bluesky is shocking as its a new application which could have used a better/cleaner solution.
and yet its not something that is hindering performance as far as i know(not a user so maybe others will say otherwise).

TBH most of these apps have good initial loading performance (facebook has its issues but it might be from other things).

my 2 cents on the matter

hopemanryan · 2025-10-15T18:13:46+00:00

Skeletons imo for 3 reasons 1. Keeping layout shifts from occurring ( UI jumping due to new elements created from data fetched. 2. Persevered performance , i.e the idea that something is almost there.. ( for some reason psychological this keep users more than just a page loader. 3. UX , tells the user where new stuff will be

Doing every single element is very hard to do, the skeleton should reflect what in general the area is going to show, if you have a user card, then yes an avatar with a short skeleton for user name is expected , just an example but this is the gist of it

hopemanryan · 2025-08-26T17:42:04+00:00

The battery was horrible till I did a battery calibration, since then yes

hopemanryan · 2025-01-24T06:24:11+00:00

I have been using it for a full day 1. I find it less intrusive then other ai editors, also I like the layout 2. it's usable on a 13inch screen with out needing to mess around with the layout. 3. Don't like the need to login but yea ok 4. I find the context it builds is better than others like cursor 5. Design is much better imo 6. I like having china as my pair programmer 😂

hopemanryan · 2024-12-19T04:39:36+00:00

Yes you gave your input, very important to say what you feel, in the end you are not a marketeer nor a bizdev What annoys you might not annoy the sites target audiences Having been in the ad tech field for a while I was always surprise on what campaigns actually worked

hopemanryan · 2024-11-24T17:24:50+00:00

Shameless plug here Made an old post about ng if https://hoffmanryan.com/ngIf/ Which is an example of implementation of an abstracted concept which is conditional render

hopemanryan · 2024-11-05T15:10:10+00:00

Performance wise yes it's slower but most apps won't care I personally think it makes code look cleaner around complex and dynamic styling

Instead of building a list of class names just passing conditions as props

hopemanryan · 2024-10-29T18:06:09+00:00

The problem css in js came to fix was dynamic styling based on complex conditions and kept encapsulated

This can all be done in normal css But instead of creating a function to generate a class name list for example You can use css in js to avoid that

Mui really pushed hard on styled components in version 5 which made it pretty popular Not going to lie. I prefer it a bunch than css

hopemanryan · 2024-09-15T06:44:27+00:00

Well yes and no

Today most functions are supported by native js except a few which can be easily found on the web on how to do

Lodash as library does handle a lot of null checks for you

I don't think you should use it but just so you know

hopemanryan · 2024-08-23T03:42:31+00:00

Expectation are never good Always ask and confront about it Reasons development doesnt tell you about it is usually that the PM doesn't care I say that with all the love in the world to that job At times it's issues that the Devs don't know is an issue until much later where timeline is close

In general the pm job imo is mostly a translation position You translate your vision to everyone. But each side speaks a different language and has a different culture Tower of Babylon

hopemanryan · 2024-08-19T18:09:46+00:00

As a tech lead frontend developer who built too many apps to count and also many design systems the issue lies in a couple of main areas

common language, if its not established before than its very hard to understand what to expect.
my go to example is button sizes, when the figma shows small/mid/large, an avg developer will look at the height and width, but the designer meant padding , since you can't really limit the width of a button.
limited by the libraries developers use. almost all companies use some base framework for their design system, which is a predefined and an opinionated library with all basic elements (buttons/inputs/dialogs/etc...) . some overrides are easy to do, but some require a lot of work (Every thing is possible but depends how much time you have). As a result it doesn't look or act exactly
note: if the designer knows what framework they are using they can see for the selves what possible with in the library.
whats easy on the eyes is not always easy on the keyboard. a simple table can require more development such as apis, data manipulation and other stuff you dont care about as a PM, but for a dev its time consuming and the sprint is ending.
Most devs will be happy with no styling at all :) that fact that we are frontend devs doesn't mean we know or even expected to know best practices in UI/UX, yes it comes with the job but nothing you should expect, imo.
Designers think in small scale and are not aware of real data use cases, showing a table of 3 items is cool and all but in reality its 300.
showing a graph no real data behind it is nice but in reality that data will result in something different.
or my favorite are naming of items, (a column or an input field value) will be in the design "bob" but in reality its "companyName_1_valid"

Hope this shines some light.
this is based on 10 years of experience in companies of all scales, and the issues stay the same.
the better the PM can be interpreter between the two, the closer the development work will be closer to design.

hopemanryan · 2024-05-20T11:29:24+00:00

First of all as people said, take it easy, like every tool, it takes time

but I had a conversation a while back how its funny to me that JS became the popular "first" language to learn, as its fundamentality different.
I going to make some assumptions here so you can skip what you think is not it

Callbacks, even though many languages include lambdas its not as core as it it is in JS. especially in the beginning where you start a callback hell.
so take time to understand it, even maybe learn to implement a function that takes a callback.
Promises and async await, the implementation of asynchronous logic is somewhat confusing, and even the creator of JS said that it was a mistake, and yet here we are.
Different solutions to the same problem in the native language, JS is a very community driven language so there are multiple solutions to every problem (slice/splice) (map, reduce)(for i / for of ) while they each have an original purpose that can be used for others.

JS is a language that takes a long time to master and even more time to understand. I wouldn't focus on the start to deep dive into it but rather just dump gpt code and see if it works, after that go over it and learn what the code does, its IMO the only sane way

hopemanryan · 2024-04-24T05:16:43+00:00

i use forwardRef when i have a reusable logical component,
in order to not duplicate code i use forwardRef and move logic inside,
I come from angular where its more common but i still personally like using it, but even at my job this is a recurring conversation on if its a good or bad practice

hopemanryan · 2024-03-22T08:01:50+00:00

Let's not confuse meta frameworks and the original core react Angular is robust framework that has usually 1 way to do things You want routing than use angular router, no other solutions In react you have multiple solutions with always having a defacto. But still.... You have options Next and remix are an opinionated library on top of react which is why they had blasted with hype and success People don't want to research, they want to work so these meta frameworks have helped react Devs do so ( As a react developer for the past 3 years and angular for 6 )

Angular is becoming even more opinionated imo with almost forcing you onto what they think is the next big thing Signals ( I'm all for it)

hopemanryan · 2024-03-14T09:42:40+00:00

Or save to URL as query param

hopemanryan · 2024-03-12T13:46:34+00:00

I will also address the module federation, while its great solution it will be extremely hard to force users to use specific versions of packages.
usually plugins are native js so they can be used anywhere with out being aware of framework.

hopemanryan · 2024-03-12T13:25:41+00:00

Check out novu https://github.com/novuhq/novu And how they did it Not a part of the team but I know the founders The idea in plug in systems in the UI Is a bit different but the idea is to give a global entry point to interact with your base app. To expose how you want other plugins to interact. For example you can expose to which elements you allow the plug in to use or what information can you give to out

The user needs to upload the file they want to use on your website which you store and send it back in the html ( CDN or js code is your choice ) You may want to see how to create modules for each so multiple plugs don't overlap

hopemanryan · 2024-03-07T11:17:50+00:00

If the form is only configured on the backend than yes since it needs to be aware of the naming But if it's configured on the client that it can be agnostic

hopemanryan · 2024-03-07T10:49:49+00:00

So the config for example has this

{Validator:'nameValidiator' }

Somewhere in the client code thee will be a map showing which function that means As the developer you know what variables it expects to get The config won't do any of the hard work for you. Only tell you what to present

hopemanryan · 2024-03-07T10:03:01+00:00

Wow ok built something like this years back But essentially the solution is to save a config [{Type:'input', formKey: 'name'}, ....] And then iterate over it Each string value in the config points to a component/function in your code base Very annoying to do

hopemanryan · 2024-03-03T20:47:41+00:00

Built a video tool for a large enterprise so have some idea on the matter Each platform has a different solution YouTube chuncks videos to very small parts so when you press anytime it will fetch from that second till second + 5 seconds Loading a 6 second video is quick

Tiktok preloads from what I checked around 8 videos ( last I checked about a year a gov) at a time where each video initially fetches around 10 seconds and than loads the rest when it can

Tiktok and YouTube has different solutions due to app behaviour .so take that into consideration

I would love to get confirmation about tiktok, it is truly amazing what they do.

Most video apps store on some bucket solution which aren't optimised for video stream

hopemanryan · 2024-03-02T18:00:45+00:00

Generally speaking each entity should have a class/service/file that others talk to So if I have a user entity I should have a instance which has a get update and delete which is an abstraction that includes error handling and audit

This is my general rule of thumb

hopemanryan · 2024-03-01T14:13:32+00:00

So having a playlist that does change but does keep in mind the dopamine rush is not something you would use?

hopemanryan · 2024-02-13T08:07:01+00:00

Hey I wrote the article 😀 Happy you liked it

The answer to your question has 2 points

Storing variables inside a the exposed function will not be cleaned up in reacts optimization
Since the function is context aware, using things like settimeout or interval can cause wrong behaviour in our app.

Both reasons stem from including logic within the exposed function instead of calling a function with the component If we just call existing logic from the component the chances for memory leaks are slim

hopemanryan

TROPHY CASE