Building HTML, CSS, and JS code preview using iframe's srcdoc attribute

A few words on code playgrounds Many front-end developers and software companies blog about their trade. Oftentimes their writings include code examples with previews. Over the years a plethora of embeddable code playgrounds were created. Names such as CodePen, JSFiddle, JS Bin, or Plunker may ring a bell to you. They’re almost effortless to use, support frameworks, transpilers, preprocessors and other tooling that have evolved in the Javascript community over the years....

April 27, 2022 · 11 min

How to create frontend images with environment variables

Environment variables are a standard way to parametrize backend containers. For some reason, they haven’t seen wide adoption on the frontend side, which just as much requires customization. Both React and Vue still recommend creating separate .env files for different environments, which is unwieldy at best if you want to containarize the application. In this tutorial, I will guide You through an opinionated way to create environment agnostic frontend images in React....

January 24, 2021 · 3 min

How to correctly position context menus using pure CSS

Introduction I was recently challenged with a pretty common, and a simple problem of positioning a custom context menu. When you DuckDuckGo how to position a context menu phrase you will be greeted with solutions that either: don’t consider boundary conditions or use JavaScript to check the conditions and position the menu accordingly. The issue with the first solution is that it’s not great in terms of User Experience....

August 11, 2020 · 2 min