How a feature goes from idea to prototype to shipped For years, there’s been this really popular Chrome extension for adding a table of contents to your Medium stories. Props to Vinicius De Antoni for writing a popular chrome extension all those years go. The extension was so popular, we even wrote about it in our Medium Handbook. How to…
#web-development
32 posts
23 Jul
18 May
HTML images just got better, with the subtlest change to your codebase Photo by Adi Suyatno I know what you’re thinking. Scott, I landed on Medium on a small but not mobile-small display and the download chunk related to images in my home feed was like 7% smaller. First of all, thank you for noticing. Second, what if I told…
4 May
Picture this: Your favorite batsman is on strike, two runs needed off the last ball — and you’re starving. Do you close the match to open a food app? Of course not. Nobody does. (Blame our laziness 😅) That’s the exact problem Swiggy and JioHotstar set out to solve: let users order food without ever leaving the JioHotstar app. The…
24 Mar
The Micro-Frontend Evolution: Why We Traded S3 Behaviors for Module Federation (and What It Cost…
Swiggy BytesThe Micro-Frontend Evolution: Why We Traded S3 Behaviors for Module Federation (and What It Cost Us) A practical guide/story from the team that migrated multiple B2B dashboards to a unified Module Federation architecture — including the scariest part: moving thousands of authenticated users to a new domain without a single forced logout. “S3-based micro-frontends are not micro-frontends. They are separate…
8 Oct 2025
Safari recently implemented a non-standard (yet?) CSS random() function (currently only in WebKit, and not yet part of any CSS specification). Since many recent CSS features are directly aimed at replacing common JavaScript functionality, I expected this function to do the same. While it has some neat use cases, it doesn’t cover most of the scenarios where I currently use…
29 Sept 2025
My presentation for Digital Collegium 2025 was an overview of many recent and forthcoming additions to the web platform, specifically HTML and CSS. Description Roll for sanity: Surviving the ever-expanding web feature bestiary Are you, brave front-end adventurer, feeling your sanity slipping as the Ever-Expanding Web Feature Bestiary grows with each browser update? Have you encountered strange and powerful creatures…
23 Sept 2024
My presentation for HighEdWeb 2024 was an overview of many recent and forthcoming additions to the web platform, specifically HTML and CSS. Description CSS is Awesome Over the past few years, CSS has been gaining features at a rate that is almost impossible to follow. Features that once required pre-processors are now native to the platform. Variables? Check. Nesting? Check.…
4 Jul 2024
TypeScript significantly improved JavaScript development with enhanced code reliability and maintainability, ensuring fewer runtime errors and greater productivity for developers. But when you start working with it, the syntax can sometimes feel overwhelming. One of the most intimidating features in TypeScript is “generics”. Look at the example below 🤯 aren’t you afraid ? Types declarations from @tanstack/react-query (library) that can…
15 May 2024
Prologue This is the fourth and final instalment of our series. In this piece, we’ll dive into our experiences and insights gained while tackling this project at Housing.com . Previous Chapter: CLS: Changing the perspective (Vol.3) Over the years we have tried a lot of approaches, some approaches required design inputs while on the other hand some ideas were tech…
21 Mar 2023
Introduction Web development is an ever-evolving landscape, with JavaScript frameworks playing a significant role in modern web applications. As a developer looking to stay relevant and ahead of the curve, mastering these frameworks is essential. In this article, we will provide you with a comprehensive learning path to help you navigate the world of JavaScript […]
13 Feb 2023
In the world of web development, creating a dynamic and user-friendly interface is key to delivering a great user experience. One way to achieve this is by implementing an accordion menu, allowing for a clean and organized content display. In this article, we will explore the process of building a custom accordion menu using pure […]
27 Jan 2023
The Shadow DOM is a technique for creating and using isolated, reusable parts of a web page’s structure and styling. Introduction The Shadow DOM allows developers to encapsulate the structure and styling of a particular element or component so that it can be easily reused and integrated with other parts of a web page without […]
Preloading and Prefetching are two techniques that can be used to improve the loading performance of a web application. These techniques are particularly useful for optimizing the loading time of resources, such as images, stylesheets, and JavaScript files, which are required for the application to function correctly. In this article, we will explore how to […]
18 Jan 2023
NPM, or the Node Package Manager, is a crucial tool for any developer working with Node.js, the popular JavaScript Runtime Environment. It allows developers to easily share and reuse code and manage their projects’ dependencies. In this article, we will explore what NPM is, how it works, and why it is so essential within the Node.js ecosystem. What […]
Introduction If you’ve ever worked with Dates in JavaScript, you sure know how clunky and hard to work with they are; that’s why, recently, there has been a proposal for a brand new way of working with them, you’ve guessed it— Temporal API. Now, what is it? If we take the Introductionary information that they […]
9 Jan 2023
Author: Darragh Burke, Software Engineer II, Web Development at Tinder Tinder’s UI Opportunities: Wildfire When Tinder first launched in 2012, it pioneered a brand new user experience: the Swipe Right® and “Swipe Left”™ features. The app’s simplicity was a big part of what made it so appealing. An early version of Tinder We’ve emphasized building new features and moving fast…
17 May 2022
A great overview of all the latest and upcoming CSS features. Presented by Adam Argyle at Google I/O ‘22.
7 Feb 2022
We were recently testing PassKit as a way of managing membership cards for giving societies. Passkit is very up-front that they are not a CRM and strongly suggest using their API for integrating with outside systems, or for editing pretty much any data. To kick the tires, we set up some very basic scripts to connect to the Passkit API.…
6 Oct 2021
Philip Walton on the difficulties the webperf community faces when discussing web performance. Simple numbers don’t cut it. We need to provide context when discussing performance results. What concerns me about this practice is that it glosses over a lot of important nuance, and it perpetuates the idea that synthetic or lab-based tools (like Lighthouse, WebPageTest, and many others) are…
19 May 2021
We’ve provided Atom/RSS feeds for News and Events in our custom CMS at Notre Dame for well over a decade. However, if a visitor ended up on the url they were greeted with an unhelpful screen of XML. I decided to remedy this by appying some XSLT and styles to improve the user experience. However, even after reviewing several tutorials,…
4 Mar 2021
Joel Goodman of Bravery Media on the current state of HigherEd homepages. Regardless, it’s an agency’s responsibility to do as much as possible to make that website a success when it goes live. Do no harm. Slow websites only do harm. Code needs to be optimized, frameworks need to be ditched, images need to be properly sized and deferred, CSS…
5 May 2020
A little while back, the web team at SoundCloud got an urgent report that our upload page looked weird in the US. Web engineering is based…
20 Mar 2020
This articles describes the difference between how component invocation differs when using curlies {{...}}, angle brackets <...> or an (...) s-expression in Ember templates. Ember has three methods for invoking components and helpers in a template, either of the three can be used to invoke both classic and modern glimmer components. The “classic” syntax in the form that uses curly…
6 Oct 2019
Released a tiny npm package today: @0xadada/random-emoji, a javascript random emoji function with zero dependencies. $ yarn add @0xadada/random-emoji $ node > const random = require('@0xadada/random-emoji'); > random() '😁' let a = random(); // defaults to 'emoticons' let b = random('emoticons'); let c = random('food'); let d = random('animals'); let e = random('expressions'); console.log(a, b, c, d, e); // 😍…
16 Sept 2019
I love bookmarklets, those small and elegant lines of javascript that you can bookmark and which do random functions in the browser when clicked. uri-editor.js is 1-line of HTML that’ll run a text editor in your browser. Drag the link into your bookmarks to save it as a quick browser-based editor tool for those moments you need a quick editor…
1 Jul 2019
Multi-tenants is an architecture concept that can handle multiple projects in a single project container. If you look at popular sites like Nike.com or Mi.com, you will find out the project redirection based on the continent or country region. This post more about understanding the Angular 8 project package configuration, using this how are we leveraging the project for multi-tenant…
18 Jun 2019
This talk was presented at the Boston Ember.js Community meetup at Salsify, Inc about a unique usecase for deploying FastBoot in order to do server-side rendering of Ember applications at scale. I review traditional, single-page web applications, I discuss server-side rendering by introducing Ember FastBoot. I showcase our architecture and provide a quick summary of how we use FastBoot in…
25 Apr 2018
This talk is a code walkthrough, implementing a date picker to showcase the power of ember-changeset and contextual components. Given at the Ember Boston Community meetup. Ember-changeset is an addon that provides an abstraction over Ember models such that only valid data will ever be set in a model. Contextual components are a set of conventions that allow a developer…
5 Nov 2017
system-font-i18n-css provides twelve variations for the Sans-serif family of system font. This font stack provides more consistent character typesetting across multiple languages and all modern operating systems. system-font-i18n-css is optimized to select the best system font on a per-character basis, based on the unicode range of that character. system-font-i18n-css provides twelve variations for the Sans-serif family of system font. This…
18 Mar 2017
ember-i18n-changeset-validations is an Ember addon providing internationalized validation messages to ember-changeset-validations. This addon adds the ability to translate ember-changeset-validation messages using the ember-i18n addon. Available on NPM at ember-i18n-changeset-validations and on github at ember-i18n-changeset-validations.
5 Nov 2015
Not too long ago, there was a great debate between two sides of the web. The “Responsive” web vs the “m.” web. One pushing for a single codebase that responds to user-context and another pushing for a second, mobile-only approach (typically using a subdomain starting with m.) It’s clear now, the responsive web has won. A Retrospective — Responsive Design…
1 Mar 2013
Every selector you write is additional complexity that will need to be maintained. Can you generalize or abstract that selector so other components can use it? Write your CSS selectors to be as concise as possible Write your CSS selectors to be as performant as possible, efficient as possible and even more efficient Don’t overqualify your CSS selectors Use the…