Reverse-Engineering Everything to Get Rid of Trust Issues

Rate this content
Bookmark

Like it or not, those days lots of things around us run on JavaScript. Web, mobile and desktop apps, TVs, fridges and space rockets - you name it! I will talk about how to put this to good use by utilizing the forbidden craft of "disassembling". We'll also talk about not knowing things, trusting facts and becoming a better engineer.

This talk has been presented at JSNation 2024, check out the latest edition of this JavaScript Conference.

FAQ

The speaker's name is Mikhail, and they work as a developer experience engineer at a company called TopTel.

The speaker believes that it is okay to not know everything about JavaScript. With time and experience, you accumulate knowledge of edge cases and how to use tools effectively, even if you don't understand how they work under the hood.

The common interview question mentioned is: 'What is the order in which the console log is going to pop out?'.

The speaker gives an example of modifying browser cookies and website code using Chrome Developer Tools to illustrate the power and flexibility of JavaScript.

The speaker believes that JavaScript has taken over the world as a programming language of choice for consumer applications and that it gives developers unprecedented power to modify and change code at runtime.

The speaker suggests admitting that you don't know the answer but expressing confidence in your ability to find out.

The main story shared by the speaker is about how they manipulated a promotion game on a website by using Chrome Developer Tools to inspect and modify the website's code and browser cookies.

The speaker mentions using Chrome Developer Tools, specifically the network tab and sources tab, for inspecting and modifying website code.

The speaker acknowledges that there are many JavaScript frameworks and libraries, such as React and Next.js, and highlights the importance of understanding how they work, even if you don't know every detail.

The overall message is that it's okay to not know everything about JavaScript or web development tools, and that learning and experimenting can lead to better understanding and proficiency.

Mikhail Korolev
Mikhail Korolev
20 min
17 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
JavaScript's power and versatility make it the programming language of choice for consumer applications worldwide. A JavaScript engineer should understand how things work, even if they don't know everything. The Talk discusses modifying websites, uncovering game rigging through developer tools, analyzing fetch requests and overrides, refactoring and state management, and website modification. The speaker shares personal experiences and highlights the importance of understanding and being able to modify code in real-time.

1. JavaScript's Power and Versatility

Short description:

Hi there, JS Nation. Thank you for tuning in. As a JavaScript engineer, you might have seen this classic interview question about the order of console logs. It's okay not to know everything, but it's nice to understand how things work. JavaScript has become the programming language of choice for consumer applications worldwide. It's versatile and allows you to modify and change code at runtime.

Hi there, JS Nation. Thank you so much for tuning in, and I hope you are having a fantastic day today. Regardless of if you turned in just for the remote section or you got a chance to maybe meet me in person, in which case, hello again.

Right. So as a fellow JavaScript engineer, you might have seen an interview question similar to this. This is your classic old one, which is what's the order in which the console log is going to pop out, right? And if you're an interviewer, maybe you've even asked a question like this during the interview, and in which case, kind of shame on you, but who am I to judge? And I think the correct, good way in my opinion to answer this question is, I have no idea, but I know how to find out. And my name is Mikhail, and I work as a developer experience engineer in a company called TopTel.

Right? These days, I'm mostly obsessed with developer happiness and frontend infrastructure. I usually talk about silly things, but today, I want to state that you don't have to know everything. You know, every other week, there's something crazy happening in the JS world, and you feel like you're going to miss out if you don't jump right into it, right? For instance, of course, if you are a React developer, you've obviously used hooks, and I hope you do use them now. And do you actually know how the hooks work under the hood? Do you know how those magical functions appear? How do they know when to get called, right? Or what is the source of swell to reactivity? How does it work? What's this magic dollar sign? And I think it is okay to not know. With time and experience, you accumulate all the, you know, all the edge cases, how to use them, how to not use them. With any tool, you learn how to use it, but you don't actually have to know, to understand it works under the hood in order to use it effectively, right? But it's nice to know, isn't it?

Anyway, however, I don't know how many last years that JavaScript has taken all over the world as a programming language of choice for consumer application space. It's very easy to find JavaScript developers to build your desktop app, mobile app, website, web app. It's on the edge, in the cloud, everywhere. We even sent JavaScript to space and I'm not blaming the business for that because, you know, it's relatively cheapish to find a nice developer that's gonna do a lot of stuff in the same time. That is good. Mostly, those use cases are good enough for JavaScript, right? And no matter how you cook it, at the end, it's always the JavaScript that comes out. It can be TypeScript, ReasonML, any other superset of JavaScript, but what's runs in the runtime is always JavaScript. There's no way around that. Some of you may hate it. I could say I've been in a similar camp myself, right? Like you don't know, you don't need those 150 megabytes of extra browser with your Slack, right? And all those JavaScript is slow and yada yada yada. You know that well, right? But I actually think that JavaScript, everything running on JavaScript gives you the never before seen power to modify and change the code at runtime. You can inspect everything. You can override everything. It's kind of like, you know, this changing the car tires. You go. I have a very good example. So for instance, let's say you want to look up what are the browser cookies. You, you know, usual thing.

2. Modifying Websites and Daily Lottery

Short description:

You go on Google, find an article, but something prevents you from browsing further. In a native app, you can't modify the website. Storytime: a US-based healthy food store offers a promotion page where customers can enroll in a daily lottery by spending $200. After logging in, flipping cards reveals discount offers. Users can buy vegan bars at a discount. I experienced discounts ranging from 40% to 87%.

You go on Google, you find a nice article, you start reading it, blah, blah, blah. Something happens. And that is something that prevents you from browsing further. And you know what, what I usually do, I hope I'm not the only one who does that, but I just go to the developer tools and just remove that, right? Maybe something about my ad block or whatever else, but there's that you just do, you just done that you just modify the website. Imagine doing this in a native app. It is not possible whatsoever.

Okay. Storytime. There is a website called the garden.com.us, which is a US based healthy and expensive food store. And there is a promotion page on the website, which is assumed to facilitate the sales for every $200 spent. You get a chance to enroll into a daily lottery. That looks like this. So you go in, you log in as a respectable customer. You log in with your loyalty ID, you press the login button, then start the game. You flip some cards, get a discount offers. It's all good. Then my user can go and buy your vegan bars with 40% discount in the store in person. The next day you come back, there's a 24 hour cool down, and then you come back to the store, you do all the thing again. Right? I was like, okay, that's fine. It seems okay. That was interesting. There's 40%, there's 35%. That was good. It looks like I could get some pretty good discounts here. 60%. 87%. Imagine getting that. That is good. So I did that. Then I left.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Modern Web Debugging
JSNation 2023JSNation 2023
29 min
Modern Web Debugging
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Building a Voice-Enabled AI Assistant With Javascript
JSNation 2023JSNation 2023
21 min
Building a Voice-Enabled AI Assistant With Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
A Practical Guide for Migrating to Server Components
React Advanced 2023React Advanced 2023
28 min
A Practical Guide for Migrating to Server Components
Top Content
Watch video: A Practical Guide for Migrating to Server Components
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.
Tracing: Frontend Issues With Backend Solutions
React Summit US 2024React Summit US 2024
112 min
Tracing: Frontend Issues With Backend Solutions
Featured WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Frontend issues that affect your users are often triggered by backend problems. In this workshop, you’ll learn how to identify issues causing slow web pages and poor Core Web Vitals using tracing.
Then, try it for yourself by setting up Sentry in a ready-made Next.js project to discover performance issues including slow database queries in an interactive pair-programming session.
You’ll leave the workshop being able to:- Find backend issues that might be slowing down your frontend apps- Setup tracing with Sentry in a Next.js project- Debug and fix poor performance issues using tracing
This will be a live 2-hour event where you’ll have the opportunity to code along with us and ask us questions.
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
React Performance Debugging
React Advanced 2023React Advanced 2023
148 min
React Performance Debugging
Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Build a chat room with Appwrite and React
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
Wess Cope
Wess Cope
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!