Reverse Engineering WhatsApp Web’s CSS
If you’re like the majority of readers, recreating CSS and HTML by reverse engineering might look suspicious to you, and you might wonder what could be the benefits of doing such a thing. In my opinion, playing with — or recreating — code that interests you, is the best way to learn and to enjoy what you do. The following are some more benefits, some of which most web developers aren’t aware of. Before we continue, here is my full WhatsApp Web Reverse Engineering Demo. The Benefits It’s fun! It helps you become a better architect It improves your creativity It shows the potential that the app can reach It proves a concept You can use cutting edge technologies You can advertise yourself It can help you become well-known My Benefits (Besides Fun😃) Following my previous article of “Why the World Needs CSS Developers”, I want to show a CSS Developer’s full capabilities. Or, more precisely, in my case, to demonstrate a CSS Architect’s skills, and reinforce them in this way. When selecting a project to work on, search for a web project that you like. Then, take a brief look to see if this project’s CSS and HTML aren’t well-written. As you can deduce from the post title, my project is reverse-engineering WhatsApp Web. The reasons I chose it were that first, from my perspective, its non-semantic HTML and CSS class names are challenging to understand, and secondly, the website isn’t fully responsive. WhatsApp Web’s HTML How to Start Reverse Engineering The first important rule, is Don’t Try to Understand the Current Code. Keep in mind that the main reason you’re starting this project is to improve the code. Therefore if you will dig too deep, you risk repeating the very mistakes you are trying to avoid. Create Semantic HTML Before writing a single line of HTML, explore the web project as a user. Try to infer as much as you can from the visual structure. After playing with it and understanding it (should take only a few minutes), create the HTML’s hierarchical structure, starting with the main parts and then going into the inner portions. My basic reverse engineering of WhatsApp Web’s HTML Notice: I’m using my class name methodology, which I call the CSS Storytelling Methodology, in which the code itself explains the structure’s meaning. It starts with semantic HTML elements and continues with the CSS class-names naming convention. Other methodologies of this type are the Atomic Design and ITCSS, and my architecture uses some ideas from both, combined with other architecture ideas (for more info on my architecture, you can watch my talk, or read my series of articles). From the Atomic Design book — parts go from abstract to concrete Organize CSS The following might seem like basic advice, but this is something in which most web developers are sinners: One of the most important things in creating good CSS is that it be well-structured. This article will show you how to arrange CSS’s essential parts in a well-structured manner. Note: In my project on CodePen, » Read More
Like to keep reading?
This article first appeared on blog.animaapp.com. If you'd like to keep reading, follow the white rabbit.