This is also a valid advice for frontend/mobile developers. Start by trying to code yourself that website's animations, menus, navigation transitions, etc. That you admire so much. I worked for me, maybe it works for you too
A great way to improve your UI design skills is to look at the work of those who are doing it better and copy it to practice.
It’ll teach you more than you’d think ✏️
I ended my time at @Meta as a director.
But I started as an engineer on FB Chat.
Everything about it was broken — we had to rewrite it.
And while the effort to fix it is one the projects that led to @reactjs, the most important fix was far simpler...
Here’s the full story:
—
I worked on Facebook Chat for several years, both on the front end and the infrastructure.
Before the major effort to redo the UI, FB Chat was super broken and we had no idea why.
We got tons of bug reports about Chat being broken every day, but we noticed an odd pattern in the data: the volume of reports didn’t match the volume of usage. It was time-shifted from the peaks we’d see in the US.
We didn’t know what was wrong, but we knew the code was a mess.
We set about rewriting both the front-end and the back-end in an effort to fix it.
The front-end rewrite pulled in a whole team of amazing engineers and became one of the big threads that led to @reactjs
In the public eye, we portrayed this project as the one that ultimately fixed Chat.
And the way I’ve usually told it, fixing Facebook Chat and the birth of React are the same story.
But no framework was going to fix the worst problem with Chat.
—
During the time we were working on the Chat rewrite, we were also replacing the original Erlang backend with one written in C++.
This was probably a good move, but the problem wasn’t with Erlang either.
Our initial spec for the new backend didn’t say much about observability, but it was an important feature, and the rewrite forced us to rebuild it.
Little did we know this would lead us to the root cause of our problems…
When we finally gained insight into our deliverability data, we were able to cut it by region.
We noticed Chat was really popular in India. This was before WhatsApp, at a time when SMS wasn’t reliable.
Eventually we pinpointed a region in India where one specific DNS provider was giving out the wrong IP addresses for our Chat servers.
So when people went to use Chat, they would sometimes get a notification that they had a message, and then it would disappear.
Or they’d send a message and it would get lost. All because they were connecting to the wrong IP address.
That was it!
None of the sexy new tech we were working on was going to solve that problem.
Ever.
—
Instead, the solution was to build observability that allowed us to track end-to-end message delivery.
In the end, we could start with a broad cut of our data by country or web browser, and then zoom all the way in to look at what happened to a specific message for a specific user.
Once we pinpointed that the problem was with a DNS server, the matter was resolved with a quick phone call. I don’t know what they did, but I imagine it was something like turning it off and turning it on again.
We sometimes talk about observability as if it’s enough to buy a product like Datadog and just look at the pretty graphs.
Sure, that’s a start.
But true observability is a feature that needs to be built— painstakingly, iteratively, by-definition starting with a shot in the dark.
—
These days, it has become fashionable to poo-poo the idea of being data-driven.
People point out that measurement can distort the phenomenon that is being observed.
They want to make processes “data-informed.”
But this seems like silly backlash against the only rigorous standard in all of software engineering:
That we hold ourselves to an objective standard.
We measure how long things take, how many errors we encounter, how often a process successfully runs to completion.
So here’s what this experience taught me about observability:
When an issue happens in production, time-box the investigation.
Sure, take a few hours to try and figure it out by looking in the logs and inspecting the code.
But if you’re coming to the end of the day and you still don’t have a fix, then push a PR that adds logging.
The first one may be just a guess, but it will begin a process that leads to the truth.
And that is what we should all ultimately be striving for.
—
For more engineering tips and stories, follow me @dmwlff
By the end of 2024, you’ll likely never need these APIs again:
• useMemo, useCallback, memo → React Compiler
• forwardRef → ref is a prop
• React.lazy → RSC, promise-as-child
• useContext → use(Context)
• throw promise → use(promise)
• <Context.Provider> → <Context>
𝗦𝗼𝗳𝘁𝘄𝗮𝗿𝗲 𝗗𝗲𝘀𝗶𝗴𝗻 𝗥𝗲𝗱 𝗙𝗹𝗮𝗴𝘀
In his now-famous software design book, "𝗔 𝗣𝗵𝗶𝗹𝗼𝘀𝗼𝗽𝗵𝘆 𝗢𝗳 𝗦𝗼𝗳𝘁𝘄𝗮𝗿𝗲 𝗗𝗲𝘀𝗶𝗴𝗻," professor John Ousterhout from Stanford University explained the rationale behind many good and bad practices in software design with plenty of examples. Behind many good practices mentioned in the book, he also noted a few (14) critical red flags. The presence of these red flags in your system means you need help.
Here is the list of red flags:
𝟭. 𝗦𝗵𝗮𝗹𝗹𝗼𝘄 𝗺𝗼𝗱𝘂𝗹𝗲: the interface for a class or method isn't much more straightforward than the implementation
𝟮. 𝗜𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻 𝗹𝗲𝗮𝗸𝗮𝗴𝗲: a design decision is reflected in multiple modules
𝟯. 𝗧𝗲𝗺𝗽𝗼𝗿𝗮𝗹 𝗱𝗲𝗰𝗼𝗺𝗽𝗼𝘀𝗶𝘁𝗶𝗼𝗻: the code structure is based on the order in which operations are executed, not on information hiding
𝟰. 𝗢𝘃𝗲𝗿𝗲𝘅𝗽𝗼𝘀𝘂𝗿𝗲: An API forces callers to be aware of rarely used features to use commonly used features
𝟱. 𝗣𝗮𝘀𝘀-𝘁𝗵𝗿𝗼𝘂𝗴𝗵 𝗺𝗲𝘁𝗵𝗼𝗱: a method does almost nothing except pass its arguments to another method with a similar signature
𝟲. 𝗥𝗲𝗽𝗲𝘁𝗶𝘁𝗶𝗼𝗻: a nontrivial piece of code is repeated over and over
𝟳. 𝗦𝗽𝗲𝗰𝗶𝗮𝗹-𝗴𝗲𝗻𝗲𝗿𝗮𝗹 𝗺𝗶𝘅𝘁𝘂𝗿𝗲: special-purpose code is not cleanly separated from general-purpose code
𝟴. 𝗖𝗼𝗻𝗷𝗼𝗶𝗻𝗲𝗱 𝗺𝗲𝘁𝗵𝗼𝗱𝘀: two methods have so many dependencies that it's hard to understand the implementation of one without understanding the implementation of the other
𝟵. 𝗖𝗼𝗺𝗺𝗲𝗻𝘁 𝗿𝗲𝗽𝗲𝗮𝘁𝘀 𝗰𝗼𝗱𝗲: all of the information in a comment is immediately obvious from the code next to the comment
𝟭𝟬. 𝗜𝗺𝗽𝗹𝗲𝗺𝗲𝗻𝘁𝗮𝘁𝗶𝗼𝗻 𝗱𝗼𝗰𝘂𝗺𝗲𝗻𝘁𝗮𝘁𝗶𝗼𝗻 𝗰𝗼𝗻𝘁𝗮𝗺𝗶𝗻𝗮𝘁𝗲𝘀 𝗶𝗻𝘁𝗲𝗿𝗳𝗮𝗰𝗲: an interface comment describes implementation details not needed by users of the thing being documented
𝟭𝟭. 𝗩𝗮𝗴𝘂𝗲 𝗻𝗮𝗺𝗲: the name of a variable or method is so imprecise that it doesn't convey much useful information
𝟭𝟮. 𝗛𝗮𝗿𝗱 𝘁𝗼 𝗽𝗶𝗰𝗸 𝗮 𝗻𝗮𝗺𝗲: it isn't easy to come up with a precise and intuitive name for an entity
𝟭𝟯. 𝗛𝗮𝗿𝗱 𝘁𝗼 𝗱𝗲𝘀𝗰𝗿𝗶𝗯𝗲: to be complete, the documentation for a variable or method must be extended.
𝟭𝟰. 𝗡𝗼𝗻𝗼𝗯𝘃𝗶𝗼𝘂��� 𝗰𝗼𝗱𝗲: the behavior or meaning of a piece of code cannot be understood
How does this resonate with you? Do you agree with all of them? Write in the comments.
#softwaredesign
¡Curso de Google para Aprender Testing desde cero!
✓ Gratuito y en Español
✓ Vitest, React y Web Components
✓ Tipos de pruebas y automatización
✓ Herramientas y prácticas recomendadas
Te dejo el acceso en el primer comentario ↓
"The cybersecurity reality we live in now is teenagers are running around in organized crime gangs with digital bazooka’s. They probably have a better asset inventory of your network than you, and they don’t have to wait 4 weeks for 38 people to approve a change request for patching 1 thing."
If you think that patching critical public facing infrastructure within 24hrs is not a realistic goal then tell me why!
Despite all the security awareness we have here in 2023, all the new fancy tools we have, and all the celebration of coordinated government take downs of threat actor groups, cybercrime gangs are still on the rise hitting more companies and making more money than ever this year.
You need to be able to identify and patch something like CitrixBleed within 24 hours — if you cannot, there is a very real possibility it isn’t the ideal product fit for your company due to the level of risk it poses, and you need to rethink if the architecture and look for a solution you can manage.
The LockBit ransomware group has assembled a strike team to breach banks, law firms and governments and I don't see this stopping anytime soon.
Follow this link for Kevin Beaumont's @GossiTheDog deeper dive into the topic:
https://t.co/uQsyDp4ALD
@EdwinEsneyder@quirozangela@Bancolombia Ah cómo así? Entonces para reclamar por un buen servicio hay que pagar el equivalente a los salarios de todos los responsables? Ojalá no pongas una empresa, que no entiendes como funcionan los cobros. Puede q un usuario no pague lo de un tinto, pero son millones de usuarios 🤷
Adding modularity to your React Native library? Watch @zoontek's (@swanapi) talk from @react_native_eu 2023, and it’ll be a piece of cake 📺 https://t.co/DZCOQb8Rsu
Check out more talks from #RNEU2023 ⏯️ https://t.co/WF4O7vIyZM
A Deep Dive into HTTPS, SSL Handshake, and Data Encryption over HTTP, the language of web 🔐🌐
🔍 Explore the inner workings of online security with this flyer! Delve into the intricate layers of HTTPS, unravel the complexities/simplicity of the SSL handshake, and unearth the mechanics of data protection. 💻🔒
🛡️ HTTPS: Safeguards your data from eavesdroppers and breaches. Understand how encryption and digital certificates create an impregnable shield.
🤝 SSL Handshake: Behind the Scenes — Witness the cryptographic protocols that establish a secure connection. Experience the intricate exchange of keys and negotiation.
🌐 Secure Data Transmission: Navigating the Tunnel — Journey through the encrypted tunnel forged by HTTPS. Learn how your information travels while shielded from cyber threats.
🕸️ HTML's Role: Peek into HTML's role in structuring the web. Uncover how hyperlinks and content come together seamlessly. And why is it called as HYPER TEXT.
Now, let's delve deeper: In this ever-evolving digital landscape, what emerging technologies do you foresee shaping the future of cybersecurity or web? Join the conversation below! 👇💭
#HTTPSExploration #SSLHandshakeDemystified #DataEncryption #CybersecurityTech #HTMLStructures #Web #futureOfWeb
I made this flyer for @bytebytego 💕🫶
Hot take: You probably should build your mobile apps using an offline-first approach. It's better for users, and it's better for developers. After using WatermelonDB for my last project, I now tested PowerSync by building a demo chat app in React Native. Here is what I learned:
Si quiero adquirir más conocimiento en desarrollo back y front, armarme mejor para estar mejor parada en lo profe… — Para web no me parece esencial si tu meta es conseguir trabajo https://t.co/TfpldNXoX5