Contact atif@atfzl.com github.com/atfzl linkedin.com/in/atfzl Resume Resume (pdf) ...
TL;DR Stop using Lovable for UI prototypes. Write a Claude skill that knows your codebase, use it to generate Storybook stories, and mock API calls with MSW . You get prototypes built with your real components. Stakeholders can click through them. Developers can ship them. No rewrite needed. Why we moved away from Lovable Lovable does what it promises. But we kept running into the same friction.…
When I joined Clazar , I noticed that the fonts in our web application looked bolder than on Figma. The font weights and all other config was same as in Figma but, it looked different. The font looked bolder than on Figma. Because I knew Figma is also a web app, I had a hunch that Figma might have anti-aliasing enabled and we had not. This was actually true when I tried it out. Just adding this…
TL;DR If the only problem you're solving is "multiple teams working in the same codebase without stepping on each other," you don't need micro frontends. An ESLint plugin that enforces module boundaries at lint time gives you the same isolation with a fraction of the complexity. At a previous company, I worked on the platform team. We had a micro frontend architecture: hundreds of packages,…
Note: We'll cover the event loop in context of browsers and not other runtimes like Node.js The event loop is a mechanism/algorithm/set of rules that specifies how asynchronous code is handled in JavaScript. This is important because JavaScript is single threaded, it can run one thing at a time. When the main thread is busy, we queue the pending events and these are run later when the main thread…
TL;DR Interleave Cypress commands like .find , .get , .first , .eq , .type with Cypress assertions like .should , .contains . Cypress runs only the last command when retrying. Interleaving act as guards to ensure we reach to the correct element which also helps avoiding detached parent errors. Don't just wait for network calls, wait for the UI to be updated with the network data. If a network call…
We'll optimize Netlify's Single Page web application load time. Log in to https://netlify.com. You'll be redirected to https://app.netlify.com after logging in. This is the SPA we'll be optimizing. Open Chrome DevTools (cmd + options + i) Select Performance Panel\ Make sure Screenshot option selected (useful to check when app was loaded) Start recording and refresh the page. Stop the recording…
TL;DR Instead of attaching tooltips directly to document.body , attach them to a predefined div in document.body . BAD < body > <!-- temporary div, vanishes when tooltips vanishes --> < div > my tooltip </ div > < body > GOOD < body > <!-- this div stays forever, just for attaching tooltips --> < div id = "tooltips-container" > <!-- temporary div, vanishes when tooltips vanishes --> < div > my…
Solid uses JSX to render vanilla DOM elements. In React the <div /> compiles to React.createElement('div') but in Solid you could say it compiles to document.createElement('div') (actually it uses HTML templates, more on this ahead). Hello World component: function HelloWorld () { return ( < div > Hello World </ div > ); } This will (conceptually) compile to: function HelloWorld () { const el$ =…
iTerm triggers can be used for converting text in your terminal to URLs and make them clickable. This is useful for creating JIRA issue links whenever there is a JIRA-1234 like pattern. Steps: Go to iTerm -> Preferences -> Profiles -> Advanced -> Triggers Edit Add an entry in the table Regular Expression: (?i)JIRA-\d+ Action: Make Hyperlink Parameters: https://jira.yourhost.com/jira/browse/\0 Now…
I am used to emacs keybinding. My caps lock is mapped to ctrl to avoid emacs pinky . I am also used to making movements the emacs way , i.e., ctrl+f: right arrow ctrl+b: left arrow ctrl+p: up arrow ctrl+n: down arrow I have also remapped Ctrl+g to escape because I despise the escape key in the MacBook Pro touch bar. Mac supports this keybinding in most applications but these do not work for all…