{"resource":{"title":"Responsive Images: srcset, sizes, and picture","isPremium":true,"requires":["premium.fsd"],"content":{"type":1,"body":"*Part 4 of 8 — Image Optimisation for the Modern Web*\r\n\r\nReducing bytes is half the battle. The other half is making sure the browser downloads the right file for the user in front of it. The right size, the right format, the right crop, for the right device and viewport.\r\n\r\nSuppose you have generat...","isInternal":true},"isActive":true,"stats":{"views":23,"used":0,"likes":0},"published":true,"author":{"id":"3eh0kijZwMrHum8TkMqX","name":"Devtools Tech","username":"devtoolstech"},"resourceId":"YlLGKU8oqpo6ivZBG2mI","slug":"responsive-images-srcset-sizes-and-picture---rid---YlLGKU8oqpo6ivZBG2mI","createdAt":1779623272998,"showPaywall":true,"needsUpgrade":true,"minimumPlan":"yearly"},"currentUser":null,"isOwner":false,"recommendations":{"questions":[{"_id":"62b1ca18d3473370ac368c1f","content":{"languages":["react","html"],"difficulty":4},"tags":["javascript","react","frontend coding challenge","ui","js","js fundamentals","codedamn","frontend masters","egghead","react tabs","tabs","pagination","card","card example","frontend interview question"],"slug":"how-to-build-a-ui-card-with-tabs-or-frontend-coding-challenge-or-javascript-interview-question-or-react---qid---7NrTygmpStPLFdWWNcts","title":"How to build a UI Card with Tabs? | Frontend Coding Challenge | JavaScript Interview Question | React","questionId":"7NrTygmpStPLFdWWNcts"},{"_id":"6a7890895e985ba0a9d96a6d","content":{"languages":["javascript","typescript"],"difficulty":1},"tags":["javascript","ui","ux","devtools tech","coding","frontend interview question"," challenges"],"slug":"prettify-json-string---qid---lHESLiNVNPz72EnJ0RXW","title":"Prettify JSON String","questionId":"lHESLiNVNPz72EnJ0RXW"},{"_id":"63875545937c6f549165cea3","content":{"languages":["react"],"difficulty":1},"tags":["javascript","react","machine coding round","pr fix","github","code sample","pair programming","interview question","github pr","fix my pr","frontend coding challenge","javascript questions","machine coding rounds"],"slug":"how-to-fix-and-build-an-age-validator-or-pair-programming-or-frontend-coding-challenge-or-reactjs-or-javascript---qid---UPNnVPMHYevJuZ6dMsAw","title":"How to fix and build an Age Validator? | Pair Programming | Frontend Coding Challenge | ReactJS | JavaScript","questionId":"UPNnVPMHYevJuZ6dMsAw"},{"_id":"5ea5c137dae82663ed99f7cb","content":{"difficulty":1,"languages":"javascript"},"tags":["javascript","node.js","interview","frontend","problem solving","logical","output based","looping"],"title":"What would be the output of the following code snippet?","questionId":"L2LcihjiBRUehVFRPDOR","slug":"what-would-be-the-output-of-the-following-code-snippet---qid---L2LcihjiBRUehVFRPDOR"},{"_id":"6373bc7b9cbdb764d46a0ec0","content":{"languages":["javascript","typescript"],"difficulty":1},"tags":["","javascript","arrays","javascript polyfills","interview question","frontend","coding","devtools tech","programming","codedamn","frontend masters","egghead","razorpay","hotstar","tata1mg","swiggy","zomato","array","custom unshift","array push"],"slug":"how-to-implement-array-prototype-push-javascript-interview-question-or-problem-solving-or-javascript-polyfills---qid---W3kxb3R36UKmCjPhoVAd","title":"How to implement Array.prototype.push? JavaScript Interview Question | Problem Solving | JavaScript Polyfills","questionId":"W3kxb3R36UKmCjPhoVAd"}],"resources":[{"_id":"6731bf5cd34d7f4b8cccbdec","content":{"difficulty":4,"domain":1,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","frontend","coding","ui","ux","developer tools","youtube videos"],"slug":"how-to-become-a-better-software-engineer---rid---4lmB97aZrn9z5q00FKZz","title":"How to become a better Software Engineer?","resourceId":"4lmB97aZrn9z5q00FKZz"},{"_id":"5fb4d1456d3cda64e470c40c","content":{"difficulty":2,"domain":2,"type":2},"tags":["javascript","frontend","node.js","dom","frontend fundamentals","interview questions"],"slug":"dom-api-programming-question-or-frontend-interview-questions---rid---AA4msQuDtbwicYNMLOt3","title":"DOM API Programming Question | Frontend Interview Questions","resourceId":"AA4msQuDtbwicYNMLOt3"},{"_id":"601c195f0858864c592fb52e","content":{"difficulty":2,"domain":2,"type":2},"tags":["Javascript","Interview Questions","Web Development","Frontend"],"slug":"chained-calculator-or-frontend-interview-series-or-puneet-ahuja-or-devtools-tech---rid---ohM3pdtnJDCKDgW5nZOy","title":"Chained Calculator | Frontend Interview Series | Puneet Ahuja | Devtools Tech","resourceId":"ohM3pdtnJDCKDgW5nZOy"},{"_id":"63ce29da22480f26b3cdc905","content":{"difficulty":1,"domain":1,"type":2,"isInternal":false},"tags":["javascript","frontend","coding","programming","interview questions","ui","ux","coding practices","development","devtools tech"],"slug":"top-coding-practices-that-every-engineer-must-follow-or-coding-practices-with-examples---rid---26KOoxbSz5hGqasGaKta","title":"Top Coding Practices That Every Engineer Must Follow | Coding Practices With Examples","resourceId":"26KOoxbSz5hGqasGaKta"},{"_id":"5f1dd80bcbec5f7ffc0c2faf","content":{"difficulty":2,"domain":3,"type":1,"isInternal":true},"tags":["node.js","javascript","bots","automation","puppeteer","browser automation","ui testing","web scraping","linkedin scraping","devtools","ui"],"slug":"tips-to-improve-browser-automation-bots---rid---UVxuatGCbZwSMoQtQtaS","title":"Tips to improve Browser Automation Bots","resourceId":"UVxuatGCbZwSMoQtQtaS"}]}}