Editor's Pick
Interview Coder - An invisible desktop application that will help you pass your technical interviews
The application is invisible to:
- Zoom versions below 6.1.6 (inclusive)
- All browser-based screen recording software
- All versions of Discord
- Mac OS screenshot functionality (Command + Shift + 3/4)
Note: The application is NOT invisible to:
- Zoom versions 6.1.6 and above
- Mac OS native screen recording (Command + Shift + 5)
Features
- 99% Invisibility: Undetectable window that bypasses most screen capture methods
- Smart Screenshot Capture: Capture both question text and code separately for better analysis
- AI-Powered Analysis: Automatically extracts and analyzes coding problems
- Solution Generation: Get detailed explanations and solutions
- Real-time Debugging: Debug your code with AI assistance
- Window Management: Freely move and position the window anywhere on screen
I can't personally vouch for this in any way, but it certainly looks interesting in this day and age of interviewing. I would love to hear from anyone, especially those working on the front-end, who have used this. Reach out on X @hexawow
CSS
Using (almost) pure CSS to make fancy scroll-driven image sequence animations
We’ve all seen it. Some new Apple product gets announced and you go to the product page to check it out. As you scroll, you get blasted in the face by a flashy highly-complex scroll-driven animation. Apple isn’t the only company that uses this effect, but they really love it in particular.
If you’re a web dev like me, you’ve probably wondered how that effect works at least once. Maybe you’ve looked it up and were slightly underwhelmed like I was to discover that it’s all pretty much smoke and mirrors; these effects are usually just a pre-baked video split into individual images for each frame, and then JavaScript checks your scroll position to determine which frame to show, usually by rendering to a canvas.
I said the magic behind how these image sequence animations work seemed a little underwhelming, but actually trying to implement it myself was an interesting challenge and I learned a ton as I continued to refine it and improve its performance. After a lot of experimenting, I have ended up landing on an implementation which I haven’t really seen anyone else try before that is faster, more effecient, and can be implemented in almost pure CSS.
CSS Wrapped 2024
Join the Chrome DevRel team and a skateboarding Chrome Dino on a journey through the latest CSS launched for Chrome and the web platform in 2024, highlighting 17 new features.
Guide to scroll anchoring
As a user of the web, you are probably familiar with the problem that scroll anchoring solves. You browse to a long page on a slow connection and begin to scroll to read the content; while you are busy reading, the part of the page you are looking at suddenly jumps. This has happened because large images or some other elements have just loaded further up in the content.
Scroll anchoring is a browser feature that aims to solve this problem of content jumping, which happens if content loads in after the user has already scrolled to a new part of the document.
Native HTML light and dark color scheme switching
When it comes to color scheme implementations, they range from rather useless ones that require a page reload to more sensible ones that query the prefers-color-scheme media feature and apply changes in CSS on the fly.
This approach is already a good start. But it only covers the simplest case and doesn’t allow users to choose a different color scheme for this specific website. Just like light color schemes hurt my eyes in the evening, many people are not comfortable with dark schemes or with particular ones that aren’t good for them. So, it’s all about user choice.
Multi-State Buttons
The UI’s functionality — jumping through different states on each click — is implemented by a bit of CSS-only trickery. We’ll be changing the value of the CSS property pointer-events in the radio buttons when one is selected.
Interesting, but probably would be a bit confusing to users and would certainly have some accessibility issues.
Pure CSS Halftone Effect in 3 Declarations
About half a decade ago, I got an idea about how to create a halftone effect with pure CSS. My original idea (which Michelle Barker wrote about a couple of years ago) was a bit inefficient, but in the years that followed, I’ve managed to polish it and reduce it to a single <div>, no pseudos and just three CSS properties.
Interactive CSS Grid Generator | Layoutit Grid
Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with our interactive CSS Grid Generator.
Beautiful focus outlines
Focus outlines highlight the active interactive element on a web page. They’re crucial for accessibility, especially for keyboard users and those with motor impairments. If you ever tried navigating a website without a mouse, you can imagine how frustrating it is when you can’t see where you are. If not, imagine not seeing your cursor. Or just try it yourself by tabbing through your favorite website.
Unfortunately, focus outlines are often overlooked in web design. Clients and designers might not even notice them, leaving developers to handle design and implementation. Some might even suggest removing focus outlines for a cleaner aesthetic.
Solved By Modern CSS: Feature Image
Using container queries and CSS :has() to build a feature image.
HTML
Action Table Web Component - Native HTML web component for easily adding sorting and filtering functionality to tables
Native HTML web component for adding sort functionality and filtering to HTML tables. This component does not use the Shadow DOM. Instead it includes a custom css stylesheet you can use, which you can override or customize.
Demo here.
JavaScript
Vue 3.x Comprehensive Upgrade Guide: In-depth Exploration of Composition API
The comprehensive upgrade of Vue 3.x introduces the Composition API, which is a major improvement over the traditional Options API of Vue 2.x. It provides a more flexible and modular way of organizing code.
link rel='modulepreload': Optimize JavaScript Module Loading
The rel='modulepreload' indicates that a module script should be fetched, parsed, and compiled preemptively, and stored for later execution.
spacetime: A lightweight javascript timezone library
Isn't it weird how we can do math in our head, but not date math?
- How many days until the end of the year?
- What time was it, 11 hours ago?
- Is it lunchtime in france?
And worse - there is no real date calculator.
Spacetime is a date-calculator.
floating-ui: A JavaScript library to position floating elements and create interactions for them
Floating UI is a small library that helps you create "floating" elements such as tooltips, popovers, dropdowns, and more.
It offers two main features:
- Anchor positioning: Anchor a floating element (such as a tooltip) to another element (such as a button) while simultaneously ensuring it stays in view as best as possible by avoiding collisions. This feature is available for all platforms.
- User interactions for React: Hooks and components for composing interactions to create accessible floating UI components.
SOLID principles for JavaScript
SOLID principles help us keep code flexible. In this article, we'll examine all of those principles and their implementation using JavaScript.
Everything about barrel exports in JavaScript
Barrel exports are a common pattern in web development for organizing imports. Let’s explore their pros and cons to understand them better.
Responsive Canvas Rendering
Techniques for responsive canvas rendering to maintain crisp visuals across varying screen sizes.
React SEO: Mastering SEO for React Applications
Learn how to optimize your React app for search engines by addressing challenges like hydration delays, large JavaScript bundles, and client-side rendering. Discover how to use Next.js for server-side rendering, React Helmet for metadata management, and tools like Google Search Console to monitor performance.
State of Node.js Performance 2024
This article exclusively compares Node.js versions without drawing parallels to other JavaScript runtimes. The intent is to highlight the platform's internal progress—its performance gains, regressions, and the factors driving these changes.
A Deep Dive Into CommonJS and ES Modules in Node.js
While CommonJS has served the Node community well, ES modules are rapidly gaining traction. Let's take a deep dive into both.
Miscellaneous
The most practical soft skill for a software engineer
Everyone ultimately wants the same thing: to make the product succeed, to actually solve problems. But we need to understand each other's worlds and look at each other as partners. That requires empathy.
Interview Coder - An invisible desktop application that will help you pass your technical interviews
The application is invisible to:
- Zoom versions below 6.1.6 (inclusive)
- All browser-based screen recording software
- All versions of Discord
- Mac OS screenshot functionality (Command + Shift + 3/4)
Note: The application is NOT invisible to:
- Zoom versions 6.1.6 and above
- Mac OS native screen recording (Command + Shift + 5)
Features
- 99% Invisibility: Undetectable window that bypasses most screen capture methods
- Smart Screenshot Capture: Capture both question text and code separately for better analysis
- AI-Powered Analysis: Automatically extracts and analyzes coding problems
- Solution Generation: Get detailed explanations and solutions
- Real-time Debugging: Debug your code with AI assistance
- Window Management: Freely move and position the window anywhere on screen