Discover the amusing and perplexing problem of users getting stuck on outdated Single-Page Application (SPA) code in open tabs. Unveiling a clever solution| CodeSmash
In the ever-evolving world of web development, trends come and go like fashion fads. One such trend that has caught the attention of developers is React server components. While touted as an innovative approach, it's hard to ignore the striking simil...| CodeSmash
Implementing a frontend project can be a challenging and time-consuming process, but it can also be incredibly rewarding when done correctly. However, there are several pitfalls that developers often fall into that can cause problems and delays. In t...| CodeSmash
Overview of the technical hurdles I overcame to evolve my intern project into a new feature for users.| Canva - Engineering Blog
Qualitative comparison of image embedding models to power a scalable similar-image replacement system for Canva designs.| Canva - Engineering Blog
How I built an interactive Elm workshop environment using Guida's in-browser compiler after server-side compilation hit memory limits| cekrem.github.io
When I was talking about monitoring web performance yesterday, I linked to the CrUX data for The Session. CrUX is a contraction of Chrome User Experience Report. CrUX just sounds better than CEAR. It’s data gathered from actual Chrome users worldwide. It can be handy as part of a balanced performance-monitoring diet, but it’s always worth remembering that it only shows a subset of your users; those on Chrome. The actual CrUX data is imprisoned in some hellish Google interface so some kind...| Adactio: Journal
Create a dynamic animated particle background using the HTML5 Canvas API| iO tech_hub
Before the relative color syntax you had to rely on CSS variables or even worse: JavaScript to modify the parameters of a color. Using the from keyword the browser can convert the originating color to different color spaces and change the color properties.| iO tech_hub
The most exciting feature of Angular 17 might be Deferrable Views. It makes it possible to lazy load specific Angular standalone components or show a placeholder as the component is loading. It seems like this feature should go well with Skeletons. Stay around to find out.| iO tech_hub
On October 26th, the Coven of Wisdom held its CSS meetup in Eindhoven. To really allow going deep on CSS and Web UIs, we invited 2 heavy hitters regarding these domains, Brecht De Ruyte en Hidde de Vries.| iO tech_hub
Transform your web app with two lines of code – create seamless animated interactions using the View Transitions API.| iO tech_hub
In this article, we are going to talk about different JS module systems, such as CommonJs, AMD, UMD, and ES Modules.| iO tech_hub
There are multiple ways to speed up unit tests development in Angular. Let me show two of them using the NG-Mocks library.| iO tech_hub
Unit tests are an essential part of software development. Tests help you to ensure that the code works as you expect. It takes time to create all necessary tests. But there is a way to generate them.| iO tech_hub
Two simple guidelines is all it takes to prevent rampant spacing issues from turning your expertly crafted project into an endless game of whack-a-mole.| iO tech_hub
Application state can make any application complex real quick. Let’s have a look at Finite State Machines in Javascript to resolve some of these complexities.| iO tech_hub
Explore the advantages of IndexedDB over the Web Storage API as a more efficient and sophisticated alternative for storing structured data on the client, eliminating the need for repetitive JSON parsing and stringifying operations.| iO tech_hub
In general, developers don't find writing CSS the most fun part of software development. Although, in my opinion, Tailwind CSS makes it fun and efficient!| iO tech_hub
Defining a good structure for your theme, components, and files is key to maintaining code for multiple brands. If you're coding multiple applications within one shared codebase, these guidelines will help you out.| iO tech_hub
Traditionally, developers have used build tools like Webpack or Rollup to bundle and optimize their code for production. These build processes can be time-consuming to set up and make development more complicated. With native JavaScript modules now widely supported in modern web browsers, there is a need to map JavaScript packages to their source files.| iO tech_hub
Learn how to keep your component libraries simple, easy to use, and adaptable to many use cases by leveraging Inversion of Control through Compound Components.| iO tech_hub
Cross-platform software development is hard. Each platform has its specific implementation of an API and you end up with separate apps for each platform. Multiple frameworks try to fix this issue by creating an abstract between the platform and the application. Browser vendors are doing the same and it's called Project Fugu.| iO tech_hub
The View Transitions API has landed in Chrome. Let’s have a look at how the API works and why it will change the feel of the web.| iO tech_hub
This article contains a guide to building an accessible main navigation of a website in 5 steps. The key takeaways of this guide are HTML semantics, WAI-ARIA, CSS, and JS for accessibility.| iO tech_hub
| iO tech_hub
An incredibly powerful API exists to access the local file system of a user. Let’s have a look at how this works and why this could be interesting for your next project.| iO tech_hub
Because the OpenAPI specification is a specification, just like the EcmaScript, HTML or CSS specification, we can reliably build tooling upon it. This tooling allows us to optimise our OpenAPI workflows and let us save precious time.| iO tech_hub
How would you incorporate OpenAPI within your project? In this chapter, we'll explore the two main approaches to using OpenAPI and the benefits of each workflow.| iO tech_hub
With Server-sent events, you don't need to ask the server if an event has happened. SSE is sent when the server wants to.| iO tech_hub
OpenAPI allows us to improve effeciency between teams and interdependent projects. It allows us to describe our API in a single document. In this part of the series, we will take you through the most important parts of an OpenAPI document.| iO tech_hub
To optimize project effeciency and to ensure a good communication between teams, we need contracts for our APIs. In this article, I will explain what the OpenAPI specification is and how it can help us to create contracts for our RESTful APIs.| iO tech_hub
Writing code in a functional way can help to solve complex problems in a efficient and in a reusable manner, for creating clean and maintainable software.| iO tech_hub
In the previous part of this article, I tried to tickle your brain a bit to unleash your curiosity and drive your determination to try some new CSS features today. That's exactly what I'll be doing in this part, writing some new stuff today so you can slowly polish new CSS skills very sneaky and hidden in the code, like a ninja.| iO tech_hub
Unless you have no affinity with CSS at all or have been living under a rock for the last year, you should have noticed that new CSS features are skyrocketing like never before. Although this is a good thing, it might get frustrating to get a grasp on all these new playthings because every time you add something new in your styling toolbox, the next best thing is just around the corner.| iO tech_hub
A big part of working with React.js is fetching data and displaying the results. Let’s see how the new React.use() hook can can help you!| iO tech_hub
Let’s have a look at how you can better structure your CSS layers with CSS Cascade Layers!| iO tech_hub
I was thinking about something I wrote yesterday when I was talking about styling underlines on links: For a start, you can adjust the distance of the underline from the text using text-underline-offset. If you’re using a generous line-height, use a generous distance here too. For some reason, I completely forgot that we’ve got a line-height unit in CSS now: lh. So if you want to make the distance of your underline proportional to the line height of the text that the link is part of, it...| Adactio: Journal
We shouldn’t rely on colour alone to indicate that something is interactive. Take links, for example. Sure, you can give them a different colour to the surrounding text, but you shouldn’t stop there. Make sure there’s something else that distinguishes them. You could make them bold. Or you could stick with the well-understood convention of underlying links. This is where some designers bristle. If there are a lot of links on a page, it could look awfully cluttered with underlines. That...| Adactio: Journal
If you’re a front-end developer and you don’t read Chris Ferdinandi’s blog, you should change that right now. Add that RSS feed to your feed reader of choice! Lately he’s been posting about some of the thinking behind his Kelp UI library. That includes some great nuggets of wisdom around HTML web components. First of all, he pointed out that web components don’t need a constructor(). This was news to me. I thought custom elements had to include this incantation at the start: constru...| Adactio: Journal
I’ll be honest, with so many AI tools, editors, and chatbots launching every day, it can quickly get overwhelming. Sometimes, I just feel like sticking with Copilot and Claude and calling it a day.| Mews Developers
Let's learn how to build a project tracking application for freelancers using Superglue and Vite.| Avo's Publication Feed
A society is discovered where social hierarchy is dictated by CSS (Cosmic Social Specificity). The rulers are the `!important` caste, followed by those with inline styles, then IDs, then classes. The crew must start a revolution from the "user-agent-stylesheet" underclass to restore balance.| Seuros Blog - Navigation Logs from the Ruby Nebula
Don Fillyfill, the Polyfill Mafia boss, returns with a vengeance. He's holding the galaxy's last remaining legacy browser, "Internet Explorer 6," hostage and demanding a ransom, threatening to unleash a wave of compatibility bugs that would crash galactic commerce.| Seuros Blog - Navigation Logs from the Ruby Nebula
Following Episode 178's Rails.env revelation, Atlas Monkey crew discovers that frontend applications suffer from even worse environmental confusion. When NODE_ENV meets create-react-app, Vite, and Next.js, the result is deployment chaos that makes Rails.env look simple. Echo joins the crew to implement the Frontend Environmental Truth Protocol and end JavaScript's environment deception.| Seuros Blog - Navigation Logs from the Ruby Nebula
In this article, we will explore frontend AI Tools like V0, WebCrumbs, Cursor, and Bolt.new.| Apiumhub
During these last days I’m participating in discussions on a redesign of a landing page for an existing product. It may be perceived by many as an easy task, but it’s not. The challenge lies in creating a landing page that not only looks good but also effectively communicates the value proposition of the product.| Giovanni Panasiti - Personal Website and Blog
For over a decade, Bootstrap has been the go-to framework for web developers seeking a reliable, responsive, and efficient way to build websites and web applications. Despite the rise of numerous modern frameworks, Bootstrap continues to be relevant and widely used. Since one of the major criticisms Bootstrap gets from other frameworks’ lovers is: “All Bootstrap websites looks the same“; we created Bootstrap Ninja’s “Flavours” to add a fresh layer of customization, making any flav...| Giovanni Panasiti - Personal Website and Blog
In the dynamic world of web development, evolution is not just a choice, but a necessity. Today, we’re thrilled to introduce NinjaBootstrap, a groundbreaking...| www.panasiti.me
At the time, the term “T-shaped” was starting to become more common in product and engineering conversations. The idea? Someone with deep expertise in one area (say frontend), but with broad working knowledge across many (such as backend, product thinking, security, threat modeling, performance, deployment, etc.). In practice? It meant stepping into ambiguity, learning fast, and finding your own path through it.| Mews Developers
Elasticsearch is a powerful, distributed search and analytics engine widely used across various applications for full-text search, log analysis, and real-time data exploration. But working with Elasticsearch via API or raw query DSL can be overwhelming, especially for those new to its schema-less structure and nested data formats. GUI clients make this process easier by... The post Best Elasticsearch GUI clients in 2025 appeared first on DronaHQ.| DronaHQ
Chrome now offers built-in, on-device AI APIs for summarization, translation, and language detection without the use of cloud required.| iO tech_hub
Aloha,| Harmonic Code
Aloha,| Harmonic Code
How I built a search widget in Elm using RSS feeds and string parsing - a case study in pragmatic engineering| cekrem.github.io
Struggling to measure design system adoption? Discover how we built a clear, data-driven metric that really works — with practical tips and code snippets you can use too!| Mews Developers
Honeycomb recently hosted Observability Day London. Read a recap from Ken as he goes over all the talks and key takeaways from the day.| Honeycomb
You shipped your latest release. You tested it on emulators, QA devices, and the latest OS versions. But now it’s live and running on thousands or millions of real devices, across a jungle of screen sizes, hardware specs, OS versions, and network conditions. A user reports a crash on an old Samsung device over 3G. Someone else complains the app feels “sluggish” after updating. You dig through logs. Rebuild test cases. Ping the backend team. Try to reproduce. Yet, still no answers.| Honeycomb
How to introduce Elm incrementally into your existing web applications with a real-world example| cekrem.github.io
The Frontend Architecture Map helps product teams make smart decisions about frontend technologies based on the user journey, avoiding trendy pitfalls. It maximizes the real value of web applications by providing a clear, overarching approach to frontend architecture.| workingsoftware.dev
Discover how I built a complete breathing exercise web app without touching a single line of code, using AI to transform an idea into a fully functional product. What was good, what was bad and is this where we are heading in our industry?| iO tech_hub
Explore a powerful set of tools built around the OKLCH color model—Harmonizer for accessible palettes, Polychrom for Figma contrast checking, apcach for color contrast calculations, and more. Perfect for frontend developers and designers building consistent, modern UIs.| Evil Martians
User interfaces everywhere are a bit too generic nowadays, as they must be efficient in terms of maintenance and release time. However, that is not a reason to create a pointless and bad UX. It's enough to monitor the meaningfulness of interfaces and ask yourself, "Does it make sense?" to make the user experience great.| Robert Vitonsky | Software engineering insights
A few days ago, David Heinemeier Hansson announced that Turbo 8 is dropping TypeScript . I'm okay with that because I don't even know what Turbo 8 is. However, over the past few years, some frontend programmers have tried to sell me the idea that "TypeScript is useless, just use tests". I think people with such opinions either don't care about code quality or simply don't know what TypeScript is. Here, I will explain why you should use TypeScript.| Robert Vitonsky | Software engineering insights
Some developers are sure that BEM is just a way to make class names in CSS are unique and, since a modern tools allow to make names unique automatically they have no reasons to use BEM. This is a mistake with a bad consequences, BEM is are methodology about atomic code design, it gives you a standards and guides how to simplify code maintaining.| Robert Vitonsky | Software engineering insights
UI kits are became popular and today exists really many UI libraries, but almost whole its a have one fundamental architecture problem which make this libraries not much good for wide use. The problem is a not modular design.| Robert Vitonsky | Software engineering insights
Learn how Elm's architectural discipline—and a few ideas from Clean Architecture—can reshape how we think about frontend boundaries.| cekrem.github.io
The simplest way to create interactive 3d experiences| iO tech_hub
No more manual type generation! In this article, I'll show you how to generate types based on a OpenAPI (Swagger) file using a simple npm package.| iO tech_hub
A small utility package to make working with HTML in Elm more convenient| cekrem.github.io
Introduction In this update, we continue the tradition of bucketing bugs into helpful categories for you all to filter through along with even more notes from the compiler team as to what, exactly, was fixed. This blog is also complemented by the recent Pure Virtual C++ pre-conference talk by RanDair Porter; so please check out […]| C++ Team Blog
A tech stack combines technologies for building web or mobile apps, including frontend, backend, tools, APIs, and cloud services. Understanding tech stacks is key for optimizing app performance and scalability.| HAY
Learn how to integrate Inertia JS with Rails by building an app that shows how they both work together.| avohq.io
Deploy Static Sites to Azure CDN with GitHub Actions OIDC In this blog post you will learn how to authenticate and deploy your frontend code to Azure CDN, backed by Azure Blob Storage to deliver low-latency static website to your users. The objective is to avoid hard-coded credentials and only employ OpenID Connect to establish trust relationship between the Identity Provider (GitHub) and the Service Provider (Azure).| Developer Friendly Blog
It’s been a few years since the Interop initiative was set in play. This has historically been one of the key elements in moving the web forward as it aims for a consistent web between browser vendors. In contrast to the “old days browser wars”, we as developers get streamlined features without having to check everything in every browser. The features of Interop 2025 are now known, features to be made stable across browsers by the end of the year. In this article, we’ll take a look at...| iO tech_hub
Discover how scaling GuestPortal from a monolithic backend to microservices unlocks greater scalability, domain independence, and operational efficiency.| Mews Developers
Explore the potential of Observability & Monitoring beyond their traditional role in application development.| Mews Developers
At Mews, most of our Web UI is built with React, styled-components, and love. While shipping these UIs, we’ve built a robust component library and application architecture that can be adapted to scale well as Mews continues to grow. Scaling a large application like the frontend of our PMS shares a lot of similarities with […]| Mews Developers
Introduction I am a backend developer with 20 years of development experience, starting when .net 1.0 was released. But throughout the years, I have been working full stack one way or another. Back then, there was no difference between backend, frontend, or QA engineers. You were just a developer. You were expected to know and […]| Mews Developers
Introduction As developers, we love to use the latest and greatest technology available. At the same time, we need to make sure everything will work smoothly for our users. In the frontend world, there’s a huge difference between the code we write and what eventually gets to our users. Let’s have a look at the […]| Mews Developers
Introduction Based on my talk at Design Systems London earlier this year, this post explores the valuable insights I have gained on how to make design systems more accessible (and why we should make this happen). At Mews we want to build the most accessible possible products and in an effort on doing so we […]| Mews Developers
Avoid the bugs with TypeScript and read about the pros and cons of type systems as well as migration strategies. Researched, experienced, and shared.| Mews Developers
Discover the advantages of DNS Client.NET in streamlining laboratory functions and supporting modern web development.| Bigscal - Software Development Company
WebLLM runs in browser to allow Models to be more accessible inside the browser and fully client side! With the evaluation of AI technologies, it is expected that WebLLM will be an important part of future applications.| iO tech_hub
At the beginning of 2025, the new European Accessibility Act (EAA) 2025 for web accessibility will come into force, requiring many industries and all public bodies to ensure their websites are accessible to all users. This means that for many products, passing WCAG 2.1 level AA will be a legal requirement. At bitcrowd we use automated tooling to catch the common accessibility failings, so our developers can move on to manually test and review the UI they’re creating, giving everyone a great...| bitcrowd blog Blog
For the new version of the bitcrowd website, our designer created really amazing, vibrant and colorful designs. Implementing these complex designs in a performant, cross-browser, accessible, and maintainable way was a challenge, and part of the solution was to make use of the features that SVG offers.| bitcrowd blog Blog
How to Publish to GitHub Pages From Another Repository In this blog post, you will learn how to leverage GitHub Actions to deploy static files to the GitHub Pages of another repository. This can be useful if you keep your source code in a private repository, but also, you may find additional reasons to need this setup. Stick around till the end to find out how to do this with OpenTofu.| Developer Friendly Blog
We caught up with Michael Garski, Director of Platform Engineering at Fender, to hear how things are going with Honeycomb for Frontend Observability.| Honeycomb
No matter which tech stack you use, automating your deployment process can save you time and headaches. Let's see how to use Github Actions to automate your frontend deployments to AWS S3.| iO tech_hub
Discover AtlasNinja: an open-source interactive map for exploring global data, now available on GitHub.| TMSVR - Dev Blog
There are multiple articles on how to host a static website or Single Page Application (SPA) on AWS. But they rarely go into the topic of setting up the environment variables for the frontend application.| Better Dev
GhostSolo is a free and open source Ghost theme created for solo bloggers.| Luke Lowrey
Use CSS variables and simple javascript to enable dark mode and themes on your website.| Luke Lowrey
In today’s digital age, many websites remain inaccessible to individuals with physical or cognitive disabilities. However, there are numerous accessibility tools available to help audit and improve your web content, ensuring accessibility for everyone.| iO tech_hub
In 2024, Friday Front-End shared a curated list of five articles and one video every week. Here are the links that were most popular.| Space Ninja
Let's see how Next.js Multi Zones can make building micro frontends a breeze.| iO tech_hub
Exploring React Native for cross-platform apps as a front-end developer, finding strengths in familiarity and challenges in styling and native feel.| iO tech_hub
Let's have a look at React Portals and how they can help you in a pinch.| iO tech_hub
Step into a (very near) future where you can control animations with pure CSS and without the need for any JavaScript? In this article, I'll show you how to control your animations with the new CSS properties scroll-timeline and animation-timeline.| iO tech_hub
How can we use the Web Audio API to create a working realtime turntable? Read my approach and how you might make your own!| iO tech_hub
