Posts

Browser Display Issues

  Q: What is the problem with display of information in the browsers and what technologies like react and flutter are not good at? Is CSS reaching its limits in terms of its ability to style? Will there be anything that is better at specifying transitions etc? This is a very thoughtful systems-level question. Let’s break it into parts: What are the fundamental problems with information display in browsers? What are React and Flutter not good at? Is CSS reaching its limits? Will something better replace or extend it? 1️⃣ Core Problems with Display in Browsers A. The Web Rendering Model Is 30 Years Old Browsers still fundamentally use: HTML → DOM tree CSS → Styling rules Layout engine → Box model Paint → Composite → GPU This model was designed for documents , not complex applications. So problems arise when we use it for: Real-time dashboards Design tools (like Figma) Video editors Large interactive systems B. Layout Is Expensive CSS layout is: Global Constraint-based Often ref...

Front end React app with DJango Backend

Image
 If you're having very less time which is likely and really want to see it working first.. git clone https://github.com/bmkamath2000/DJango-Projects-FSW.git cd DJango-Projects-FSW cd 15DJangoSchool 515DJangoSchool DJangoSchool 15DJangoSchool then execute following commands cd frontend npm install (which recreates the node_modules folder) npm run build (this builds the frontend) cd .. (comes out of frontend directory) python manage.py collectstatic (bundles all static files and stores in a folder) python manage.py runserver (launches the backend server) Finally headover to http://localserver:8000/enroll to see the react app inside the django project. If you're wondering what this is all about, here is a brief: You might have known that DJango is a python framework which has very powerful features and can create a working backend server in matter of minutes. You will need django installed via  pip install django and react via npm install -g react (assuming you already have...

Test driven development in ReactJS

 Suppose you are developing a large website/mobile app and your task is way too complex. Under these circumstances Test driven development can help in controlling complexity. It gives developers breathing space. It lets them keep code bug free from the ground up. You would not believe it but most people get burnouts from developing software if they aren't adopting TDD. So how do you do Test Driven Development? TDD for short is by writing a test case before you write even one line of code. Naturally the test case will fail initially. This gives the developer some breathing space, some respite of having written something like a test case no matter if the code that is going to be tested is unwritten as yet!!!. Now I am going to show a component that I wrote following an article on the internet that spoke of TDD. import   React   from   'react' ; export   default   class   MyComponent   extends   React . Component  {     ...

ReactJS is cool

I have not yet explored ReactJS that well. It has just been a few years since I started working on it with only little real exposure. Why do I say ReactJS is Cool? This virtual DOM diffing and updation is way sexier than earlier methods of replacing the entire DOM. I am yet to learn new technologies that seem promising like Svelte.js, Next.js and Vue.js I read that state management in reactjs has two options 1. Redux-Saga 2. Redux-Thunk Other advantage of reactjs is a lot of ways of testing that make complex web app development easy. I have many things to say on react testing and would post most of the projects that I have done in a repo for everyone to learn from.

HTTP then HTML then WWW then CSS+JS and then comes Hell

(4 min Read) TLDR; Internet Programming is getting better  I never liked AJAX or JQuery. I will elaborate why in a while. But first lets retrace the history of internet technologies the way they evolved. Tim Berners Lee thought about a great web that would connect all systems in the world and people could move from one link to another. He used a simple protocol that exchanged information as files. He envisoned a world wide web where files would move from servers to clients(hosts) which displayed these HTML files in web browsers.      The protocol that would help in the exchange of these files was called hypertext transfer protocol. The information displayed in a browser was to be formatted and arranged across the screen. This needed setting attributes of html elements. These attributes were to be applied to some/all of the html elements that were specified in the Cascaded Style Sheets.    Then came the problem of animation and changing properties of s...