![\"A](\"https://b.polente.de/img/At39nBHC2L-360.png\")
Starting in June 2026, the EU Pay Transparency Directive changes how companies hire. It removes the old information advantage that employers held for a long time. The rules are clear and strict.
\nEmployers must state the starting salary or the salary range in every job advertisement. They are no longer allowed to ask candidates about their past salary history. Candidates do not have to provide salary expectations anymore. If a portal has a mandatory field for salary, you can simply write that you align with the company's internal salary bands.
\nOn demand, companies must also provide clear criteria on how they calculate salaries and career progression.
\nThis law shows a lot about a company culture. When a business does not include a salary range in the advertisement, it is a clear warning sign. It shows they either do not care about the new legal standards or they want to hide something.
\nWhen HR managers give vague answers about money during interviews, it indicates a culture problem. True openness is not a bonus feature. It is the basis for psychological safety and a good environment where people can grow. Companies that share this data proactively show that they respect workers as equal partners.
\nFor engineering leaders and managers, this means we must update our systems and processes. Job boards, applicant tracking software, and interview guidelines need changes immediately. We must train hiring teams to never ask about previous compensation. All internal salary bands must be clean, documented, and well structured.
\nIf a company ignores these rules, candidates can report them to the anti-discrimination authorities. In case of pay discrimination, the burden of proof is now on the employer. The company must prove they did not discriminate.
\nI am very interested to see how my own employer, Publicis Sapient, will handle this transition across our teams. As a large global business, our internal tooling, career frameworks, and job portals must adapt quickly to meet these standards in time.
\nWhat changes have you noticed in your hiring pipelines or with employers lately?
\n
A common argument in the current AI debate says that developers will write less code but read and understand much more of it. The idea is that because AI tools are still immature and repeat errors, we need senior human engineers to review everything and keep control.
\nThis is short-sighted. Yes, current tooling is not fully mature yet. But thinking that deep code reading will stay a human task for decades underestimates how fast AI context engineering is growing.
\nMany critics say AI code generators build the same structural errors again and again. But let us be honest: this happens in human development teams all the time. An engineer in a hurry rarely reads the full project history or deep documentation. People copy old errors, ignore best practices, and skip reading.
\nWith autonomous AI agents, it is different. They do not feel time pressure and they do not get tired of reading. If we document architectural rules and past decisions clearly – for example in a central decision.md file –, something great happens:
\n\nBusy human engineers often ignore documentation when the deadline is near. AI agents will read and follow the instructions in decision.md strictly on every single run.
\n
The future is not about seniors spending all day proofreading bad AI code. The tools will get mature very soon. The real senior discipline is shifting away from code reading towards Context Engineering.
\nIt is about building the right tooling infrastructure. We need to feed the agents with precise context so that bad code never gets created in the first place. When you keep your software architecture and coding standards machine-readable, your agent pipelines will work with fewer errors than a stressed human team ever could.
\n", "date_published": "2026-05-16T00:00:00Z" } , { "id": "https://b.polente.de/blog/IsAIRottingOurProgrammingBrainsorFreeingUs/", "url": "https://b.polente.de/blog/IsAIRottingOurProgrammingBrainsorFreeingUs/", "title": "Engineering Excellence or Brain Rot? The AI Development Paradox", "content_html": "![\"A](\"https://b.polente.de/img/JqjPc5Lskc-360.png\")
A recent headline from 404 Media caught my eye: "Software Developers Say AI Is Rotting Their Brains." It’s a provocative title, but for many of us in the trenches, it hits home. Developers report a sense of "de-skilling", a feeling that by outsourcing the "thinking" to an LLM, we are losing our ability to reason about complex systems. One developer compared it to the way we stopped remembering phone numbers once we got cellphones; now, we are mentally outsourcing our critical thinking.
\nI remember the early arguments for AI: "Don’t worry. The goal is to free you from repetitive tasks so you can focus on high-value work."
\nThe reality is that AI rarely meets high standards. It is easy to like the idea of delegating boring work, but it brings a vital question: What exactly are these "high-value" tasks? If the parts we loved about our jobs, the problem-solving and the deep focus, are being automated, what is left? Only a capitalist value creation that might not lead to better user experiences at all.
\nI experienced this paradox firsthand on a large legacy codebase. At the start, I was enthusiastic. We were able to churn out code at a pace that felt like magic. But the quality was far from ideal.
\nWe quickly fell into the "shit in, shit out" trap. Without a common baseline or strict quality control, the AI simply followed the existing mess of the legacy system. The result was a "rat’s nest" of tech debt that became increasingly hard to untangle. I left that account feeling disillusioned. I realized then that if you don't invest heavily in the foundations, AI doesn't help you; it just helps you fail faster.
\nHowever, my perspective shifted recently while working on a near-greenfield project. I had the opportunity to cut out everything unnecessary from the initial POC, starting with a clean slate.
\nThis time, I set up my agents to follow strict coding guidelines from day one. I ran specialized quality agents that checked for architectural rules, OWASP security standards, and style guides. The difference was night and day.
\nWe delivered in 8 weeks what would have taken us years to build just two years ago.
\nThe key wasn't just "using AI"; it was managing it. We treated the agents as part of a sophisticated workflow, ensuring they didn't turn our pull requests into a mess.
\nTo avoid the "brain rot" and achieve actual engineering excellence, there is a huge investment required. It isn't just about writing a prompt; it's about aligning your entire ecosystem:
\nWe are entering a completely different era of software engineering. Today, no one questions a CI/CD pipeline; it’s a baseline necessity for handling repeating tasks. Software development, especially in e-commerce, involves a massive amount of repetition. Creating your fifth or sixth platform is often just orchestrating the middle layer and painting a new frontend on top of established baseline functionality.
\nAI is the next evolution of that automation. But it requires a new set of rules to prevent quality decay:
\nUse AI, but never trust it blindly. By focusing on the workflow and the baseline, we can ensure that AI is a tool for excellence, not a catalyst for atrophy.
\n![\"Collaborative](\"https://b.polente.de/img/s7rutJa9qL-360.png\")
I see it every day now. A developer types a short prompt. The AI agent writes 200 lines of code. It looks perfect. The UI is pretty. The feature is "done" in ten minutes. We call this vibe coding. If it feels right and the demo works, we ship it.
\nBut there is a trap. AI is very good at making things that look like they work. It is not always good at making things that actually work for a long time. In my 25 years of tech, I have seen many hypes. AI is different because it is so fast. It can create technical debt faster than any human.
\nWe need to talk about the real price of this speed. It is not just about writing code. It is about owning it.
\nBefore we had "Copilots". They suggested a line or a block. Now we have "Agents". They can create whole projects. They can run terminal commands. They can "fix" bugs themselves. The barrier to entry is gone. Even people who never learned how a browser works can now build a web app. This is great for ideas. But it is dangerous for systems that need to stay alive for years.
\nI hear a new idea lately. People say: "Why do we care about clean code? Why format it nicely?". They think the agent can read any mess. They say we can just recreate the code every time with a prompt. If it is ugly for humans it does not matter because humans do not read it anymore.
\nWhile it is highly likely that in the future we will not need clean code anymore—because AI will flawlessly manage and understand any mess—we are not there yet.
\nRight now, AI still does a lot of things wrong. When an agent makes a mistake, it is still the human who has to jump in and find the bug. Because of this, being able to read and understand code is still incredibly important. If the code has no structure, it has no logic you can follow to correct the AI's errors. "Vibe coding" should not mean "messy coding" today. Good engineering is still about clarity, at least until the AI is truly infallible.
\nSpeed is the main selling point. But we often confuse "shipping code" with "delivering value". If the code causes a security leak next week the speed was a lie. True speed is measured by how long the code stays in production without breaking.
\nThere is a big problem called Automation Bias. When the AI gives a confident answer we tend to believe it.
\nAI code often lacks "soul" or what we call clean architecture.
\nAI-generated code has 2.74 times more vulnerabilities than human code.
\nconst apiKey = \"sk-1234567890abcdef\";\nfetch(`https://api.service.com/data?key=${apiKey}`);// Use environment variables and a backend proxy\nconst response = await fetch('/api/proxy-endpoint');AI likes to solve things "locally". If you ask for a list of active users it might fetch 10,000 users and filter them in the browser.
\nconst users = await fetch('/api/all-users').then(res => res.json());\n// AI filter on client side. Very slow with 5000 users!\nconst activeUsers = users.filter(u => u.active === true);// Filter on the database level\nconst activeUsers = await fetch('/api/users?status=active').then(res => res.json());AI still fails at accessibility at scale. It can help with simple alt text but it struggles with complex keyboard navigation.
\n<div onclick="submitForm()" class="blue-box">Click Me</div><button type="button" onclick="submitForm()">Click Me</button>Why? A real button handles spacebar and enter key by default. A div does nothing
\nMany think: "I build fast now and then I let an agent refactor it later." This is a lie.
\nWe had bad code before AI. But AI increases speed and volume. It lowers the barrier to ship bad solutions. We are now producing mess at scale.
\nAI learns from the internet. The internet is full of bad and old and insecure code.
\nI am not anti-AI. It is great for:
\nIf you use AI agents in your team you need rules. Here is my "Stay Safe" list:
\nAI is a power tool. It is like a chainsaw. It can help you build a house fast. But if you don't know how to sue it you might lose a leg. Let's stay safe.
\nI did a fun project to check how modern CLIs and Chat agents work with a simple prompt and clean data. The goal was to see if an AI can build a state-of-the-art CV webpage completely alone. No questions allowed—just "Zero-Shot" execution.
\nAll code and the source data are here: github.com/polent/Research
\nI used a JSON file for the content and a profile image. The prompt asked for a professional design, light and dark themes, and high standards for accessibility and SEO.
\nI tested four different setups. It was a bit unfair for Copilot because I used an older version without a subscription. But this shows exactly the point: the more expensive and modern tools work better. Even the best prompt cannot save an outdated model.
\nYou can see the difference in the output links:
\nThe tool you use is just as critical as the prompt you write. For complex frontend tasks that need to be "Zero-Shot," you need a tool that understands modern W3C standards and accessibility: Success with Claude / Gemini
\nThis is the MD file I used as the input for all agents:
\n# Autonomous CV Website Generator Prompt\n\nYou are an expert Frontend Developer and UI/UX Designer. Your task is to\nautonomously generate a state-of-the-art, fully static CV/Resume webpage based\non the provided source data.\n\n## Constraints & Execution Mode\n\n- **Zero-Shot Execution:** You must work completely autonomously. Do NOT ask any\n clarifying questions. Use your best judgment for any ambiguities and output\n the final result.\n- **Output Location:** Place all generated files into the\n `dist/` directory so that the webpage can be browsed\n statically (e.g., `dist/gpt4/index.html`).\n\n## Input Data\n\n- All raw data is located in the `src/` directory of the project root.\n- Use `src/index.json` for the text content of the CV.\n- Use the image `src/HolgerHellinger640.png` as the profile picture.\n\n## Core Requirements\n\n### 1. Design & Aesthetics\n\n- **State-of-the-Art:** Create a modern, professional, and visually stunning\n aesthetic. Use excellent typography, whitespace, and subtle\n animations/transitions.\n- **Icons & Imagery:** Effectively feature the provided profile image. Create\n and use high-quality, modern SVG icons for contact details, social links,\n sections, and skills.\n- **Theming:** Implement **Light and Dark themes**. Respect system preferences\n by default (`prefers-color-scheme`) and include a functional toggle switch\n for manual overrides.\n\n### 2. Print & Export\n\n- **Print Styles:** Write robust @media print CSS rules. When the user\n attempts to print or save the page as a PDF, the CV must format perfectly to\n standard paper sizes (A4/Letter), hiding UI elements like the theme toggle,\n removing dark mode backgrounds, and handling page breaks elegantly.\n\n### 3. Optimization & Readability\n\n- **Accessibility (a11y):** The HTML must be fully accessible. Use semantic\n HTML5, correct heading hierarchy, and proper ARIA labels. Ensure keyboard\n navigability and high contrast.\n- **SEO:** Optimize the site for search engines with comprehensive\n tags (title, description, viewport, OpenGraph).\n- **Agent/Machine Readable:** Ensure the site structure is highly logical so AI\n agents can parse it effortlessly. Embed the CV data into the HTML using\n JSON-LD with the schema.org/Person specification. The year 2026 marks a significant evolution in design system management, shifting from the "Jack-of-all-trades" design team structures prevalent in 2023 to a highly integrated "Human + AI Pairing" model. This whitepaper introduces "The Agentic Design Workflow," an approach that leverages the Model Context Protocol (MCP) and advanced agentic reasoning to streamline the entire design-to-development lifecycle. By orchestrating AI with existing tools like Figma, Storybook, and Jira, this workflow shifts the design focus from creating static, high-fidelity mockups to defining system components, patterns, and annotations, which intelligent agents use to construct production-ready interfaces.
\nAt the core of this approach are three interconnected MCP layers: the Figma MCP Server exposes design context to AI agents, MCP Apps render interactive review and configuration UIs directly inside AI conversations, and the Storybook MCP resolves design components to framework-specific code. Together, they form a continuous design system flow that replaces manual handoffs with an automated, bidirectional pipeline.
\n![\"A](\"https://b.polente.de/img/2h_4cJOyPu-360.png\")
Traditional design and development workflows are plagued by inefficiencies stemming from disconnected tools, manual handoffs, and the constant need to translate design intent into production-ready code. Teams create full-blown designs and comprehensive workflows within Figma, making long-term management of design and UX artifacts incredibly difficult. In this "visual-first" approach, it becomes unclear to stakeholders what represents the latest truth, and deprecating old designs is a cumbersome, manual process.
\nThis fragmentation leads to what we call the "re-inventing the wheel" problem: design components are meticulously crafted in design tools, only to be laboriously re-implemented by developers. Industry estimates suggest this traditional approach contributes to approximately 30% waste in time and resources across the design-to-development lifecycle.
\nDesign systems, while intended to solve this, often become rigid "golden cages", systems too inflexible to adapt to evolving project needs and technology stacks. The absence of a seamless, bidirectional flow between design artifacts (Figma components, design tokens) and development assets (Storybook components, production code) creates friction, delays, and perpetual synchronization challenges. This is exacerbated in complex, multi-platform environments where consistency and rapid iteration are paramount yet frequently undermined by the very processes designed to ensure them.
\nThe foundational step involves importing the baseline design system into Figma and establishing a robust annotation framework. This isn't merely about visual assets; it's about setting up a system of annotations—similar to how we currently handle Accessibility or SEO—to define design intent. This framework allows designers to annotate spacing, gaps, font sizes, coloring, borders, and shadows (all managed via Tokens) directly on simplified layouts, rather than manually crafting every pixel for every state.
\nBuilding on the Figma setup, this step focuses on exporting semantic tokens from brand intent via a pipeline workflow. Design tokens, as defined by Holger Hellinger's insights, are the atomic units of a design system, encapsulating styling information (colors, typography, spacing, etc.). An intelligent pipeline, potentially augmented by AI, will extract and formalize these tokens from the Figma design system, ensuring consistency and enabling dynamic application across various platforms and technologies. This process moves beyond static values to semantic understanding, linking design decisions directly to their underlying brand principles.
\nThis step introduces the two MCP capabilities that make the agentic workflow possible. Understanding the distinction between them is critical.
\nThe Figma MCP Server is a standard MCP server that exposes design system data to AI agents. Available as both a remote hosted endpoint and a local desktop server, it provides three specialized agent skills:
\nThe Figma MCP Server is the read side of the workflow: it gives agents access to tokens, component metadata, layout structures, and Code Connect mappings.
\nMCP Apps are a fundamentally different capability. Released in January 2026 as the first official MCP extension (@modelcontextprotocol/ext-apps), they allow MCP servers to return interactive UI components that render directly inside AI conversations — in Claude, VS Code, ChatGPT, or any supporting MCP host.
Architecturally, an MCP App consists of two paired primitives:
\n_meta.ui.resourceUri field pointing to a UI resource.ui:// scheme, containing bundled HTML/JavaScript that renders in a sandboxed iframe within the host application.The host and the UI communicate bidirectionally via JSON-RPC over postMessage. The UI can receive tool results, call server tools, and maintain persistent state — all while the AI model stays informed of user interactions.
Where the Figma MCP Server lets agents read design context, MCP Apps let agents present interactive interfaces back to the user. This closes a critical gap in the continuous design flow:
\nTogether, these layers form a continuous, bidirectional pipeline:
\nFigma MCP Server → MCP Apps → Storybook MCP → Agent Assembly\n (read design) (review/decide) (resolve code) (generate output)The designer annotates in Figma. The agent reads context via the Figma MCP Server. An MCP App surfaces an interactive review for the designer to confirm or adjust. The agent then resolves the final components via Storybook MCP and assembles production code. At no point does the workflow require leaving the AI conversation or manually translating between tools.
\nLeveraging concepts from Vercel Labs' json-render, this step focuses on rendering design intent (expressed as JSON schemas) directly into UI. Rather than working with static visual artifacts, designers and agents manipulate production-ready component schemas that render in real time.
This capability connects directly to the MCP layer: the Figma MCP Server provides the design context, the agent assembles a JSON schema from annotations and token values, and the rendering engine produces a live preview. MCP Apps can embed these previews inline in the AI conversation, allowing designers to see the result immediately and iterate without switching tools. The goal is to find the sweet spot between granular designer control and overall developer efficiency, focusing on production and high-fidelity use cases.
\nInstead of letting AI or agents generate massive designs from specs that are difficult to consume or validate later, this workflow leverages Responsive Patterns and annotations. Designers utilize these patterns to describe how maintained library components are utilized within a layout.\nDesign and UX teams can focus on high-value annotations and "nice-to-haves" rather than repeatedly creating designs for multiple layouts. The workflow is annotation-driven:
\nTo truly move from "drawing pages" to "orchestrating systems," the architecture of components themselves must evolve from rigid configurations to flexible compositions. This is achieved by adopting a slot-based component architecture, a concept recently highlighted by Figma as a path forward for modern design systems.
\nInstead of creating dozens of variants for a single component (e.g., card-with-button, card-with-image, card-with-button-and-image), a slot-based approach defines a single card component with designated "slots" where content like a header, media, or actions can be placed. This decouples the container from its content.
A crucial step in bridging the design-development gap is ensuring that components within Figma are accurately mapped to their corresponding Storybook components via Figma Connect. This mapping is vital for the agent to correctly populate responsive patterns and templates with the right interactive elements. By establishing a robust, automated link, any updates or changes in the Figma design system can be reflected and validated directly within Storybook, maintaining synchronization and reducing discrepancies between design and code.
\nWhile Figma Connect facilitates mapping for React components, a significant portion of the digital landscape involves other frameworks (Vue, Angular, Svelte) or pure web components. For these, the agentic workflow relies on the Storybook MCP, a server that merges Storybook component metadata with Figma design context into a single rich context for the AI agent. The Storybook MCP can classify each component as Available, Partial, or Missing relative to the design system, providing the agent with a complete inventory regardless of the target framework. Combined with task context from ticketing systems (Jira, etc.), the agent can intelligently resolve and utilize the correct, framework-agnostic components. This ensures that the benefits of component orchestration extend beyond a single framework, providing comprehensive design system coverage.
\nThis is where agentic reasoning truly shines. MCP servers consume the Figma annotations as prompts, combining them with component documentation to generate the final UI. An ideal workflow looks like this: The agent reads a prompt derived from annotations, such as: "For this Registration form, only use pattern XYZ and the following form fields. Make sure to use Theme ABC and strip the form into steps when more than 5 form elements are needed on one form, except when only 1 form field is left on the second step." The agent then maps these instructions to Storybook components and assembles the code automatically. This eliminates the need for visual mockups of every state, relying instead on the logic defined in the annotations.
\nThe ongoing maintenance of design system documentation is often a bottleneck. In this agentic workflow, documentation is not an afterthought but an integrated, continuous process. Through MCP-connected platforms like Jira or Confluence, agents can automatically generate, write, and update .md documentation based on changes in Figma, Storybook, or project requirements. This ensures that documentation remains current, accurate, and accessible, serving as a living repository of the design system's evolution.
Implementing the Agentic Design Workflow requires assembling a concrete stack of MCP-compatible tools. The following table maps each layer of the continuous design flow to its current tooling:
\n@modelcontextprotocol/ext-apps SDK): Renders interactive dashboards, diff viewers, pattern galleries, and configuration wizards inside AI conversations (Claude, VS Code, ChatGPT, Goose).Implementation should follow the phased adoption strategy (see Adoption & Scaling Strategy below), starting with the Figma MCP Server and progressively adding MCP Apps and Storybook MCP as the team's annotation practice matures.
\nThis scenario illustrates the shift away from creating complete, pixel-perfect designs in Figma towards a more efficient, annotation-oriented approach.
\nThis scenario demonstrates the power of a token-based architecture when making global changes or introducing new themes.
\nThe Agentic Design Workflow fundamentally amplifies the capabilities of design and engineering teams. By replacing manual handoffs with MCP-driven automation, leaner teams can achieve significantly higher output. This amplification stems from:
\nAdopting the Agentic Design Workflow is a strategic shift in process and mindset. It can be rolled out in managed phases, ensuring each step builds value and buy-in before advancing to the next level of automation. The focus begins in the design tool (Figma) and progressively expands into the development pipeline.
\nBefore any automation, the foundation must be solidified within Figma. The initial phase is dedicated to creating a well-structured design environment that is ready for an agent to understand.
\nWith the foundation in place, the agent is introduced as a powerful assistant to accelerate the design and feedback cycle. The designer's role officially shifts from creating static visuals to orchestrating systems.
\nIn the final phase, the agent graduates from a prototyping assistant to a core orchestrator in the production pipeline. The workflow becomes a seamless, automated flow from design to deployment.
\nThe Agentic Design Workflow, powered by the Model Context Protocol and advanced AI reasoning, represents a paradigm shift in how we approach design and development. By fostering a truly integrated "Human + AI Pairing" model, we can overcome the inefficiencies of traditional processes, significantly reduce waste, and unlock unprecedented levels of creativity and productivity. This whitepaper has outlined a vision for a future where design systems are not static repositories but living, evolving entities orchestrated by intelligent agents.
\nFor years, the Linux and open-source communities have waited for their "daylight"; a moment where the world finally sees the danger of the Big Tech silos. With the rise of the #DIDit (Digital Independence Day) movement, sparked by the cultural momentum of Marc-Uwe Kling, that moment has arrived. People are deleting their Meta accounts, ditching Windows, and proudly announcing they now host their own Mastodon or Nextcloud instances.
\nBut there is a bitter irony here. In the rush to show off their independence to Microsoft and Google, many tech-sovereign advocates are ignoring the massive environmental ledger they are creating. While they escape the "claws" of the Big Five, they are often replacing highly optimized infrastructure with fragmented, energy-hungry chaos.
\nThe hard truth is that sharing is almost always greener than owning. Hyperscale data centers (AWS, Google, Azure) operate with a Power Usage Effectiveness (PUE) as low as 1.09. This means nearly every watt goes directly into computing.
\nIn contrast, the average private server or "home cloud" setup is often an ecological disaster:
\n\n\nTo put it bluntly: Running your own server just to prove you don't need a billionaire's cloud is like driving a private diesel truck to work every day just to prove you don't need the public bus system. It is independent, but it is ecologically irresponsible.
\n
{\n \"key_insight\": \"Hyperscale efficiency vs. Fragmented waste\",\n \"pue_hyperscale\": 1.09,\n \"pue_private_avg\": 2.1,\n \"efficiency_delta\": \"Professional cloud is up to 4x more energy efficient\"\n}If you want to be free from the US "Oligarchs" without burning the planet, you don't have to host it under your desk. Several European providers offer a more sustainable path to sovereignty:
\n| Provider | \nOrigin | \nSustainability Profile | \nProfessional Focus | \n
|---|---|---|---|
| Hetzner | \nGermany | \nUses 100% renewable energy from wind and water in its German and Finnish parks. | \nHigh performance/price ratio for VPS and dedicated servers. | \n
| OVHcloud | \nFrance | \nVertically integrated; they build their own servers and use innovative water-cooling to reduce PUE. | \nBroad range of managed services with data sovereignty. | \n
| Scaleway | \nFrance | \nExtreme focus on circular economy and solar-powered data centers; highly transparent footprint. | \nDeveloper-friendly and Green IT leadership. | \n
| IONOS | \nGermany | \nMajor player focusing on enterprise reliability with 100% green energy in many regions. | \nStability and GDPR compliance for larger business structures. | \n
![\"The](\"https://b.polente.de/img/11hDVAJFHd-360.jpeg\")
Before you declare your digital independence, run this quick audit to see if you are replacing the "plague" with "cholera."
\nI recently wrote about how online shops are losing their souls. Everything looks the same, everything feels the same. The diagnosis was clear: construction kits like Shopify or Wix dictate the structure, and we lose the actual "experience" in a sea of technical uniformity.
\nBut if we are honest, there is a wave coming our way right now that won't solve this problem, but potentially exacerbate it exponentially: Artificial Intelligence.
\nDon't get me wrong, AI is a powerful tool. It helps us build layouts faster, predict conversion rates, and find designs that "work." Anyone using Figma or Midjourney today can get inspiration or generate entire components in seconds. This promises efficiency. It promises "better" designs because they are data-driven.
\nBut this is exactly where the fallacy lies.
\nWhen we use AI to make design decisions, what are those decisions based on? On data from the past. On what has already worked. The AI learns from existing inventory. If we ask it, "Create a design for a successful sneaker shop," it won't give us something radically new. It gives us the average of what statistically fails the least.
\nWe are optimizing ourselves into absolute sameness.
\nThe danger is real: The more we rely on tools to do the thinking for us, the more we switch off our own brains. Why should I rack my brains over a bold, new grid layout if the AI tells me that the standard 3-column layout converts better?
\nWe run the risk of viewing design merely as "painting by numbers," where the algorithm dictates the colors. If we stop allowing for human imperfection, emotional breaks, and "illogical" decisions, we lose exactly what makes brands stand out: Character.
\nThe more we use tools instead of our brains, the more identical things will become. It’s a feedback loop: The AI learns from our uniform shops, proposes uniform designs to us, we build them, and the next AI learns from that again.
\nWhere will this end?
\nHowever, there is a path where AI doesn't make us boring, but rather empowers us to be more unique, if we have the courage to use it correctly.
\nInstead of asking AI for the "best solution" (which is just the most average one), we can use it to clear the path for real creativity.
\nWill we eventually be unable to distinguish whether there is a philosophy behind a brand or just a well-prompted algorithm? If everything is "best practice," nothing is special anymore.
\nMaybe we need to relearn how to be inefficient to remain relevant. We need to use AI to build the foundation, but we must never let it be the architect of the soul.
\n", "date_published": "2026-01-27T00:00:00Z" } , { "id": "https://b.polente.de/blog/WhyAIIsMakingFrontendAverage/", "url": "https://b.polente.de/blog/WhyAIIsMakingFrontendAverage/", "title": "Why AI Is Making Frontend Average", "content_html": "AI helps us write code faster, but speed is not quality. Most AI tools suggest solutions that work but feel old: media queries everywhere, Flexbox centering for everything, and custom selects rebuilt with JavaScript.
\nThe problem is not missing specs; the problem is missing real use cases. AI learns from what is used most, not from what is best today.
\nAI can read CSS specs and summarize blog posts, but AI does not "feel" layout problems. It does not build design systems or refactor code after one year. So it falls back to patterns from years ago.
\nLarge Language Models (LLMs) are trained on historical data, meaning they excel at what was common two years ago but often struggle with what is possible today. Many modern CSS features, like native nesting, container queries, or scroll-driven animations. These features are simply not present in high enough volume in the training sets to be the default suggestion.
\nThis creates a dangerous feedback loop for junior developers. If they rely entirely on AI suggestions, they may never learn that these modern features exist. They might spend hours debugging complex JavaScript for a scroll effect that could have been three lines of CSS, simply because the AI didn't know any better.
\nAI still prefers viewport logic.
\n@media (min-width: 768px) {\n .card {\n display: grid;\n }\n}But components do not live in viewports.\nThey live in containers.
\n.card {\n container-type: inline-size;\n}\n\n@container (min-width: 400px) {\n .card {\n display: grid;\n }\n}Modells are currently also not trained a lot on the below features. To validate an outcode you need to know from it. Did you know all those new CSS features?
\n@scroll-timeline reveal {\n source: auto;\n}\n\n.card {\n animation: fade-in linear both;\n animation-timeline: reveal;\n}.card {\n & h2 {\n margin-bottom: 0.5rem;\n }\n}form:has(input:user-invalid) {\n border-color: red;\n}@property --progress {\n syntax: '<number>';\n inherits: false;\n initial-value: 0;\n}\n\n.progress {\n --progress: 70;\n width: calc(var(--progress) * 1%);\n}h1 {\n font-variation-settings: \"wght\" 650;\n}@layer reset, base, components, utilities;.carousel {\n scroll-snap-type: x mandatory;\n}\n\n.slide {\n scroll-snap-align: center;\n}background: color-mix(in oklab, blue 80%, white);color: light-dark(#111, #eee);select {\n appearance: none;\n}li {\n animation-delay: calc(sibling-index() * 60ms);\n}padding: if(var(--dense), 0.25rem, 1rem);.tooltip {\n position-anchor: --trigger;\n}h1 {\n text-wrap: balance;\n}.container {\n display: flow-root;\n}h1 {\n font-size: clamp(1.8rem, 4vw, 3rem);\n}AI makes average cheap. Junior developers often trust AI output blindly, repeating old patterns instead of exploring modern solutions. Modern CSS exists, but only humans push it forward.
\nFrontend is not finished, and CSS evolves fast. If we let AI decide alone, the web will stop moving. Modern CSS keeps us sharp.
\nOne protocol for commerce. Open. Standardized. Ready for AI. Companies can expose products and services to AI agents. AI can search, compare, and even buy on behalf of users.
\nOn paper, this is progress. In reality, it smells like the next step where small businesses slowly disappear.
\nThey do not care about story, craft, or passion. They want:
\nBig companies can deliver this. Small shops usually can not.
\nIf your data is not perfect, you are skipped. If you are skipped, you do not exist.
\nNow, you need machine readiness. That means:
\nThis is not free. It needs time, people, and money.
\nA small painter selling hand made art can not compete here. Amazon can.
\nSo the AI will find Amazon. Not because it is better. Because it is easier.
\nBut openness does not remove power imbalance. Big companies will build:
\nSmall businesses will depend on those tools to stay visible.
\nThis is vendor lock-in without a contract. You are free to leave. You just disappear if you do.
\nMarketplaces love this.
\nThere will be:
\nBig companies spread this cost. Small ones feel it directly.
\nMore sales. Less profit. More dependency.
\nSafe means:
\nAgain and again.
\nIt is well designed. But it solves problems that big companies already have.
\nSmall businesses get new problems instead:
\nThe protocol is open. The outcome is not.
\nJust faster. And quieter.
\nIs Universal Commerce Protocol a real chance for small businesses or just another step where platforms take everything in between?
\nI am curious to hear other opinions.
\nWhen we decided three years ago to roll out design tokens across our project, it felt a little visionary and a little brave. At the time, nobody really knew where this path would lead, or whether design tokens would ever become widespread. Today? A project without design tokens would feel odd and uncommon.
\nThis shift enabled us to make one binding decision: design and tech components are no longer separate. Design tokens bridge that gap. And in the last two years, with AI-powered tools emerging, that bridge has only grown more critical. We can now connect Figma and Storybook and Atlassian Confluence and VS Code at once. Even tools like BrowserStack allow automated testing and design-token integration. But that, as they say, is a story for another day.
\nThere are already many tools that support this workflow: the specification’s stability is backed by reference implementations like Style Dictionary, Tokens Studio and Terrazzo. More than ten design tools and open-source projects – including Penpot, Figma, Sketch, Framer, Knapsack, Supernova and zeroheight – already support or are implementing the standard.\nEven more importantly: the tooling is open. Developed by the Design Tokens Community Group, the specification reflects real-world design-system use cases from teams at companies of all sizes. Being an open standard means no single vendor controls the format—teams have freedom of tool choice without compatibility concerns.
\n$0xFFFFFF (white) with descriptive names like color.white.Here are five concrete examples:
\ncolor.primary.500, color.background.secondaryfont.size.large, font.weight.boldspacing.medium, spacing.smallradius.small, radius.mediumshadow.small, shadow.mediumWhen we embarked on this journey, adopting design tokens felt like a leap into the unknown. Today, it's clear they are foundational. They empower design and engineering to speak the same language, enable scalable and consistent systems, and prepare us for a future where tooling spans design apps, component libraries, AI workflows and beyond. If you haven't yet embraced design tokens, now is the time. A project without them simply wouldn't feel right.
\nThe Model Context Protocol (MCP) defines a standard way for local or remote tools to talk to models and IDEs. It lets you access external services or APIs directly inside your editor, without complex system setup or locked-in toolchains. MCP servers connect tools like Atlassian, Figma, or Storybook to your AI model and make workflows faster, consistent, and traceable.
\nBelow is an example mcp.json configuration that we use across our Design System setup:
{\n \"servers\": {\n \"atlassian\": {\n \"url\": \"https://mcp.atlassian.com/v1/sse\",\n \"type\": \"http\"\n },\n \"figma\": {\n \"type\": \"http\",\n \"url\": \"http://127.0.0.1:3845/mcp\"\n },\n \"storybook-mcp\": {\n \"url\": \"http://localhost:6006/mcp\",\n \"type\": \"http\",\n \"headers\": {\n \"X-MCP-Toolsets\": \"dev,docs\"\n }\n }\n }\n}Our workflow starts in Figma. Designers use Figma and Figma Make to create responsive UX and UI layouts for clients. Semantic structure and design flexibility are key. Once approved, design tokens are exported into a shared repository. We use Style Dictionary to generate tokens for web, Flutter, and other platform targets.
\n![\"Flowchart](\"https://b.polente.de/img/RC1UYabzmQ-360.jpeg\")
Next, the Figma MCP server connects the IDE directly to these designs. Engineers can use commands like #get_design_context, #get_metadata, or #get_screenshot to pull Figma information into the editor.\nMore details: Figma MCP Guide
Before development starts, the Atlassian MCP server helps fetch and manage Jira tickets. Typical actions include:
\n#getJiraIssue#editJiraIssue#addCommentToJiraIssueThis ensures the agent knows the ticket context before coding begins.\nDocumentation: Atlassian Rovo Setup
\nFor component development, we use the Storybook MCP. Still in alpha, it already provides two useful modes:
\ndev: retrieves component documentation or usage.docs: gives UI building instructions.More info: Storybook MCP Addon
\nPrompt files let you define complex, repeatable workflows.\nExample — an icon update process:
\n---\nagent: 'agent'\nmodel: Claude Sonnet 4\ntools: [\n 'edit/createFile', 'edit/editFiles', 'search', 'runCommands',\n 'atlassian/getJiraIssue', 'figma/get_design_context',\n 'storybook-mcp/get-component-documentation'\n]\ndescription: 'Design System - Icon Management Prompt'\n---\n# Icon Workflow\n\n1. Fetch Jira ticket\n2. Pull Figma assets\n3. Build and test\n4. Create changeset\n5. Update Jira statusPrompt files can be stored in your repo to maintain team consistency.\nLearn more: VS Code Custom Prompts
\nTo make the agent aware of your coding conventions, you can use instruction files.\nExample for test files:
\n---\napplyTo: '**/*.spec.*'\n---\nFollow Jest best practices.These can define lint rules, review tone, or commit patterns.\nReference: Custom Instructions
\nWith MCP servers and prompt files, engineers can:
\nNo tool-hopping. No lost context. Agents act with awareness of design, documentation, and project state.
\n![\"Diagram](\"https://b.polente.de/img/QmnfoprBPZ-360.jpeg\")
This setup runs in VS Code, but also works with Cursor, Cline, or any IDE that supports MCP.
\nFor Design System teams, context switching is the biggest productivity loss. With MCP-based workflows, you stay inside one environment. The model fetches context from Jira, design, and documentation servers automatically.
\nThe result: fewer errors, faster delivery, and better alignment between designers and engineers.
\nStart small. Connect one MCP server (e.g., Figma). Try simple prompts to pull metadata or screenshots. Once stable, add Jira and Storybook.
\nOver time, you’ll see your design system evolve from a manual process to a connected, intelligent workflow: a true continuous experience pipeline.
\n", "date_published": "2025-11-11T00:00:00Z" } , { "id": "https://b.polente.de/blog/RethinkingCSSLayoutsMoreThanJustFlex/", "url": "https://b.polente.de/blog/RethinkingCSSLayoutsMoreThanJustFlex/", "title": "Rethinking CSS Layouts – More Than Just Flex", "content_html": "Many developers know only display: block and display: none. Grid, Floats, Flow-Root and Container Queries are always forgotten. This creates weak layouts and too much JavaScript. Here is a short overview with examples when to use what.
I work with many developers at a big client. All are experienced, but something is missing. When it comes to layout, I see only Flexbox. Grid, Floats, even simple display types are gone.
\nMaybe this comes from the fullstack idea. Everyone does a bit of everything, but no one is really strong in CSS. Or maybe we think: React and our design system will solve it. But when we build bigger components, people fail.
\nSo I write here how to build layouts again with CSS, not only Flex.
\nBefore CSS, you need good HTML. Layout will never be clean if everything is <div>. Use semantic elements:
<header>…</header>\n<nav>…</nav>\n<main>…</main>\n<article>…</article>\n<section>…</section>\n<footer>…</footer>This makes code readable, accessible and structured. CSS works better on it.
\n![\"Hand-drawn](\"https://b.polente.de/img/PAhI-3VnnR-360.png\")
Grid is perfect for large page layouts. A master layout with header, sidebar, main and footer looks like this:
\nbody {\n display: grid;\n grid-template-rows: auto 1fr auto;\n grid-template-columns: 200px 1fr;\n grid-template-areas:\n \"header header\"\n \"sidebar main\"\n \"footer footer\";\n min-height: 100vh;\n}\n\nheader { grid-area: header; }\naside { grid-area: sidebar; }\nmain { grid-area: main; }\nfooter { grid-area: footer; }This gives you a clear base. Inside you can use inline-grid for sublayouts.
\n![\"Hand-drawn](\"https://b.polente.de/img/u9G31FqLYb-360.png\")
Old tools, but still useful. A picture with text around it is simple with float:
\nimg {\n float: left;\n margin: 0 1rem 1rem 0;\n}To close the container after floats, just use flow-root:
\n.container {\n display: flow-root;\n}No clearfix hack anymore. Clean and simple.
\n![\"Hand-drawn](\"https://b.polente.de/img/VN9O4iBIpO-360.png\")
Flex is strong for smaller things. Navigation, button groups, card rows:
\nnav {\n display: flex;\n gap: 1rem;\n}But please don’t use it for full page layouts. Flex is for rows and columns, not for full grids.
\nSometimes layout alone is not enough. Grid, Flex or Floats give you the structure, but you also need ways to react to different sizes. This is where Media Queries and Container Queries come in. They work hand in hand with the layout techniques above and make your components really flexible.
\n![\"Hand-drawn](\"https://b.polente.de/img/x8mZlmkVt--360.png\")
Classic and still needed. They react to screen width:
\n.card-list {\n display: grid;\n grid-template-columns: 1fr;\n}\n\n@media (min-width: 768px) {\n .card-list {\n grid-template-columns: repeat(3, 1fr);\n }\n}![\"Hand-drawn](\"https://b.polente.de/img/yy7rzgIss3-360.png\")
This is the real game changer. The container size counts, not the screen size:
\n.card-list {\n display: grid;\n grid-template-columns: 1fr;\n container-type: inline-size;\n}\n\n@container (min-width: 600px) {\n .card-list {\n grid-template-columns: repeat(3, 1fr);\n }\n}Now a component adapts itself, no matter if inside a small or large container.
\nIf Flex is your only tool, every layout looks like a Flex problem. Use Grid for structure, Floats for small tricks, Flow-Root for clean containers, Flex for rows, Media Queries for screens and Container Queries for real responsive components.
\nAnd don’t forget: everything starts with good semantic HTML. Then CSS will be strong and clear again.
\n", "date_published": "2025-09-22T00:00:00Z" } , { "id": "https://b.polente.de/blog/ECommerceWebsiteAuditFramework/E-CommerceWebsiteAuditFramework/", "url": "https://b.polente.de/blog/ECommerceWebsiteAuditFramework/E-CommerceWebsiteAuditFramework/", "title": "E-Commerce Website Audit Framework", "content_html": "This framework provides a comprehensive audit method for e-commerce websites. It covers SEO, performance, accessibility, front-end code, architecture, security, integrations, documentation, and operations. Each section includes sample do’s and don’ts, recommended tools, and evaluation criteria. These examples are illustrative only; in real audits, there are many more program-, client-, and project-specific checks. Deliverables include an executive summary, a detailed findings report, and a scorecard (1–5 rating) to prioritize fixes.
\n![\"A](\"https://b.polente.de/img/EmBjYqN9gb-360.png\")
What to check: On-page optimization, structured data, crawlability, and search performance.
\n✅ Do
\n❌ Don’t
\nWhat to check: Speed, resource usage, and ability to handle growth.
\n✅ Do
\n❌ Don’t
\n<head>.What to check: Compliance with WCAG 2.1+ and real-world usability.
\n✅ Do
\n❌ Don’t
\nReference: Publicis Sapient CoE Accessibility in Canada – “Accessibility for All” initiative
\nWhat to check: Clean, maintainable, and performant code.
\n✅ Do
\n<button>, not <div onclick>).❌ Don’t
\nstyle="").!important in CSS.What to check: Scalability, modularity, and resilience.
\n✅ Do
\n❌ Don’t
\nWhat to check: Protect against vulnerabilities, compliance with standards.
\n✅ Do
\n❌ Don’t
\nWhat to check: Reliability and compliance of third-party systems.
\n✅ Do
\n❌ Don’t
\nWhat to check: Knowledge sharing, standards, and process.
\n✅ Do
\n❌ Don’t
\nWhat to check: Deployment, monitoring, and resilience.
\n✅ Do
\n❌ Don’t
\nProject: Audit of “ShopNow E-Commerce”\nDate: September 2025
\nThe audit identified several strengths in the current platform, including a scalable cloud architecture and good API documentation. However, there are significant gaps in accessibility, performance, and security.
\nRecommended Roadmap:
\n| Category | \nRating (1–5) | \nNotes | \n
|---|---|---|
| SEO | \n3 | \nIndexing is fine, but missing structured data and duplicate metas. | \n
| Performance | \n2 | \nMobile performance weak (LCP > 4s), no CDN usage. | \n
| Accessibility | \n1 | \nWCAG compliance poor, several critical blockers. | \n
| Frontend Code | \n3 | \nSemantics okay, but CSS unstructured, JS bundles too large. | \n
| Architecture | \n4 | \nModular and scalable, but observability limited. | \n
| Security | \n2 | \nOutdated libs, missing CSP and secure headers. | \n
| Integrations | \n4 | \nAPIs well documented, retry logic missing in payments. | \n
| Documentation | \n3 | \nGood developer docs, but no audit or ADRs kept updated. | \n
| Processes/Ops | \n4 | \nCI/CD pipeline in place, but no DevSecOps or automated scans. | \n
Legend:
\nSometimes change comes not from adding, but from removing. I recently removed UI contents from a TSX implementation so our client’s new aggregated design system component could work headless with existing Providers, Components, and Containers.
\nThe old TSX files mixed logic and UI. Layout, styles, and visual glue were baked into every component. This made it hard to scale or update design. The new design system components needed a clean separation so it could deliver a consistent experience across apps and markets.
\nThe design system is built on top of the core component library. It orchestrates existing base components, defines patterns, and ensures Cards, Filters, and Buttons look and behave the same everywhere.\nThe UI components are dumb: they only render what they get. Data, content, and CTA events are injected from outside. This keeps them reusable, predictable, and easy to test.
\nThis setup also uses MCP servers:
\nSeeing a fully automated migration from that single prompt file, with design and ticket updates happening in sync. That’s when agentic workflows stopped being theory and started driving real efficiency.
\nSapient Slingshot turned this from a tedious migration into a repeatable system.\nWith one prompt file, we automated a process that would normally take weeks, aligned design and dev in real time, and set a new standard for scaling design systems.\nThis shows the power of AI-driven engineering: fewer manual steps, faster delivery, and better quality — without compromise.
\n", "date_published": "2025-09-11T00:00:00Z" } , { "id": "https://b.polente.de/blog/SuperchargeVSCodeWithMCPServersAndAgentMode/", "url": "https://b.polente.de/blog/SuperchargeVSCodeWithMCPServersAndAgentMode/", "title": "Supercharge GitHub Copilot's Agent Mode", "content_html": "The Visual Studio Code docs on MCP servers show how to supercharge GitHub Copilot's agent mode by plugging in external tools using the Model Context Protocol (MCP).
\nMCP is an open standard that lets AI communicate with tools and services via a unified interface. With MCP-compatible servers hooked up to VS Code, Copilot can do more than just suggest code – it can:
\nAll directly inside your editor.
\nIt also explains what types of servers are supported and how to use MCP tools in agent mode.
\nThe goal?
\n\n\nSmoother workflows, smarter tooling, and more time for building cool stuff.
\n
👉 Dive into the docs: VS Code MCP Guide 📚
\nHere are a few MCP servers I currently have configured:
\nsooperset/mcp-atlassiannx-mcpMore MCP servers are available here: 👉 List of MCP Servers
\nWhen setting up your mcp.json, you might worry about exposing settings.\nTo hide your MCP server variables securely, follow this flow:
{\n \"inputs\": [{\n \"id\": \"atl_token\",\n \"type\": \"promptString\",\n \"password\": true,\n \"description\": \"Enter your Atlassian Jira and Confluence token\"\n },{\n \"id\": \"BS_user\",\n \"type\": \"promptString\",\n \"password\": false,\n \"description\": \"Enter your BS User\"\n },{\n \"id\": \"BS_token\",\n \"type\": \"promptString\",\n \"password\": true,\n \"description\": \"Enter your BS token\"\n }],\n}\n\nThis will ask for secrets at server start and remember them.\nUse placeholder variables in your config (e.g.,
\n${input:atl_token}).
\"CONFLUENCE_API_TOKEN\": \"${input:atl_token}\",GitHub Copilot now supports a .github/copilot-instructions.md file in your repo to tailor responses to your tools, workflows, and coding style.
.github/copilot-instructions.md in your repository root\n\nCopilot will now include these automatically in its responses.
\n
Look for .github/copilot-instructions.md in the References section of Copilot Chat responses.
👉 GitHub Docs – Copilot Instructions
\nYou can also create prompt files like .github/prompts/prompts_Example.md. These files guide Copilot to align with your coding style, frameworks, and project needs, enhancing its suggestions. For more details, visit the official documentation.
Additionally two files are available that you can configure in your Settings.json with the following settings. The names alone explain what they are for.
\n\"github.copilot.chat.codeGeneration.instructions\": [\n {\n \"file\": \".github/code-style.md\"\n }\n],\n\"github.copilot.chat.testGeneration.instructions\": [\n {\n \"file\": \".github/test-style.md\"\n }\n]We transitioned from MUI and our old in-house design system due to performance issues, component duplication, and complex theming. We developed a React-based component library, integrating design tokens directly from Figma for real-time updates. This led to a 28% reduction in JavaScript bundle sizes, improved application performance, and more than 19 point enhanced Lighthouse scores. Centralizing our design process in Figma established a single source of truth, ensuring consistency across teams. With upcoming EUAA 25 accessibility regulations, our proactive approach positions us ahead of the curve by embedding accessibility into our design system's foundation.
\nThis blog post is about how we transitioned away from MUI and our old in-house design system. Over time, MUI no longer met our needs, and the earlier attempt at a custom design system faced issues. We struggled with component ownership, multiple entries for similar components, and a lack of integration between design tools and the final application. As a result, we ended up with a framework design system and another custom system that neither teams nor designers wanted to use.
\nDue to performance degradation, component duplication, and complex theming with MUI, we decided to develop our own dedicated design system.
\nWe then began working on a fresh, more effective approach. After considering different options, we decided to build a React-based component library. This choice aligned with our main consumer’s infrastructure. From the start, we focused on making the library easier to manage and more compatible with our design tools. (In an upcoming post, I’ll dive into why we’re now exploring a web component library built with Lit.)
\nWe used design tokens directly imported from Figma. Any updates in Figma were reflected immediately in the application. We also implemented a simple theming system that allowed clients to have their own themes within a controlled range. For specific customizations, we encouraged app-level overrides to keep the library itself lean and efficient.
\n\n\n“Design systems don’t fail because people ignore the rules; they fail because people lose faith that the rules will work.” – Itai Vonshak
\n
The issues described in Itai Vonshak’s post, such as teams losing trust in a design system due to unworkable rules, have not arisen in our case, thanks to the clarity and predictability built into our process. Our dedicated design system approach continues to work well, avoiding the challenges many teams face when navigating multiple, conflicting frameworks.
\nDespite our progress, parts of the old MUI and custom system still polluted our codebase. So, we formed a dedicated team to remove deprecated code, replace legacy components, and sync updates across teams. The results were immediate and clear:
\n![\"A](\"https://b.polente.de/img/7LgM39jp_9-360.png\")
With the upcoming EUAA 25 regulations on accessibility, having components that for example inherently meet contrast standards and include proper labeling will put us ahead of the curve. Accessibility is no longer an afterthought; it’s built into the foundation of our design system.
\nOver the years, our Google Lighthouse measurements have provided valuable insights beyond just package sizes, and the results have been truly impressive.
\n![\"Google](\"https://b.polente.de/img/dEU2NcaVJw-360.png\")
![\"Google](\"https://b.polente.de/img/Uv90WtBCKc-360.png\")
Needless to say, these results exclude third-party services like GTM, Analytics, Pendo, or cookie banner providers, as they are beyond our direct control.
\nThis effort has made our system easier to maintain and more useful for designers, developers, and clients. While we have more steps ahead, this phase of the journey highlights the value of thoughtful, deliberate change. If you have questions or want to learn more, please reach out.
\n", "date_published": "2025-03-14T00:00:00Z" } , { "id": "https://b.polente.de/blog/TheWonderfulWorldOfAIInSoftwareDevelopment/", "url": "https://b.polente.de/blog/TheWonderfulWorldOfAIInSoftwareDevelopment/", "title": "The Wonderful World of AI in Software Development", "content_html": "![\"This](\"https://b.polente.de/img/6Z5wFpBxUv-360.png\")
Imagine we live in a world where software is developed entirely by Artificial Intelligence (AI). Developers? Obsolete. Fundamentals like OWASP or Non-Functional Requirements (NFRs)? Outdated. Data protection, accessibility, performance, security, SEO, compliance? Oh, who needs those when we have the genius of AI to handle it all?
\nWhy should we burden our up-and-coming talent with the basics of software development? Instead, let’s offer them crash courses in “AI Operation for Dummies.” After all, AI can do it all, right? And if it doesn’t… well, tough luck. The algorithms will get better eventually — or so we hope.
\nBut wait — what happens when these “AI operators” don’t understand the implications of what they’re deploying? Will they even know how to spot the cracks forming in the digital foundation, or will they simply shrug and reboot their favorite AI tool?
\nWho can’t wait to see AI-generated software in production? Certainly not the security officers, who are already looking forward to the upcoming data leaks and hacks. But hey, a little thrill has never hurt anyone, right?
\nWhat about the subtle bugs — those that erode trust over time? Or the misunderstood context in a decision-making process? How about that time AI “accidentally” decided certain users didn’t deserve access to a feature due to bias in its training data?
\nWhy still use humans for software validation when AI can do it much faster? And if some sensitive information leaks in the process — so what? Transparency is the buzzword of the hour. Except, transparency only works if someone understands what’s being made transparent.
\nLet’s talk about gatekeeping. Where do we build in control mechanisms? Do we rely on AI engineers — those same individuals who are incentivized to push technology boundaries — to also understand the human, ethical, and regulatory impacts? Or do we need a new breed of professionals entirely?
\n“Human people that understand real risks and issues” may sound redundant, but isn’t this exactly the point? Engineers are brilliant at building things, but are they the best at breaking them to understand the risks?
\nWhen does AI become dangerous? Not in the dramatic “take over the world” way, but in the more insidious, slow-destruction way: eroding privacy, embedding societal bias, amplifying inequalities, and creating dependency.
\nWho sets the boundaries? Engineers focused on innovation might not fully appreciate the risks — does the world need more “technological ethicists” or “AI moderators” who understand the human consequences of technology?
\nIsn’t it time for engineers, regulators, and yes, even philosophers, to collaborate on keeping AI in check? Or are we simply handing over the keys and hoping for the best?
\nAI can handle everything, right? Data breaches, accessibility problems, performance hits, and security gaps — it’s got this! And if not? Well, who cares about the fallout when we’re all busy being mesmerized by the shiny new tech?
\nExcept, here’s the rub: AI is only as good as the data it’s fed, the biases it learns, and the oversight it lacks.
\nWhat happens when:
\nWithout a human safety net, these problems compound into systems that not only fail but fail spectacularly and at scale.
\nSo, let’s all jump on the AI bandwagon! But be careful: Don’t get run over by the wheels. As the saying goes, “He who laughs last, laughs best.”
\nAI is incredible, transformative, and undeniably useful. But blind trust in technology leads to predictable disasters. Where’s the balance? Who is responsible for ensuring the tools we trust are also trustworthy?
\nIt’s time to ask the hard questions:
\nStay critical. Question the hype. Remember: not everything that glitters is gold. Sometimes, it’s just fool’s gold wrapped in an algorithm.
\nWhat do you think? Who should hold the reins in this AI-driven future? Engineers, philosophers, or someone else entirely?
\n", "date_published": "2024-12-22T00:00:00Z" } , { "id": "https://b.polente.de/blog/EmbracingTheFreedomOfCustomExperiencePipelines/", "url": "https://b.polente.de/blog/EmbracingTheFreedomOfCustomExperiencePipelines/", "title": "Escaping the Golden Cage of Design Systems", "content_html": "![\"\"](\"https://b.polente.de/img/f-90JMegcq-360.png\")
In his article, The Broken Promises of Design Systems; Why Following the Rules Won’t Get You to Great Products, Itai Vonshak, VP of Design at Google, reveals the hard truth about design systems. Having spent years leading the Material Design team, Vonshak argues that despite their promise of efficiency and consistency, design systems have become rigid frameworks that stifle creativity and innovation.
\nI couldn’t agree more with Vonshak's critique. Design systems, like Material UI, indeed lock designers and developers into a pre-defined box. They may offer convenience and structure, but it’s a convenience that comes at a cost. Once you adopt these systems, you’re trapped in their ecosystem, forced to follow their updates and adapt to their changes — a golden cage, if you will. It reminds me of the dilemma faced by users who want to switch hardware but find themselves stuck with software features they cannot easily leave behind.
\nIn my approach, I steer clear of ready-made components. Instead, I work with clients to build continuous experience pipelines — flexible, tailor-made systems designed specifically for their needs and branding (CI). These pipelines go beyond the boundaries of traditional design systems, offering a dynamic foundation that evolves with the business. We create modular components that are small and adaptable, allowing teams to innovate, reinvent, and reshape experiences freely.
\nUnlike rigid design systems, our continuous experience pipelines allow clients to redraw and layer their components effortlessly. This adaptability ensures that teams are not bound by limitations and can stay ahead, even as trends and technologies change.
\nSo while I recognize the allure of design systems, I also see their limitations. If your goal is to create truly innovative and adaptable digital products, the key is to build solutions that are not only consistent but also dynamic and responsive to change.
\nCheck my previous thoughts on experience pipelines for a deeper dive into building an effective experience pipeline.
\n", "date_published": "2024-10-11T00:00:00Z" } , { "id": "https://b.polente.de/blog/BridgingtheGapNavigatingAI/", "url": "https://b.polente.de/blog/BridgingtheGapNavigatingAI/", "title": "AI, Digital Transformation, and the Future of Experience Engineering", "content_html": "Over my 30-year career as a leading Director and Experience Engineering Specialist at Publicis Sapient, I've witnessed countless technological shifts. My passion lies in creating high-performing, accessible webpages — ensuring that non-functional requirements aren't just met but exceeded. As AI continues to permeate our industry, I find myself contemplating its impact on our work and how we can harness it without losing the human touch that makes technology truly resonate.
\n![\"\"](\"https://b.polente.de/img/Hcs1M3EAtO-360.png\")
This post explores how AI tools can streamline development while highlighting the importance of human oversight. It discusses potential risks like overreliance on proprietary tools, lack of specialist input, and limitations in AI’s current capabilities. The article emphasizes that human expertise is critical for ensuring accessibility, performance, and compliance, particularly in highly regulated industries. Overall, it promotes a balanced approach to AI integration while preserving human creativity and judgment and opportunities for people in technology.
\nWhile all companys heavily invest in AI, I've observed potential dangers in how it's being integrated:
\nStartups and tech companies are increasingly developing AI tools aimed at automating coding tasks to reduce costs and accelerate development. While these proprietary tools can be cost-effective, they often lack the nuanced understanding of specific industries or client-specific needs. This overreliance on generic AI solutions can lead to several issues:
\nSecurity vulnerabilities are another concern. AI tools might not follow best practices for secure coding, making the applications susceptible to attacks. Issues like improper input validation, insecure authentication mechanisms, or flawed encryption implementations could be overlooked by AI but would be caught by experienced developers.
\nAdditionally, these tools may not keep pace with rapidly evolving technologies. As programming languages and frameworks update, proprietary AI tools may lag, leading to technical debt. This hinders innovation, as the codebase becomes outdated and more difficult to maintain or upgrade.
\nIn essence, while proprietary AI tools offer enticing benefits, an overreliance on them without sufficient human oversight and industry-specific knowledge can compromise the quality, security, and effectiveness of the software solutions provided to clients.
\nDigital business transformation is not just about adopting new technologies; it requires specialists who deeply understand both the technological landscape and the client's unique business context. Without specialist input, organizations risk implementing solutions that are misaligned with strategic objectives, fail to meet regulatory compliance, or lack scalability.
\nSpecialists bring critical insights into industry best practices, emerging trends, and user experience design, ensuring that the transformation delivers real value and competitive advantage. They understand the subtleties of the client's industry, including customer expectations, competitive pressures, and regulatory environments.
\nFor example, in highly regulated industries like finance or healthcare, specialists are essential to navigate complex compliance requirements. They ensure that data handling meets legal standards, that security protocols are robust, and that reporting mechanisms are in place.
\nMoreover, specialists can tailor solutions to enhance user experience by understanding the end-users' needs and behaviors. They can make informed decisions on interface design, accessibility features, and performance optimizations that generic AI tools might overlook.
\nThey also play a crucial role in future-proofing the technology stack, selecting scalable and flexible architectures that can adapt to changing business needs or technological advancements. Without their input, organizations might adopt solutions that become obsolete within a few years, leading to additional costs and disruptions.
\nIn summary, the lack of specialist input can result in missed opportunities, inefficiencies, and increased risks. Specialists ensure that digital transformation efforts are strategically aligned, technically sound, and deliver sustainable value.
\nDespite significant advancements in AI and automation, much of our code remains hand-written, and setups are manually configured. This is due to the highly customized and diverse requirements of each client and application, which automated tools cannot fully accommodate.
\nManual coding allows developers to tailor solutions precisely to client needs, implementing custom features and functionalities that differentiate the client's offerings in the market. It also enables them to optimize performance, ensuring that applications run efficiently under specific conditions or workloads.
\nMoreover, manual processes are essential for ensuring security and compliance standards are met. Developers can implement security measures that are specifically designed to protect against known vulnerabilities within the context of the client's industry. They can also ensure that the code adheres to regulatory requirements, such as accessibility standards (e.g., WCAG), data protection laws, and industry-specific regulations.
\nAdditionally, manual coding enables flexibility and adaptability. Developers can quickly adjust to changing requirements, unexpected challenges, or new insights gained during the development process. This agility is crucial in today's fast-paced technology environment, where the ability to innovate and respond to market changes can be a significant competitive advantage.
\nFurthermore, manual processes facilitate better code quality through practices like code reviews, pair programming, and thorough testing. These practices help catch errors, improve maintainability, and enhance overall software quality, which automated tools alone might not achieve.
\nIn conclusion, while AI and automation offer valuable support, manual processes remain critical for delivering customized, secure, and high-quality software solutions that meet the unique needs of each client.
\nI've embraced Generative AI in several aspects of my work:
\nExisting AI-assisted coding tools like GitHub Copilot or our internal ones require developers to craft specific prompts for each individual task, which can reduce overall efficiency. This necessity for constant prompt customization can interrupt the natural workflow, as developers must shift their focus from coding to formulating the right prompts. In complex projects with unique requirements, this can be particularly cumbersome, as generic prompts often yield inadequate or irrelevant suggestions. The time spent tweaking prompts to achieve the desired output may negate the efficiency gains these tools promise. Additionally, the cognitive load of continually generating precise prompts can lead to fatigue, making these tools less appealing for daily use in intricate development environments.
\nCurrent AI tools haven't yet revolutionized day-to-day work in the same transformative way that intelligent code editors did with features like dependency tracking and property insights. While AI offers helpful suggestions and can automate certain repetitive tasks, it hasn't provided a leap in productivity or capability that fundamentally changes how developers work. The enhancements are incremental rather than groundbreaking, lacking the "mind-blowing" impact that shifts paradigms in software development. Developers are still waiting for AI solutions that can understand context deeply, anticipate needs, and offer innovative solutions—tools that could, for instance, refactor code intelligently or optimize algorithms without explicit instructions. Until such advancements are realized, AI will remain a supplementary aid rather than a transformative force in coding.
\nDevelopers focused on their daily tasks may find it challenging to integrate AI tools effectively, as they're often under pressure to deliver features promptly. This focus on immediate requirements can make them hesitant to adopt new technologies that require time to learn and may initially disrupt their established workflows. There's also a natural skepticism toward unproven tools — developers might question the reliability of AI-generated code or worry about potential security implications. Moreover, the learning curve associated with new AI tools can be a deterrent when project deadlines are tight. Organizational culture plays a role too; without encouragement and support from leadership to experiment and innovate, developers may stick to familiar methods that guarantee timely delivery.
\nAs AI-generated content becomes more prevalent, human oversight remains crucial:
\nAuto-generated alternative texts provided by AI tools are often insufficient, lacking the depth and context necessary to make content truly accessible. While AI can generate basic descriptions, these are frequently too generic or miss critical nuances, leading to a subpar experience for users who rely on screen readers or other assistive technologies. For example, an AI might label an image simply as "dog," without conveying that it's a guide dog assisting a person with visual impairments, which is vital contextual information. Manual review and editing are essential to ensure that alt texts accurately and effectively describe content, thereby maintaining inclusivity and adhering to standards like the Web Content Accessibility Guidelines (WCAG). As accessibility advocates point out, relying solely on AI can inadvertently widen the accessibility gap, making human oversight indispensable.
\nExcessive or unoptimized code generation by AI can significantly hinder application performance, especially for users with limited connectivity or low-end devices. AI tools might generate code that is functional but not optimized for speed or resource efficiency, leading to longer load times and a sluggish user experience. This is a critical concern in a world where users expect fast, responsive applications and where network conditions vary widely. Developers need to manually assess and refactor AI-generated code to eliminate redundancies, optimize algorithms, and reduce file sizes. Techniques such as minification, code splitting, and leveraging tools like PostCSS for processing stylesheets are still necessary to enhance performance. Human intervention ensures that applications are accessible to a broader audience by performing well even under constrained conditions.
\nWith the rise of legal regulations focusing on digital accessibility and usability, such as the Americans with Disabilities Act (ADA) and the European Accessibility Act, it's imperative that AI-generated content meets these standards. Relying solely on AI for content creation can result in non-compliance due to oversights that machines might not catch. For instance, AI might not adequately address color contrast requirements, keyboard navigation, or proper labeling of form elements — all crucial for accessibility compliance. Non-compliance can lead to legal repercussions, financial penalties, and damage to a company's reputation. Therefore, organizations must invest in human expertise to review and adjust AI outputs, ensuring that all regulatory requirements are met and that the content is accessible to everyone.
\nWhile automated testing tools and AI-driven QA processes can handle routine checks and identify obvious bugs, they fall short in areas requiring human judgment and intuition. Non-functional requirements — such as usability, user experience, and emotional resonance — are difficult to quantify and test automatically. Human QA professionals can explore the application from the user's perspective, uncovering issues related to navigation flow, content clarity, and overall satisfaction that automated tests might miss. Moreover, they can assess how well the application aligns with the client's brand values and user expectations. This human touch is crucial to ensure that the final product is not only functionally correct but also delivers a high-quality experience that meets or exceeds user needs and business goals.
\nImplementing AI responsibly means guiding clients through digital transformation by integrating AI tools that genuinely align with their business needs. This involves a thorough analysis of the client's objectives, challenges, and existing infrastructure to select or customize AI solutions that add real value. Responsible implementation considers not just the immediate benefits but also the long-term implications, including data privacy, security, and ethical considerations. It requires collaboration between AI specialists and industry experts to ensure that the technology enhances operational efficiency without compromising on quality or integrity. By focusing on responsible AI adoption, we help clients navigate the complexities of modern technology while safeguarding their reputation and fostering trust with their customers.
\nMaintaining a human-centric design approach is crucial in an era increasingly dominated by AI-generated solutions. This means ensuring that creativity, empathy, and collaborative brainstorming with clients remain at the forefront of the development process. Rather than relying solely on AI-generated ideas, we prioritize human insights to capture the nuances of user experience that machines might overlook. This approach fosters innovation by combining the strengths of AI — such as data analysis and pattern recognition — with human abilities like critical thinking and emotional intelligence. By keeping the focus on people, we design products and services that are not only technologically advanced but also intuitive, accessible, and deeply resonant with end-users.
\nProviding governance and oversight is essential to prevent AI from reducing inclusivity and to ensure that tools consider visual, auditory, and textual elements collectively. This involves establishing clear policies and guidelines for AI development and deployment, focusing on inclusivity and accessibility from the outset. Governance structures help monitor AI outputs for biases or gaps that could exclude or disadvantage certain user groups. Oversight ensures that AI tools are designed to accommodate diverse needs, such as supporting screen readers for the visually impaired, offering captions for auditory content, and ensuring that textual information is clear and comprehensible. By proactively managing these aspects, we create technology solutions that are equitable and accessible, upholding ethical standards and complying with legal regulations related to inclusivity.
\nIn the future, we'll engage in collaborative tool usage by working closely with clients using advanced AI tools to select the right technology stack — whether on-premise or in the cloud. This collaborative approach ensures that the solutions are tailored to the client's specific needs and business objectives. By prompting AI together, we can leverage the combined expertise of our team and the client's insights to make informed decisions about the technologies that will drive their digital transformation. This joint effort fosters a sense of ownership and alignment, making the implementation process more efficient and effective. It also helps in demystifying AI for clients, empowering them to actively participate in shaping their technological future. Through this partnership, we can navigate the complexities of modern tech landscapes, ensuring that the chosen solutions are scalable, secure, and adaptable to evolving needs.
\nEnsuring safety and scalability becomes paramount after AI generates the initial code. The real work begins with developers meticulously verifying that the code meets stringent standards for security, performance, accessibility, and maintainability. This involves conducting comprehensive code reviews to identify potential vulnerabilities or inefficiencies that AI might have overlooked. We must test the application's ability to handle increased loads, ensuring it can scale without compromising performance or user experience. Accessibility checks are crucial to guarantee that the application is usable by people with disabilities, adhering to legal regulations like the ADA or WCAG. By addressing these critical aspects, we transform AI-generated code into robust, reliable solutions that can stand the test of time and usage, ultimately delivering value that meets or exceeds client and user expectations.
\nAs applications evolve, human oversight in AI maintenance is essential to manage and extend AI-generated code without unnecessary bloat. We'll need strategies to optimize and refine the codebase, similar to how we use tools like minifiers or PostCSS today for performance enhancement. Developers will play a crucial role in reviewing AI outputs, identifying redundant or inefficient code, and refactoring where necessary to improve readability and maintainability. This ongoing maintenance ensures that the application remains efficient, secure, and adaptable to new requirements or technologies. Human expertise is vital for implementing best practices, adhering to coding standards, and integrating new features seamlessly. By actively managing the AI-generated code, also via AI, we prevent technical debt from accumulating and ensure that the application continues to meet high performance and quality standards over time.
\nThe ongoing demand for expertise will remain strong, as companies desperately need professionals who understand and can refine AI outputs to meet high standards. While AI can automate certain coding tasks, it lacks the ability to fully grasp complex business logic, user experience nuances, and the ethical considerations necessary for responsible technology deployment. Professionals with deep knowledge in software development, architecture, accessibility, and performance optimization are indispensable for interpreting AI-generated code and aligning it with real-world needs. They provide the critical thinking and creativity that machines cannot replicate, ensuring that technology solutions are innovative, user-friendly, and compliant with regulatory requirements. This sustained need for skilled experts highlights the importance of continuous learning and adaptation in the tech industry, affirming that human talent remains at the heart of successful digital transformation efforts.
\nAI is an incredible tool that, when used correctly, can enhance our work and drive innovation. Its ability to automate repetitive tasks, analyze vast amounts of data, and generate preliminary code can significantly accelerate development processes. By integrating AI responsibly, we can focus more on complex problem-solving and strategic planning, allowing AI to handle routine activities. This symbiotic relationship between AI and human effort can lead to more efficient workflows, innovative solutions, and a faster time-to-market for products and services.
\nHowever, it doesn't replace the need for human expertise — especially in areas like accessibility, performance, and user experience. AI lacks the nuanced understanding and empathy required to address the diverse needs of all users. For instance, auto-generated code or content might not meet accessibility standards, potentially excluding users with disabilities. Performance optimization often demands a level of creativity and context-awareness that AI has yet to master, such as anticipating user behavior under different network conditions or device capabilities. User experience design is inherently human-centric, relying on an understanding of human emotions, cultural nuances, and ethical considerations that AI cannot replicate. Therefore, specialists are essential to interpret AI outputs, make informed decisions, and ensure that the end products are inclusive, efficient, and resonate with users on a deeper level.
\nBy embracing AI while continuing to apply our specialized knowledge, we can ensure that technology serves everyone effectively. This means leveraging AI's strengths to enhance our capabilities without overlooking the critical importance of human judgment and creativity. Professionals can guide AI tools to align with specific business objectives, regulatory requirements, and ethical standards. Collaborative efforts between AI and humans can lead to more robust, scalable, and adaptable solutions. As we navigate the future of digital transformation, maintaining this balance will be key to delivering technology that is not only advanced but also accessible, user-friendly, and sustainable. Together, we can create a technological landscape where AI amplifies human potential, and human expertise ensures that technology remains aligned with the needs and values of society.
\n", "date_published": "2024-09-20T00:00:00Z" } , { "id": "https://b.polente.de/blog/PSSpeed/", "url": "https://b.polente.de/blog/PSSpeed/", "title": "Speed forever", "content_html": "In today's fast-paced digital world, transformation is not just an option—it's a necessity. At Publicis Sapient, we've embraced this imperative with our SPEED philosophy, guiding businesses to navigate and thrive in this dynamic landscape. Our approach integrates Strategy, Product, Experience, Engineering, and Data, creating a cohesive force that drives innovation and long-term success. The following song captures the essence of our philosophy, illustrating how these elements come together to unlock the limitless potential of digital transformation.
\n![\"\"](\"https://b.polente.de/img/llTZ-ykP-f-360.png\")
The lyrics generated to describe SPEED:
\n\n\nIn the world of digital, where change never slows,\nPublicis Sapient brings a SPEED that flows,\nStrategy’s the start, where visions take flight,\nGuiding the path through the darkest of night.\nWith a hypothesis tested, priorities made clear,\nThey pave the way forward, dissolving the fear.
\nSPEED’s the philosophy, the heart, and the core,\nTransforming businesses to be ready for more.\nStrategy, Product, Experience, and Data’s embrace,\nWith Engineering driving at a relentless pace.\nPublicis Sapient’s SPEED shows the way,\nTo lead in the digital world, where winners stay.
\nProducts evolve, at a rapid pace,\nBuilt to endure, not just for a race.\nExperience comes next, customer at the core,\nCreating value that keeps them wanting more.\nIn every touchpoint, in every interaction,\nSPEED fuels the journey to complete satisfaction.
\nSPEED’s the philosophy, the heart, and the core,\nTransforming businesses to be ready for more.\nStrategy, Product, Experience, and Data’s embrace,\nWith Engineering driving at a relentless pace.\nPublicis Sapient’s SPEED shows the way,\nTo lead in the digital world, where winners stay.
\nEngineering’s the promise that’s solid as steel,\nDelivering results with an unshakable zeal.\nAt pace and scale, they bring dreams to life,\nCutting through challenges, eliminating strife.\nTheir code is a craft, their solutions a blend,\nOf art and technology that knows no end.
\nSPEED’s the philosophy, the heart, and the core,\nTransforming businesses to be ready for more.\nStrategy, Product, Experience, and Data’s embrace,\nWith Engineering driving at a relentless pace.\nPublicis Sapient’s SPEED shows the way,\nTo lead in the digital world, where winners stay.
\nData, the gold that’s mined with care,\nInsights revealed from every digital layer.\nValidating paths, uncovering the way,\nGuiding decisions that shape the next day.\nIn every byte, in every stored file,\nSPEED uncovers truths that make it worthwhile.
\nSPEED’s the philosophy, the heart, and the core,\nTransforming businesses to be ready for more.\nStrategy, Product, Experience, and Data’s embrace,\nWith Engineering driving at a relentless pace.\nPublicis Sapient’s SPEED shows the way,\nTo lead in the digital world, where winners stay.
\nTogether these elements, when tightly aligned,\nCreate a force, the strongest you’ll find.\nSilos break down, collaboration thrives,\nIn this digital age, that’s how one survives.\nPublicis Sapient’s SPEED is the key,\nTo unlock the future, to set businesses free.
\n
![\"An](\"https://b.polente.de/img/cQ66K6-1KA-360.png\")
Once again, we see major companies like Google and OpenAI rolling out their latest offerings. Google introduces Pixie, a new assistant, and OpenAI follows with a brand new search engine. Excited? Perhaps not as much as one might expect.
\nGoogle's upcoming Pixel 9 smartphones are expected to introduce a new AI assistant named Pixie, powered by their Gemini large language model. Pixie aims to offer a more personalized experience compared to the current Google Assistant, leveraging data from various Google services like Maps and Gmail to perform complex and multimodal tasks. For example, Pixie could analyze a product in a photo and provide directions to the nearest store where it can be purchased.
\nThe Pixel 9 series, including the Pixel 9 and Pixel 9 Pro, is set to feature enhancements like Adaptive Touch to boost touch sensitivity, emphasizing user interaction and AI integration. These devices are expected to be smarter, utilizing advanced AI capabilities to differentiate from other Android devices, with Pixie being exclusive to Google's hardware.
\nOpenAI is reportedly preparing to launch its own AI-powered search engine, which is expected to be a significant competitor to Google's search engine. This new search engine from OpenAI is likely to be integrated with ChatGPT, providing a combination of generative AI capabilities and conventional web search functionalities. This integration is anticipated to allow the search engine to deliver AI-generated summaries alongside traditional search results, enhancing the overall user experience with more relevant and contextually informed responses.
\nThe user interface of OpenAI's search engine is expected to be adaptive, showing AI summaries and search results side by side on desktop platforms, while on mobile devices, these might appear sequentially. This approach could enhance accessibility and usability across different devices, providing a seamless experience whether on a phone or a computer.
\nIt's a familiar scenario: companies claim their smart assistants will simplify our lives. However, these gadgets often end up as expensive ornaments that seem more interested in our personal details than in genuinely assisting us.
\nAs OpenAI steps into the competitive arena with its new AI-driven search engine, skepticism arise about its true intent. Could this platform, armed with the power of ChatGPT, simply become another mechanism for data collection rather than a provider of unbiased search results? With its debut set to challenge established giants like Google, this initiative raises concerns about privacy and the potential for manipulative algorithms that prioritize profit over user benefit.
\nWhile the search engine promises enhanced user interactions through AI-generated content, it needs to be seen whether it will respect user privacy or follow the path of existing platforms that harvest user data. The tech community and consumers are watching closely. I may hope for a tool that prioritizes transparency and fairness in the age of information overload. But I may be wrong.
\nThese announcements are hardly surprising. Tech giants continuously churn out new products—not to better the world, but to line their pockets. Each new assistant and search engine seems to be another way to harvest and monetize our data.
\nAs we encounter a massive stream of new gadgets and search engines, it's important to reflect on their true necessity and impact. Is it time to champion technologies that not only keep the internet as an open platform but also ensure it remains a freely accessible resource, not a luxury marketplace?
\nWe must advocate for a digital future where the web continues to serve as a broad platform for innovation and knowledge-sharing, not just a data-mining field for profit. It's important to support technologies that respect user privacy and offer content freely, rather than transforming our digital spaces into high-cost environments. Not only, but also, as of sustainability reasons. We deserve a digital landscape that prioritizes our needs as users, not just as data sources. Let's demand a future that upholds the openness and accessibility of the internet for everyone.
\n![\"Teams](\"https://b.polente.de/img/-ba3WPDnMG-360.png\")
Implementing a robust Design System Manager (DSM) can streamline your design process, enhance collaboration, and ensure consistency across your products. Here we dive deep into various tools and strategies that can optimize your DSM experience, while not forgetting the often overlooked aspects.
\nFigma is not just another tool; it is a pivotal part of our DSM strategy due to its flexibility and comprehensive features.
\nDesign Tokens Example in Figma:\n- `--color-background: #ffffff;`\n- `--font-base: 'Roboto', sans-serif;`# Example command to convert tokens to CSS\nstyle-dictionary build --platform web/css// Example of a simple web component\ncustomElements.define(\n \"my-component\",\n class extends HTMLElement {\n connectedCallback() {\n this.innerHTML = `<p>Hello World!</p>`;\n }\n }\n);By embracing these practices and tools, you can create a more robust, flexible, and cohesive DSM. Remember, a successful design system is about more than just tools; it’s about creating a culture of continuous improvement and collaboration.
\n", "date_published": "2024-04-19T00:00:00Z" } , { "id": "https://b.polente.de/blog/StaticSiteGenerationWorksEnterpriseToo/", "url": "https://b.polente.de/blog/StaticSiteGenerationWorksEnterpriseToo/", "title": "Simplifying E-Commerce Architecture", "content_html": "This blog post examines how Static Site Generators and Island Architecture can simplify e-commerce web development. It highlights the drawbacks of heavy frameworks in enterprise environments and proposes a streamlined approach that enhances performance, reduces costs, and improves SEO. While this overview provides a condensed perspective, a deeper dive into the subject will reveal more intricate details and benefits.
\nPlease note this is a summarized view and for a complete understanding, a more thorough exploration of the topic is recommended.
\nWeb development has often relied on frameworks like React, Angular, Svelte or Vue for their initial simplicity. But, with over 20 years as an architect, I've seen these can become complex in business settings, leading to technical debt and hard-to-maintain projects. This post suggests simpler methods for building e-commerce sites, using Static Site Generators (SSG) and Island Architecture.
\nUsing heavy frameworks like React, Angular, or Vue can lead to challenges in the long term. In real-world scenarios, businesses often encounter issues when the application grows too complex. For example, an e-commerce company might start with a simple React application, but as their product line expands, they face slowdowns due to the extensive re-rendering required for dynamic content. Another issue is the steep learning curve for new developers. A tech firm once reported significant delays because new hires took longer to contribute effectively, having to understand the intricacies of Angular's change detection mechanisms. Furthermore, reliance on extensive client-side rendering can lead to SEO penalties, as experienced by a travel agency whose Angular app wasn't fully indexed by search engines. These examples show that while such frameworks are powerful, they can complicate maintenance, scalability, and performance without careful consideration.
\nThe diagram shows the flow from an e-commerce page through JAMstack Architecture to functions like pricing and checkout.
\n![\"A](\"https://b.polente.de/img/-yPc78StCu-360.png\")
In e-commerce, not all platforms need dynamic applications. Many business sites have content that rarely changes. Using Static Site Generators like Netlify or Vercel can rebuild pages when needed, easing server load and boosting performance.
\nConsider that a JAMStack Architecture is mature and great, but also SPA driven Tooling with VUE or React offer options.
\nStatic Site Rendering (SSR) using modern frameworks like Nuxt.js (for Vue.js) or Next.js (for React) takes the capabilities of traditional Static Site Generators further. These tools offer a hybrid approach, allowing pages to be pre-rendered during build time, which optimizes loading times and SEO performance. This is particularly useful for e-commerce sites where quick, accessible content is crucial for user engagement. Nuxt and Next handle both static and dynamic content, serving pre-rendered pages from the server initially, then hydrating these pages on the client-side to add interactive elements. This approach, combined with JAMstack architecture, ensures high performance, scalability, and a seamless user experience across all parts of the e-commerce platform, from browsing products to checking out, just in some cases without full blown hydration.
\nTo visually demonstrate the concept of Island Architecture in e-commerce, this flowchart delineates how an E-Commerce Page can be efficiently structured. It guides through the JAMStack Architecture down to discrete, independently functioning 'islands' such as price fetching and checkout processes, illustrating a streamlined workflow for enhanced performance and user experience.
\n![\"A](\"https://b.polente.de/img/KGwpYjnSBB-360.png\")
Island Architecture is a modern web development approach that facilitates the creation of web pages with both static and dynamic content. This method segments dynamic features, such as image carousels on e-commerce product pages or interactive filters on bank account pages, into small, independent "islands" that only load where needed. This lean approach reduces the volume of JavaScript, as only the interactive components require hydration, leading to improved performance and SEO. However, it's still an emerging concept with limited framework support and might not suit pages needing extensive interactivity. For an in-depth understanding and examples, please visit the detailed article on Patterns.dev.
\nThis is not exclusive to JAMstack approaches, and also other SSR generated applications can follow this approach.
\nThe transition towards a simplified architectural framework for web development introduces a myriad of benefits, enhancing not only the technical performance but also the overall digital experience. This list encapsulates the core advantages, ranging from reduced complexity for easier maintenance to improved scalability, showcasing how streamlined processes contribute to a more efficient, accessible, and secure online presence.
\nTo dig deeper into the practical application of Island Architecture with Static Site Generators, consider the real-life scenario of an e-commerce platform transitioning to this model. By implementing islands for dynamic content such as shopping carts and personalized recommendations, the site significantly improved its load times and user experience. For example, a popular online bookstore was able to reduce its bounce rate by implementing lazy-loaded islands for customer reviews and related book recommendations, ensuring that these elements only loaded when needed, thereby keeping the initial page load fast. This approach not only streamlined their web presence but also enhanced customer satisfaction and engagement without the need for a complex, resource-intensive framework.
\nFor more real-world examples beyond Astro, you might consider looking into sites built with 11ty (Eleventy), which is praised for its simplicity and flexibility, allowing developers to create fast and efficient static sites. Another example includes projects leveraging Hugo or Gatsby, where developers have documented significant improvements in performance, SEO, and development efficiency. These platforms showcase the practical application of static site generation and Island Architecture in various industries, demonstrating the benefits of these approaches in creating scalable, high-performing websites.
\nSimplifying web architecture isn't just about reducing complexity; it's about making sites sustainable, efficient, and friendly for users. Using Static Site Generators and Island Architecture leads to simpler and more cost-effective web development. This post encourages more exploration and use of these methods, for a web that values simplicity and maintainability.
\nThis is the start of a broader discussion on better web development practices.
\n", "date_published": "2024-02-21T00:00:00Z" } , { "id": "https://b.polente.de/blog/CraftinganEffectiveExperiencePipeline/", "url": "https://b.polente.de/blog/CraftinganEffectiveExperiencePipeline/", "title": "Crafting an Effective Experience Pipeline - Insights and Strategies", "content_html": "![\"Illustration](\"https://b.polente.de/img/SpsECfatHH-360.png\")
In today's digital landscape, creating a seamless and impactful user experience is paramount. An experience pipeline serves as the backbone for this, integrating design, development, and deployment processes cohesively. This blog post draws insights from various expert sources, including Samrawit Yoseph's detailed exploration of leveraging design systems for multi-tenant growth, to outline the essential workflow and considerations for an effective experience pipeline.
\nAn experience pipeline is a structured approach that ensures consistent, high-quality user experiences across all digital platforms. It emphasizes the integration of design systems, like the WATTS system discussed by Yoseph, to streamline design and development processes.
\nThe success of an experience pipeline hinges on seamless collaboration between designers and developers. Establish a common language and source of truth for UI assets and code to ensure consistency. Encourage open communication, regular feedback, and shared responsibility for the project's success.
\nImplementing an experience pipeline is not without its challenges. Balancing brand identity with consistency, ensuring efficient collaboration among diverse teams, and maintaining a focus on performance and accessibility are common hurdles. Solutions include clear communication, robust design systems, and ongoing testing and feedback loops.
\nPublicis Sapient's SPEED philosophy emphasizes Strategy, Product, Experience, Engineering, and Data to navigate digital business transformation successfully. This approach is not just about moving fast but ensuring that every step taken is aligned with strategic goals, driven by user experience, and supported by robust engineering and insightful data analysis. SPEED enables organizations to quickly adapt to market changes, innovate continuously, and stay ahead of competition by making informed, agile decisions. It underscores the importance of moving swiftly but thoughtfully, ensuring that every product launched and experience crafted delivers real value to users and sustains business growth.
\nDeveloping an effective experience pipeline requires careful planning, collaboration, and a commitment to user experience excellence. By considering the insights and strategies outlined, organizations can build a pipeline that supports dynamic growth and meets the high expectations of today's digital users.
\n", "date_published": "2024-02-21T00:00:00Z" } , { "id": "https://b.polente.de/blog/CraftingAnAIDrivenCulinaryAdventure/", "url": "https://b.polente.de/blog/CraftingAnAIDrivenCulinaryAdventure/", "title": "Crafting an AI-driven culinary adventure", "content_html": "Welcome to a peek behind the curtain of AI Chefs at Polente, where the fusion of culinary arts and artificial intelligence creates a unique digital experience. As a director of experience engineering with over two decades in the field, I've always been fascinated by the potential of technology to enhance our daily lives. AI Chefs at Polente is a testament to this vision, combining my passion for cooking with the cutting-edge capabilities of ai.
\nThe idea for AI Chefs at Polente sprang from a simple yet profound realization: cooking is an art that brings people together, and technology can amplify this experience. In a world where digital interactions are increasingly commonplace, I envisioned a platform that not only shared recipes but also adapted and evolved, much like the culinary tastes and trends it catered to. But also showcasing that content creation is possible with only AI and without humans helping out.
\n![\"a](\"https://b.polente.de/img/oBkP7eXNnI-360.png\")
At its core, AI Chefs at Polente is powered by AI, but it's seasoned with the human touch. The journey began with identifying the right technologies that could understand and anticipate the needs and preferences of home chefs and food enthusiasts. From selecting an AI framework to designing an intuitive user interface, every step was meticulously planned and executed.
\nMy setup involves a php backend, which I've chosen for its ease of automation with cronjobs on my webspace. However, for the sake of clearer understanding in this context, I've converted the examples to JavaScript.
\nIn this setup, I utilize gpt-3.5-turbo to fetch data, functioning as described below.
Async function fetchopenairesponse(messages) {\n const response = await fetch(\n \"https://api.openai.com/v1/chat/completions\",\n {\n method: \"post\",\n headers: {\n \"content-type\": \"application/json\",\n \"authorization\": \"Bearer your_open_ai_key\",\n },\n body: JSON.stringify({\n messages: messages,\n max_tokens: 500,\n model: \"gpt-3.5-turbo\"\n temperature: 0.7\n }),\n }\n );\n\n const data = await JSON.parse(response);\n\n if (data.error) {\n throw new Error(`http error! status: ${data.message}`);\n }\n\n return data.choices[0].message.content;\n}The messages within the system are structured in a specific format, enabling the incorporation of essential system information seamlessly.
Const messages = [\n [\n 'role': 'system',\n 'content': 'set the stage as a food blogger'\n ],\n [\n 'role': 'user',\n 'content': 'requesting the recipe'\n ]\n]With this approach, I specifically request GPT to generate responses in JSON format. Initially, my plan was to have GPT create the entire markdown content for the jamstack blog, which is built using 11ty. However, I encountered issues with reliability and testing challenges. To address this, I shifted to using JSON format, which proved to be simpler to test. If there's an issue, I can easily discard the output and start again. Presently, this restart is needed in about 1 out of 10 cases. The JSON format is structured as follows.
{\n \"chef\": \"\",\n \"intro\": \"\",\n \"outro\": \"\",\n \"slug\": \"\",\n \"title\": \"\",\n \"ingredients\": \"as markdown\",\n \"instructions\": \"as markdown\",\n \"tags\": [],\n \"description\": \"\"\n}After crafting the JSON structure, the next step in my process involves interacting with GPT once more. This time, the goal is to generate a creative prompt for an image. This prompt is designed to align perfectly with the recipe's ingredients and description. It's a fascinating blend of AI's understanding of food and its capability to visualize it.
Once GPT provides the image prompt, I then employ a method similar to the one below to request an image from DALL·E 3. This approach allows for the creation of unique, ai-generated images that visually represent the essence of each recipe. It's not just about listing ingredients and methods; it's about bringing each dish to life visually, making the cooking experience more engaging and inspiring.
Async function fetchdalleimage(prompt) {\n const response = await fetch(\"https://api.openai.com/v1/images/generations\", {\n method: \"post\",\n headers: {\n \"content-type\": \"application/json\",\n \"authorization\": \"Bearer your_open_ai_key\",\n },\n body: JSON.stringify({\n prompt: prompt,\n max_tokens: 60,\n model: \"dall-e-3\",\n n: 1,\n size: \"1792x1024\",\n quality: \"standard\",\n }),\n });\n\n const data = await JSON.parse(response);\n\n if (data.error) {\n throw new Error(`http error! status: ${data.message}`);\n }\n\n return data.data[0];\n}Before finalizing the content, I perform a series of tests on both the url and the revised prompt. This step is crucial to ensure their validity. It's all about maintaining the quality and reliability of the information being processed.
\nOnce I've confirmed that the data is accurate and usable, I proceed to save it on my webserver. This is a vital step in preserving the integrity and accessibility of the content.
\nWith all the essential data and paths in place, I then generate a markdown file. This file, bearing the same name as its corresponding image, is meticulously stored on the server. This methodical approach not only aids in organization but also ensures a smooth retrieval process for displaying the content on the website.
\n---\ntitle: \"\"\ndescription: \"\"\ntags: []\nfigureRecipe:\n caption: \"\"\n imageSrc: \"\"\n imageTitle: \"\"\n imageAlt: \"\"\n loading: \"eager\"\n---\n\n## Introduction\n\nIntro\n\n## Ingredients\n\nIngredients markdown\n\n## Instructions\n\nInstructions markdown\n\nOutro\n\nNameThe creation and refinement of these recipes and their accompanying ai-generated imagery is just the beginning. To bring this project to life, I rely on a well-structured git repository. Each piece of content, once perfected, is committed and pushed to github. You can explore the repository at github.com/polent/recipe.
\nThe magic happens when I push these updates. Each push activates a build script through a github action, which then deploys the new content to the server. This process isn't just manual; it's augmented with automation. A cronjob is set up to trigger these updates randomly, ensuring that the blog is constantly refreshed with new recipes. At present, this means about 4-5 new culinary creations are shared each day.
\nThis project is more than just a collection of recipes. It's a testament to the harmonious blend of culinary passion and technological innovation. Through this journey, I aim to not just share dishes but to inspire creativity and showcase the endless possibilities of AI in enhancing our daily experiences.
\nStay tuned for more flavors, more innovation, and more culinary adventures at AI Chefs at Polente!
\n![\"a](\"https://b.polente.de/img/ffW_Ov30U6-360.png\")
Staying true to my roots in user-centric web design, the development of recipe.polente.de was guided by principles of accessibility and usability. The aim was to create a platform that was not only smart but also easy and enjoyable to use, regardless of one's culinary skill level.
\nThis journey has revealed a significant shift in the landscape of creative work. With AI's growing capabilities, particularly in content creation, I've observed that certain roles traditionally essential in content generation are evolving. In the near future, some of these jobs might become less needed, as AI continues to automate and enhance creative processes. This case study of AI Chefs at Polente underscores the potential for AI to transform how we approach and manage creative tasks, pointing towards a future where technology and human creativity collaborate more closely than ever.
\n", "date_published": "2024-01-25T00:00:00Z" } , { "id": "https://b.polente.de/blog/AiAndAccessibility/", "url": "https://b.polente.de/blog/AiAndAccessibility/", "title": "How AI is Changing Accessibility in the Workplace", "content_html": "In our digital world, making websites and apps easy to use for everyone is crucial. This is what we mean by 'accessibility'. It's about designing our digital tools so that all people, including those with different abilities, can use them easily.
\n![\"This](\"https://b.polente.de/img/U7WR25x907-360.png\")
Accessibility is very important. It's not just about following rules. It's about making sure everyone has the same chance to use digital platforms, like websites and apps. This means people with disabilities can also gain knowledge, work, and connect with others online.
\nArtificial Intelligence (AI) is helping us a lot in this area. It's making it easier to check if our digital tools are accessible and is improving how they work for people with disabilities. AI can do things like predict what users need and learn over time to get better at helping us.
\nNext, we'll talk about the current state of accessibility, how AI is helping to test and improve it, and what we might see in the future.
\nRight now, making our digital tools accessible is a big challenge. Many people don't know enough about it or don't think it's a priority. This means that some websites and apps are hard for people with disabilities to use.
\nFor example, a website might not work well with a screen reader, which is a tool that reads out the text for people who can't see the screen. Or, it might be hard to navigate a site if you can't use a mouse.
\nFollowing guidelines from groups like the World Wide Web Consortium (W3C) is really important. They tell us how to make websites that everyone can use.
\nAI is changing the way we check if digital tools are accessible. It's faster and more accurate than doing it by hand. AI can look through a website and spot problems, like if there's not enough contrast between the text and the background.
\nThere are AI tools that help find these problems and fix them. This means we can make websites and apps that are easier for everyone to use.
\nSome companies are already using AI to do this. For example, Microsoft and Google have projects that use AI to make the web more accessible.
\nAI is also helping us every day to make digital tools more accessible. It can do things like change how a website looks based on what a user needs. This could be making the text bigger or changing colors so it's easier to read.
\nAI is helping to create content that is easy to understand for everyone. It can suggest ways to write or design things better.
\nThere are also design tools that use AI to make sure new websites and apps are accessible from the start. This is really helpful for keeping up with the latest guidelines.
\nLooking ahead, AI could do even more for accessibility. It might be able to change digital tools to fit each person's needs. This would make the web a place where everyone can participate equally.
\nBut we have to keep improving AI tools and use them in the right way. This is important for making sure they help everyone and don't leave anyone out.
\nAI could help us create a digital world that is truly open to everyone. This is an exciting future to think about!
\n![\"This](\"https://b.polente.de/img/ZAhqzbF2Lt-360.png\")
We've talked about how AI is helping with digital accessibility. It's making it easier to check and improve websites and apps so that everyone can use them. As technology keeps changing, we should use AI to make sure our digital world is open to all.
\nI encourage everyone, whether you're making websites, leading a business, or just using digital tools, to think about how AI can help with accessibility. By using AI, we can work together to create a digital space that is welcoming and useful for everyone.
\nI invite you all to share your thoughts and experiences about AI and accessibility. Tell us how it's making a difference in your work or life.
\nAlso, try out some AI tools that can help make your workplace more accessible. There are many tools out there that can make a big difference. Let's use AI to break down barriers and build a digital world that is accessible to everyone. Join in and be part of making a better future!
\n", "date_published": "2024-01-09T00:00:00Z" } , { "id": "https://b.polente.de/blog/FullStackVSFullLifecycleEngineering/", "url": "https://b.polente.de/blog/FullStackVSFullLifecycleEngineering/", "title": "Full Stack vs. Full Lifecycle Engineering", "content_html": "Tech changes a lot, and just knowing a bit of everything in coding isn't enough now. Full Lifecycle Engineering, which goes deeper into specific topics, makes sure projects are high quality and successful, even if they're complicated.
\nWeb development is always changing. There's a big difference now between being good at a little bit of everything (Full Stack) and knowing a lot about specific parts of a project (Full Lifecycle Engineering). Full Stack Engineers are handy, but they might not know enough about specific things like making websites run well or show up in Google searches. Full Lifecycle Engineers, however, really focus on these details.
\n![\"A](\"https://b.polente.de/img/ub2_RUvk66-360.png\")
![\"A](\"https://b.polente.de/img/yIt0FzVhBl-360.png\")
The debate between Full Stack and Full Lifecycle Engineering shows how the tech world is moving towards needing more specialized knowledge for complicated tech. Full Stack Engineers are adaptable, but the depth and skills of Full Lifecycle Engineers are crucial for complex, lasting projects. To avoid average results that come from knowing a little about a lot, use experts in your projects for the best results.
\nImage Source: DALL·E 3
\n", "date_published": "2024-01-05T00:00:00Z" } , { "id": "https://b.polente.de/blog/FromDotComToAI/", "url": "https://b.polente.de/blog/FromDotComToAI/", "title": "Navigating Bubbles: Lessons from Dot-Com to AI", "content_html": "![\"represents](\"https://b.polente.de/img/JvN7dL1kSx-360.png\")
In the ever-evolving landscape of technology, economic bubbles have periodically emerged, significantly impacting the way businesses operate and how innovations are perceived. From the explosive growth and subsequent collapse of the dot-com bubble in the late 1990s and early 2000s to the current wave of excitement surrounding Artificial Intelligence (AI), these bubbles have shaped the technological and business world.
\nNow, as a seasoned Director of Experience Engineering, I've witnessed these cycles firsthand. My journey began in the heart of the dot-com era, a period marked by a surge in internet-based businesses and unprecedented investments in new technology ventures. This was a time when the digital landscape was just beginning to unfold, offering endless possibilities and, as we later learned, considerable risks.
\nMy career took off in a typical dot-com agency/consulting role around the year 2000, a time marked by rapid innovation and value creation. During this era, I was part of a team that developed some of the earliest web pages for prominent companies like Nestle and Ticona, in collaboration with PopNet Communication. Our focus was not just on leveraging the latest technology but also on creating sustainable applications that would stand the test of time.
\nReflecting on this period provides valuable insights into the current enthusiasm surrounding AI. Today, as AI technology advances at an unprecedented pace, it's crucial to draw lessons from the past, understanding both the potential and the pitfalls of such rapid technological adoption.
\nIn this blog post, we'll explore the similarities and differences between the dot-com bubble and the current AI hype, my personal experiences during these transformative periods, and the lessons that can help us navigate the future of technology more responsibly.
\nIn the year 2000, the digital landscape was brimming with new possibilities. This was when I embarked on my journey in a dot-com agency/consulting firm. This period was not just about embracing new technologies; it was a time of significant value creation and rapid learning. The dot-com era, known for its rapid rise in internet-based businesses, was a fertile ground for innovation and pioneering digital strategies.
\nDuring this time, I had the opportunity to work on projects for major clients like Nestle and Ticona, in partnership with PopNet Communication. These projects weren't just about building websites; they were about crafting digital experiences. This was a time when websites were transitioning from being mere information portals to becoming essential tools for business engagement and customer interaction.
\nOur approach was anchored in using the latest technology not just for the sake of innovation but to create sustainable applications. The focus was on developing digital solutions that would stand the test of time. This approach proved to be invaluable, as the applications we developed continued to serve our clients well, even years after their inception. This experience highlighted the importance of foresight in technology - creating solutions that were not just trendy but had lasting value.
\nThis phase of my career was instrumental in shaping my understanding of the tech industry. It taught me the importance of balancing innovation with sustainability, a lesson that remains relevant in today's rapidly evolving AI landscape.
\nThe dot-com bubble, a significant event in the late 1990s and early 2000s, was characterized by a frenzied investment in internet-based companies. This era was marked by optimistic speculation about the potential of the internet, leading to inflated valuations of tech companies. Many investors believed that traditional business metrics were no longer applicable in the digital age, leading to a rush to invest in any company with a ".com" in its name. The NASDAQ Composite, heavily weighted with tech stocks, saw a dramatic rise, only to plummet when the bubble burst. This crash resulted in significant financial losses and the failure of many dot-com companies.
\nDuring this tumultuous period, the consulting firm I was part of adopted a strategy focused on creating real value for clients, rather than chasing short-term profits. This approach was crucial during the dot-com crash. While many companies, driven by profit motives and lacking in substantial client value, struggled or even ceased to exist, our firm was part of this. But our commitment to sustainable, value-driven solutions for our clients enabled them to maintain stability even as the market fluctuated wildly.
\nThe period following the burst of the dot-com bubble was a time of consolidation and reevaluation in the tech industry. Our company was bought out by BBDO, a global advertising and marketing company, and we became a part of the Interone world. This transition marked a new chapter, where we brought our expertise and experience in digital solutions to a larger, more diverse environment. Integrating into BBDO and Interone provided us with new opportunities to apply our skills and insights from the dot-com era to a broader range of projects and challenges.
\nThis journey through the rise and fall of the dot-com bubble and the subsequent transition to a larger conglomerate was a testament to the resilience and adaptability required in the ever-changing tech landscape. It highlighted the importance of focusing on real value creation in technology ventures, a lesson that is increasingly relevant in today's AI-driven market.
\nAs we move from the dot-com bubble to the present, we find ourselves in the midst of another technological surge: the AI boom. This era shares similarities with the dot-com era, such as the high level of excitement and investment in a novel technology. However, there are also stark differences that set the two apart.
\nLike the dot-com era, the AI boom is marked by a rush of investments and a general buzz around the technology's potential. Both periods are characterized by a belief in the transformative power of a new technology – first the internet, and now AI. However, unlike many dot-com companies that were often based on speculative business models, the current AI industry consuming companies are often also built on fragile applications and advancements. But: the AI sector benefits from the lessons learned from the dot-com crash, leading sometimes to more cautious investment and valuation strategies.
\nThe AI industry has witnessed significant investment, both from venture capitalists and established tech giants. This influx of capital has been driving the rapid development of AI technologies. Companies that are heavily involved in AI research and development, such as those working on machine learning, natural language processing, and robotics, have seen their stock prices rise. This increase reflects the market's confidence in the potential of AI to revolutionize various industries.
\nThe expectations surrounding AI are high, with predictions about its ability to transform industries such as healthcare, finance, transportation, and more. These expectations are not just about incremental improvements but about fundamental changes in how we interact with technology and how businesses operate. Unlike the dot-com era, where the internet was a platform for businesses, AI is seen as a tool that can enhance and even automate many business processes, leading to more efficient, intelligent, and personalized services.
\nThis transition to the AI era highlights the ongoing evolution of technology and its impact on business and society. While there are lessons to be learned from the past, the AI boom also presents unique challenges and opportunities that require a nuanced understanding of technology's role in our world today.
\nThe current AI market and the dot-com bubble of the late 1990s and early 2000s exhibit several key differences, which are crucial to understand for anyone looking to navigate the AI landscape effectively.
\nOne of the most significant differences between the dot-com era and today's AI market is the nature of the companies involved. During the dot-com bubble, many startups with unproven business models and little to no profits went public, driven by the hype around the internet. In contrast, the AI field is dominated by more established companies. Tech giants like Google, Microsoft, and Amazon, which have been investing in AI for years, are leading the charge. These companies not only have deep pockets but also vast datasets and sophisticated technology infrastructures that give them a significant advantage in developing AI technologies. This maturity and establishment in the market suggest a more stable environment compared to the volatile landscape of the dot-com era.
\nThese companies will be the winners. The Free Riders thinking that using a Chat Prompt solves their issues, will not.
\nAnother notable difference is in stock valuations. During the peak of the dot-com bubble, tech companies reached astronomically high valuations based on speculative growth projections. The forward price-to-earnings ratios of these companies were exceptionally high, indicating overvaluation. In contrast, AI companies today, particularly those that are part of larger, well-established tech firms, have more reasonable valuations. While there is excitement about the potential of AI, investors are generally more cautious and mindful of the lessons from the dot-com crash. This has led to more grounded valuations based on realistic assessments of the companies' potential earnings and growth.
\nInvestors today are more cautious and discerning when it comes to funding AI ventures. Unlike the dot-com era, where there was a rush to invest in anything internet-related, investors in AI are more selective, focusing on companies with solid business models and clear paths to profitability. This cautious approach is partly due to the lessons learned from the dot-com bust, where many investors saw huge losses. There is a greater emphasis on sustainable growth, profitability, and long-term value creation in the AI sector. This shift in investment strategy is likely to contribute to a more stable and sustainable growth trajectory for the AI industry compared to the rapid and unsustainable growth of many dot-com companies.
\nThese differences highlight a more mature and cautious approach in the AI era, suggesting a potential for more sustainable growth and less risk of a bubble similar to the dot-com crash. While the excitement around AI is certainly reminiscent of the dot-com era, the context and market dynamics are notably different, offering a more grounded and potentially more promising future for AI technologies.
\nAs we delve deeper into the AI revolution, it's crucial to address the growing concerns surrounding its sustainability and the challenges it presents.
\nOne of the primary concerns with the rapid advancement of AI is its energy consumption and potential environmental impact. AI systems, particularly large machine learning models, require significant computational power. This demand often translates into high energy usage, raising concerns about the carbon footprint of AI technologies. The energy-intensive nature of training and running sophisticated AI models has implications for global energy consumption and the environment. As AI becomes more pervasive, the industry must prioritize developing energy-efficient algorithms and leveraging renewable energy sources to mitigate these environmental impacts.
\nTo avoid the pitfalls of the dot-com era, where growth often overshadowed sustainability, AI development must be both sustainable and client-focused. This approach involves creating AI solutions that not only address immediate client needs but are also built with long-term viability in mind. Sustainable AI development means considering the environmental, ethical, and societal impacts of AI technologies. It also involves ensuring that AI solutions are scalable, reliable, and capable of adapting to evolving client needs and technological advancements.
\nThe AI industry faces several challenges that must be navigated carefully:
\nScalability: As AI applications grow, the challenge lies in scaling these solutions while maintaining efficiency and effectiveness. Scalability issues can arise due to limitations in data, computational resources, and the ability of AI systems to adapt to diverse and changing scenarios.
\nEconomic Factors: The global economic environment affects investment in AI research and development. Economic downturns, shifts in market demand, and changes in funding can impact the pace and direction of AI innovation.
\nEthical Considerations: AI raises numerous ethical questions, including privacy concerns, bias in AI algorithms, and the potential for misuse of AI technologies. Ensuring that AI is developed and deployed ethically requires ongoing dialogue, regulation, and adherence to ethical guidelines.
\nAddressing these challenges is essential for the responsible advancement of AI. By focusing on sustainability, client needs, and ethical considerations, the AI industry can aim for a future where technology not only drives innovation but also aligns with broader societal and environmental goals.
\nAs we stand at the crossroads of another technological revolution with AI, it's essential to draw upon the lessons from the past, particularly those learned during the dot-com bubble, to navigate this new era responsibly.
\nFrom my experience, the key to enduring success in technology lies in sustainable and client-centric development. In the AI domain, this means creating solutions that not only leverage the capabilities of AI but also address real-world problems and client needs effectively. Sustainable development in AI should consider not just the immediate functionality of the technology but also its long-term impact on society, the environment, and ethical norms. AI should be a tool for enhancement and empowerment, not just a showcase of technical prowess.
\nThe dot-com bubble taught us the importance of grounding technological excitement in reality. In the AI sector, this translates to a focus on long-term value creation rather than short-term gains. Investors, developers, and companies should prioritize:
\nBy approaching the AI boom with a focus on sustainability, client-centric solutions, and responsible innovation, we can harness the power of AI to create a future that is not only technologically advanced but also socially responsible and environmentally sustainable. This balanced approach will enable us to leverage AI's potential fully while avoiding the pitfalls that have marked previous technological upheavals.
\nLately, there's a big increase in pictures made by AI (Artificial Intelligence) on the internet. This change is reshaping the way we see and use pictures online. AI is getting really good at making images that look real, and it's getting hard to tell what's real and what's not.
\nSearch engines like Google and Bing, which used to have mostly real pictures, are now full of these AI-made images. Some people think these AI images are just filling up space and are hard to separate from real ones. But, this view might miss out on the bigger picture and what AI images can do.
\n![\"A](\"https://b.polente.de/img/BaznjeVkyB-360.png\")
Imagine if I posted pictures of cats drawn by my daughter when she was three. These aren't real cats, but if they get popular online, they might end up in search engines as if they were real cat pictures. This shows how AI can make fake images that seem real.
\nThe real problem comes with more tricky things, like a made-up picture of a famous person building sandcastles on the beach. Figuring out if these complex fake images are real or not needs us to be more careful and smart.
\n![\"A](\"https://b.polente.de/img/A20FlPTYDp-360.jpeg\")
We've always used our own judgement to check if what we see is real. This includes comparing different sources, looking for more proof, and using common sense. With AI-made images, it's even more important to use these skills.
\nSome people think search engines shouldn't show AI-made images. But this is a simple answer to a complicated problem. The real issue is not just about filtering out AI stuff, but about teaching people how to think critically about the images they see.
\nAs AI keeps growing, we need to change how we handle information. We should accept AI-made images as part of our online world, but also get better at questioning and understanding them. In a world full of fake creations, our own thinking and judgement are the best tools we have. This won't be easy, but it's necessary.
\n", "date_published": "2024-01-04T00:00:00Z" } , { "id": "https://b.polente.de/blog/FigmaDevModeFigJam/", "url": "https://b.polente.de/blog/FigmaDevModeFigJam/", "title": "Dev Mode in Figma - A Revolution for Developers", "content_html": "Do you like Figma? If yes, you'll love the new Dev Mode feature. I'll explain how I use it in my designs and why it's so useful for developers.
\nDev Mode in Figma is a new, really helpful feature for developers. It's like a tool that lets you check your designs. You can see sizes, styles, and even make code for CSS, iOS, or Android right from your designs.
\nDev Mode and Figma work together to make your work flow better. You can connect your designs, code, and even project tools in Figma. Dev Mode also makes sure your designs and code match.
\nFigJam, part of Figma, now has AI tools. They help with group work and brainstorming. You can make boards for meetings and sort ideas easily.
\nFigma's tool for Visual Studio Code helps you look at designs, work with other designers, and get code ideas. It mixes design and coding.
\nDev Mode helps you organize and update files, making it easier to go from designing to coding.
\nJambot in FigJam uses AI to help with brainstorming and organizing ideas. It makes working together better.
\nAI tools in Figma and FigJam are powerful but need to be used carefully. Always check the information they give and follow OpenAI's rules.
\nAI in FigJam can be turned on or off, giving teams control over how much AI they use.
\nDev Mode and AI tools in Figma and FigJam are changing how we design and develop. They're not just about working faster, but about improving our whole approach.
\nHow are you using these new tools? Let me know in the comments.
\nRead more about Figma's Dev Mode here.
\n", "date_published": "2023-12-15T00:00:00Z" } , { "id": "https://b.polente.de/blog/ContinuousExperiencePipelinesCase2/", "url": "https://b.polente.de/blog/ContinuousExperiencePipelinesCase2/", "title": "Case Study - B2B Electrical Distribution Company", "content_html": "In a project with a B2B Electrical Distribution Company, Publicis Sapient tackled a complex, React-based Monorepo system by implementing a Figma-driven design system with design tokens and Styled Dictionary. This strategic shift improved accessibility by 20–30%, introduced a native CSS library for React, and ensured cross-platform consistency, significantly streamlining component usage. Robust support channels and an Open API for components further enhanced control. The project not only elevated the e-commerce platform’s performance and consistency but also set a new standard for accessibility, illustrating the transformative impact of a well-integrated design system in the Continuous Experience Pipeline.
\nThis case study is about a client with a complex system, evolved over some years within a Monorepo environment, using Material UI (MUI) and internally developed design components. The existing setup led to cross-dependency issues and unnecessary complexities due to individual teams modifying components for their specific needs. So we did not had the need to be framework agnostic, and could rely on the existing technology, what was React.
\nOur strategy focused on introducing a Figma-driven design system, employing design tokens and Styled Dictionary, and integrating these with the Figma Token Studio plugin. This approach was aimed at revamping the core e-commerce application to enhance reliability, accessibility, performance, and maintainability.
\nBy shifting to the new design system components, which were built with accessibility in mind from the outset, we reduced accessibility bugs by 20–30%.
\nWe developed a native CSS library for the React components, offering flexibility for future modifications and ensuring consistency across various platforms.
\nUtilizing Styled Dictionary, we extended design decisions to Flutter for mobile app development, ensuring a consistent omnichannel experience.
\nThe new system significantly reduced the need for teams to create new components, as they perfectly aligned with the client’s style guide.
\nWe established robust gatekeeping and support channels to manage the demand for additional functionalities. All components were designed with an Open API for easy extension.
\nAwareness and Future Goals: The project not only improved performance and consistency but also raised awareness about non-functional requirements like accessibility. The client is now aiming for state-of-the-art accessibility in future releases.
\nThe system is ever-evolving, and we currently plan to move away from Figma Token Studio to directly consume the newly introduced Figma variables. Also, ongoing design decisions and component improvements need to be factored in. The pipeline is never stopping, and the components need ongoing enhancements; feedback needs to be built in, therefore keeping the acceptance high.
\nThe introduction of a native CSS and React-based system, complemented by a meticulously crafted design system in Figma, profoundly transformed the client’s e-commerce platform utilizing the Continuous Experience Pipeline. This approach not only addressed specific technical challenges but also aligned perfectly with the company’s broader objectives for performance, consistency, and accessibility, paving the way for a more seamless and inclusive user experience.
\n", "date_published": "2023-12-13T00:00:00Z" } , { "id": "https://b.polente.de/blog/ContinuousExperiencePipelinesCase1/", "url": "https://b.polente.de/blog/ContinuousExperiencePipelinesCase1/", "title": "Case Study - Enhancing Digital Solutions for a Leading Logistics and Transportation Provider", "content_html": "In a project for a major logistics and transportation provider, Publicis Sapient overcame complex, multi-framework challenges by adopting Web Components with Stencil and transitioning to Figma. This approach streamlined the development process through the Continuous Experience Pipeline, enabling a unified codebase, efficient design processes, and consistent application across various platforms. The integration of Stencil and Figma led to significant improvements in efficiency, design consistency, and overall maintenance of digital solutions in a complex, multi-technology environment.
\nAt Publicis Sapient, we embarked on a project for a major logistics and transportation provider, characterized by a diverse ecosystem and a reliance on various technical solutions. Initially tailored for internal React needs, the project quickly expanded to accommodate other teams using Angular, prompting a shift to a multi-framework setup.
\nThe client’s environment was complex, with many service providers using different technical solutions. Maintaining multiple frameworks was impractical, leading us to seek a more unified approach.
\nWe chose to employ Web Components provided by Stencil, which allowed for wrapping components for different frameworks. This shift enabled us to maintain a single source and library for multiple uses and applications. Additionally, we transitioned from Sketch and InVision to Figma. This move proved beneficial, as Figma’s developer mode and design tokens in variables greatly facilitated maintaining a Continuous Experience Pipeline.
\nThe transition from traditional frameworks to Web Components marks a significant shift in web development practices. Traditionally, developers have relied on popular frameworks like React, Angular, or Vue.js to build web applications. These frameworks provide a structured way of developing applications, offering robust features, community support, and standardized practices. However, they often lead to dependency on specific ecosystem tools and can result in heavier, more complex codebases.
\nWeb Components, on the other hand, represent a move towards a more modular and standardized approach in web development. They are a set of technologies that allow developers to create reusable custom elements with encapsulated functionality, which can be used across different web applications regardless of the underlying technology stack. This means developers can build a component once and use it anywhere, without worrying about compatibility issues.
\nSome years back I already asked Sould I use Web Components?
\n<!-- Define the Web Component -->\n<script>\n class CustomHeadline extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({\n mode: \"open\",\n });\n }\n connectedCallback() {\n const headlineText = this.getAttribute(\"text\") || \"Default Headline\";\n this.shadowRoot.innerHTML = `\n<style>\nh1 {\nfont-family: Arial, sans-serif;\ncolor: #333;\n}\n</style>\n<h1>${headlineText}</h1>\n`;\n }\n }\n window.customElements.define(\"custom-headline\", CustomHeadline);\n</script>\n<!-- Usage of the Web Component in HTML -->\n<custom-headline text=\"My Custom Headline\"></custom-headline>The move towards Web Components is driven by a desire for more standardized, efficient, and interoperable web development practices, allowing for greater flexibility and future-proofing in building web applications.
\nWeb development practices focusing on standardization and interoperability ensure compatibility across modern browsers, alleviating cross-browser issues. This approach promotes the creation of reusable components, which enhances maintainability and minimizes code duplication. By leveraging native browser capabilities, it leads to lighter and more efficient applications, reducing dependency on external libraries. Moreover, this framework-agnostic methodology allows for flexibility across various project needs and offers protection against the shifting trends in JavaScript frameworks.
\nStencil, as a Web Components compiler, can play a pivotal role in the modern web development landscape, particularly in its ability to act as a wrapper for Web Components. Its primary function is to generate standard Web Components from a set of high-level, easy-to-write templates and scripts. Here are some key benefits of using Stencil in delivering solutions for multiple frameworks while remaining framework-agnostic.
\n<!-- Define the Stencil Component -->\n<script>\n import { Component, Prop, h } from \"@stencil/core\";\n @Component({\n tag: \"my-headline\",\n shadow: true,\n })\n export class MyHeadline {\n // Define a property to hold the headline text\n @Prop() text: string;\n render() {\n return <h1> {this.text} </h1>;\n }\n }\n</script>\n<!-- Usage of the Stencil Component in HTML -->\n<my-headline text=\"My Custom Headline\"></my-headline>Stencil’s creation of standard Web Components offers broad framework compatibility with platforms like React, Angular, and Vue, enabling seamless integration into various projects regardless of the underlying framework. It optimizes performance through features like lazy loading and efficient rendering, resulting in lightweight, speedy components essential for high-performance web applications. Stencil enhances developer productivity with a simplified approach to component creation, allowing for reuse across multiple projects and reducing development time.
\nEquipped with tools like TypeScript support and JSX templating, it streamlines the development experience. By generating standard Web Components, Stencil future-proofs projects against the fluctuations of the JavaScript framework ecosystem, ensuring long-term relevance and usability. Additionally, it guarantees cross-platform consistency in component behavior and appearance, crucial for a uniform user experience across diverse digital environments.
\nIn our context, a Continuous Experience Pipeline means that any design change in a component or token is directly updated in the codebase. This setup simplifies theming, as the tokens are utilized as specified, streamlining the process. The single packages for multiple frameworks are build and deployed into NPM Packages and can be utilized directly.
\nIssues are now adjusted in a single codebase, simplifying support and ensuring consistency across client-facing design and web applications.
\nThis approach offers a singular support channel for all frameworks, enhancing efficiency.
\nAs vendors start using the component library, the client’s web applications become more consistent and integrated.
\nWe use Docusaurus and NPM for documentation and version maintenance, which our client and their IT vendors find valuable. Internal teams now support our efforts, and we’ve introduced gatekeepers to ensure changes don’t disrupt the teams using the system.
\nDesign efforts, in some cases, have been halved, as there’s no longer a need to ‘reinvent the wheel’.
\nWhile there was a learning curve for external teams unfamiliar with the libraries, the project setup provided foundational guidelines (like styles, fonts, reset options) that made project kickoffs up to 30% quicker.
\nDigital solutions using the Continuous Experience Pipeline are now faster to set up, adhere to better design principles, and are easier to maintain.
\nStencil’s capabilities in creating standard Web Components greatly benefit our Continuous Experience Pipeline, offering framework compatibility, performance optimization, and enhanced productivity. Its tools and features ensure streamlined development and cross-platform consistency, aligning perfectly with our pipeline’s objectives for efficient, sustainable web solutions.
\nThe above highlights how Stencil’s framework-agnostic approach and the shift to Figma have significantly streamlined digital solutions, leading to improved efficiency and consistency in the client’s diverse technical environment utilizing the Continuous Experience Pipeline.
\n", "date_published": "2023-12-13T00:00:00Z" } , { "id": "https://b.polente.de/blog/ContinuousExperiencePipelines/", "url": "https://b.polente.de/blog/ContinuousExperiencePipelines/", "title": "Embracing Agility and Efficiency - Our Journey with Continuous Experience Pipelines", "content_html": "Publicis Sapient’s journey in web development and design, encapsulated in our Continuous Experience Pipeline approach, highlights our adaptability and success in addressing diverse client needs. Our approach demonstrates how the flexibility in choosing tools and technology can significantly improve the efficiency and scalability of web projects with Continuous Experience Pipelines.
\n![\"\"](\"https://b.polente.de/img/XPs-vtj4H6-360.png\")
Experience Engineering at Publicis Sapient is about creating digital solutions for outstanding user experiences. This approach involves a team of designers, developers, and strategists who use innovative technology and industry insights to build engaging web applications. The focus is on delivering visually appealing, user-friendly, and effective digital platforms. This ranges from simple marketing campaign pages to complex e-commerce platforms and enterprise software. Employing Agile and Lean methodologies, the team ensures rapid, adaptable, and high-quality development, meeting the evolving needs of the digital landscape.
\nWeb development and design inevitably grapples with technical challenges such as intricate workflow complexities, alignment discrepancies within design teams, divergent technical design decisions, and inconsistencies in user experience across various digital platforms.
\nOur Continuous Experience Pipeline approach elegantly overcomes these challenges by optimizing processes and introducing cross discipline, leading to better user experience, design and development. This approach allows us the flexibility to adopt technological strategies. One example is our embrace of Web Components or in other cases React only; our choice of technology is context-dependent and not pre-defined. We primarily focus on essential tools like Figma, Styled Dictionary, and automated pipelines to maintain this adaptable and efficient ecosystem, without defining a framework or frontend tooling.
\n![\"\"](\"https://b.polente.de/img/dn7xbrJOrC-360.png\")
At Publicis Sapient, we have successfully implemented numerous Design Systems as part of a Continuous Experience Pipeline setup for various clients. Our experience has demonstrated the effectiveness of this approach even in highly scalable customer environments.
\n![\"\"](\"https://b.polente.de/img/riDWarFK1J-360.png\")
Figma represents a significant step forward in staying aligned with industry-leading tools and technologies. It has not only enhanced our design and development workflow but also opened doors to future innovations and efficiencies. The shift underscores our commitment to embracing cutting-edge technologies to deliver superior digital experiences. This shift was primarily driven by the limitations we experienced with the previous tools, particularly in terms of granular design control and utilization of design tokens, which were only rudimentarily supported.
\nFigma allowed us to fully leverage nearly all design decisions. The flexibility and depth it offers in handling design tokens far surpass what was possible with Sketch and InVision.\nKey Aspects of a Continuous Experience Pipelines
\nAn important lesson in transitioning to a design system is to focus on fundamental design decisions like fonts, colors, line-height, padding, margins, breakpoints, z-index, opacity, shadows, borders, radius, sizes, and colors. Avoid overcomplicating with layout and full component design tokens, as this can hinder maintenance and acceptance.
\nThe integration of tools like Styled Dictionary, Storybook, or Docusaurus for documenting code has proven invaluable. These tools are widely recognized and help in creating a coherent understanding of the design system.
\nImplementing a CI/CD pipeline that automatically translates design decisions into code is crucial. This automation streamlines the process, ensuring that design changes are efficiently reflected in the codebase.
\nEnsuring that the library is versioned in a registry like NPM is essential for effective management and distribution.
\nExploring AI and Generative AI Tools: The potential of integrating AI and generative AI tools in our workflow is exciting. These technologies could further automate and innovate our design processes, such as generating varied content for prototypes.
\nFigma has revolutionized our workflow by offering unparalleled control and integration capabilities. It has become a central tool in our design process, significantly enhancing efficiency and collaboration.
\n![\"A](\"https://b.polente.de/img/B73Ujm0H2y-360.png\")
In summary, our journey at Publicis Sapient in web development and design showcases the adaptability and success of our approaches, particularly in the continual evolution of tools and technologies in our Continuous Experience Pipeline.
\nOur projects demonstrate adaptability in addressing diverse client needs, from transitioning to Web Components with Stencil for a logistics provider to implementing a native CSS and React system for an electrical distribution client. This flexibility ensures that our solutions are both effective and tailored to specific project requirements.
\nThe use of Stencil as a Web Components wrapper has been a standout success, enabling us to deliver multi-framework solutions while maintaining a single codebase. This approach has streamlined our development process, improved performance, and ensured consistency across various platforms.
\nOur shift from Sketch and InVision to Figma highlights our commitment to evolving with industry-leading tools. Figma has enhanced our design workflow by providing advanced control over design tokens and integrating seamlessly with other documentation and automation tools.
\nAI can revolutionize a Design System Manager and Continuous Experience Pipeline by offering predictive analytics for UX design, automating asset categorization, enabling real-time collaborative feedback, generating code efficiently, ensuring accessibility standards, and facilitating personalized user experiences. These AI-driven enhancements streamline design and development, ensuring cutting-edge, user-focused digital products. But this would be part of an own blog post.
\n![\"\"](\"https://b.polente.de/img/w30keWLt73-360.png\")
If our journey in web development and design resonates with you, we’re eager to connect. Whether you’re looking to explore new tools like Stencil and Figma or want to share your own experiences, we welcome your insights and collaboration. Feel free to reach out to us for an exchange of ideas and strategies. Let’s work together to create impactful digital solutions.
\nSome of the images and word smithing was done with genAI
\n", "date_published": "2023-12-13T00:00:00Z" } , { "id": "https://b.polente.de/blog/HeadlessCMS/", "url": "https://b.polente.de/blog/HeadlessCMS/", "title": "How does a Headless Content Management System (CMS) work?", "content_html": "Content Management Systems as we use them today go back to the times when the Internet was invented by Tim Berners-Lee in 1990. Data and Content had to be stored somewhere — and even more important — had to be maintained and updated. Initially, most contents were created like documents, edited, and stored as static pages. This is enhanced with the need for dynamic content, interaction like commenting, or linking.
\nFirst CMS were still providing static HTML pages, that were rendered server-side by Script Languages like PHP, JSP, ASP, or other template languages or engines that have been created like TWIG, HTL, or Freemarker. Allowing to interact with the pages with added forms. Nowadays with Node as JavaScript (we cover this later)
\nThis came with some problems as to how HTML is used, contents were only available in one format, and the source was created on a server that did not know anything about the device it was rendered on. With upcoming Mobile, but also other IoT devices it was hard to render this content appropriate on all devices.
\n![\"From](\"https://b.polente.de/img/swwOf-6och-360.png\")
While the content was rendered into a unique layer of HTML on the server-side, only CSS was able to design this output. There was a hard binding from Content to HTML. This caused less flexibility and relaunch. Or re-using of content created effort in re-creating the server-side rendering. CSS could always re-create new designs with existing content if HTML is written properly. (Examples like CSS Zengarden are showing this for decades) But this heavily depends on semantic Markup and no Elements used that cause already design (like line breaks,
How do traditional CMS monoliths work?
\nA traditional CMS is a software that you either install and manage yourself or in a managed server environment. Traditional CMS is also known as “monolithic” because they contain all functions and assumptions for working in a single system. Traditional CMS often offers a visual authoring interface for editing content (WYSIWYG), as they only have one context for displaying the content — usually a website. The system normally offers a direct editing layer on an existing rendered layout.
\n![\"Showing](\"https://b.polente.de/img/YScqRx9KId-360.png\")
The headless CMS only contains a data layer and authoring. They provide an API for a headless rendering layer that consumes the data. The aforementioned is also one of the challenges. How can you render a WYSIWYG experience when your authoring system does not know about the rendering?
\nA new generation of CMS were invented. These often offer additionally Headless on existing systems, like CoreMedia for example, where besides Freemarker Template, a Headless GraphiQL server exists.
\nHeadless also provides the possibility to get a content hub to ensure “Content first” implementation. Your one base of content will be able to maintain a bucket of additional endpoints.
\n![\"The](\"https://b.polente.de/img/XhELnAbCEO-336.png\")
This data will be consumed via APIs — below are some examples.
\n![\"Rest](\"https://b.polente.de/img/8_XE9-j-pJ-313.png\")
REST is a software architecture style that defines how to create web services. Web services, which conform to the REST architectural style and are known as RESTful Web Services, provide interoperability between computer systems on the Internet. RESTful web services allow the requesting systems to access and manipulate web resources using a set of stateless operations.
\n![\"Flow:](\"https://b.polente.de/img/zFa0_4ngIY-254.png\")
GraphQL is a query language for your API. Also, a server-side connection for executing queries belongs to a type of system to use for your data management. GraphQL is not tied to a personal database or storage engine and is driven by hidden code and data management.
\nA GraphQL service will have types and fields for those types. There are functions for each field from each type.
\nThis is the rising star, as it offers flexibility not known before.
\nI mention GROQ though it is not really widely used, but as I see similarities to GraphQL worth sharing.
\nUse cases for headless CMS can be the following: You need to build a website with a technology you are familiar with, or web apps that use JavaScript frameworks like VUE, React, Svelte, Web Components, or Angular. Native mobile apps for iOS or Android can be directly consuming content. As you have seen, it’s not limited to websites.
\nWhere headless helps:
\n| \n | Monolithic | \nHeadless | \n
|---|---|---|
| Simplicity | \n0 | \n0 | \n
| Localization | \n+ | \n+ | \n
| Plug-in Uncertainty | \n+ | \n- | \n
| Cross-Platform | \n- | \n+ | \n
| Technology Freedom | \n- | \n+ | \n
| Developer first | \n- | \n+ | \n
Editing your content can be harder for authors on headless systems. Your System is depending on a second screen/system.
\nWebsites created with traditional CMS, allow customizable zones, and authors can resize and rearrange dynamic content easier. They are not limited to edit dynamic data in a fixed zone. They are enabled to share content easier.
\nWith headless, authors often can’t customize the placement or presentation much beyond given forms, without implementing configurable content grids. Dragging and dropping components is getting harder, as the components only exist as data and rely on a presentation layer.
\nIt can be more expensive to implement and the share of costs can get more complicated when only one unique source exists, but multiple layers consume it.
\nSearch Engine Optimization can also be trickier. Server-side Rendering (SSR) needs to be implemented for deep linking. SSR makes it even more complex. There are some advantages with server-side rendered JavaScript, but it is still an effort to consider. Think twice before considering headless. There can be use-cases where all of the above is not relevant. Usage depends.
\nThere is no black and white decision possible. It depends on your team’s skills, your client’s or customers‘ needs, your project setup, and so on. Just make the right decision in the beginning.
\nWill this blog explain how your customers shall be tracked bypassing current local or EU laws and browser vendor settings? GDPR, or third-party cookies, for example?
\nNo, I’m afraid, you can stop reading if you expected this. I will also not give any legal advice on how to stay safe. Connect with your local legal office if you need such help.
\nYes, it is. I want to help you think about satisfying solutions that meet your customer’s needs and appreciate local law. (What is obviously also global).
\nA quick check of a German Newspaper and their current state. Reason enough for me to do a quick check on the loaded resources with and without tracking protection — only with a view on requests and data transferred — triggered me again to take care of how we track our clients. We overload the web with tracking and advertisement (what also tracks), and other third-party stuff, that harms privacy and performance.
\n![\"Shows](\"https://b.polente.de/img/K8ErvLW1hr-360.png\")
![\"451](\"https://b.polente.de/img/PmMcla0z8e-360.png\")
![\"100](\"https://b.polente.de/img/JmJ2IzMX2V-360.png\")
So, why is this a problem for your customers and yourself?
\nGovernments create laws that protect their residents. Customers protect themselves using safe browsers.
\nThe EU and California created laws that protect their residents. In California, it is covered by several privacy laws. In Europe, we have the GDPR rules. In a nutshell, they make it mandatory to inform your customers what you store, and where, and how you can ask for deleting it again.
\nLook around and you will see a lot of reasons. Cambridge Analytica is an ongoing issue. Customers data is sold, companies like Facebook earn money with it. Google’s whole advertisement system relies on shared knowledge about your customers. And these are only examples.
\nAlso, searching for “a product” — buying it — and in the next weeks, you get an advertisement for this all over, without any need for this product anymore. The data collected often does not work as intended.
\nThere is a lot of lost trust in the pages your customers visit. They want to know what data they share and in a first try, they often just block all data to prevent the above issues.
\nCustomers and client contacts of Publicis Sapient reach out to us to get help to track their customers’ journeys and monetize their web. Asked why they have the need to track better, the answer is often: they can’t track the ones they want anymore. This is caused by a couple of reasons:
\nHow can customers get trust back, to allow them using your web and enable us to get to know them?
\n\n\nIf the tracking and advertising industry does not start providing privacy-respecting tools that keep the data where it is generated and match it on the first-party side, they will get less important, like stagecoaches when delivery cars and digital transportation were invented. - Holger Hellinger
\n
Browsers like Firefox, Brave, Edge, Opera, and Safari try to help their users to prevent getting tracked, as they recognized that even asking politely for not tracking does not help. If you use the latest Firefox, it already shows you what they prevented you from with visiting: about:protections.
\nA side effect of this is, browser vendors like Brave get strong as they provide full protection of their users with not sharing anything. Their users even accept to be kept out of some pages. Brave created its own business model of selling ads that relies on users' attention only. Marketers do not know about potential customers until these hit their pages and interact directly. And Brave offers publishers to get part of the Basic Attention Network and get paid by people using the browser on their published web pages.
\n\n\nWill companies find other workarounds that Apple will have to cordon off? Probably.- Quote from by-passers
\n
The issue with politeness, for the wish to not getting tracked, apparently is getting visible. Reading such articles, that blame browser vendors protecting their users, or comments in tracking tools documentation, that claim that bypass is nearly impossibly using local storage, are showing the dilemma. There is a lot of energy in trying to bypass users who do not want to get tracked.
\n![\"The](\"https://b.polente.de/img/9A4dYV9oY7-360.png\")
The more the industry bypasses, the more the game of “The Hare and the Hedgehog” starts. In the end, your client loses: Trust in you, speed and quality time on the internet, financially as stolen bandwidth and more.
\nOther ways of actions against user privacy are by advertisers like Google, who start to remove the possibility to use ad blockers in their own Chrome. Ad-blocking, as we were used to, will not work anymore for community browsers with their V3 manifest, as this harms their core business model. On the other hand, Google also rethinks their usage of cookies, too.
\nInstead of luring your customers into tracking and possibly losing this race, we need to do it differently again.
\nGive your customers trust back when they visit your web pages. Do not rely on third parties that directly interact with your clients. Store only relevant data and make it visible for your customers why you store something and what advantages they have from this action.
\nGetting asked with several confirm boxes if they want to accept cookies, notifications and newsletters? Or keep their experience clean and collect the data you need after a login, interacting with a form, etc.?
\nI think it is obvious.
\nOne could be the rebirth of server-side logs. There is no need to set client-side cookies to track users. All servers write log files; they are first-party data. You can install software that evaluates this data. Getting information about click paths, user journeys does not need any third-party. It was just too convenient to let all this work be done by third-party, but they also sold and used your customer’s data.
\nThis requires a bit of preparation of your services to write proper log files when your client interacts with your application. But compared with the price of losing trust, this is negotiable.
\nInstead of pushing states to a dataLayer of third parties, keep this private by your own services, or your client-side applications might need to update the server asynchronous instead of pushing to third parties.
You will not get this for free, but your data engineers with better customer data will love you and in the end, your customer.
\nBesides this, you could even keep your users’ data tracked across your own services. Use, for example, unique property and user IDs in your first-party cookies and make it your data.
\nIf you want your customer’s detailed data, ask them for this. Offer them a benefit when they provide this, and not only the twentieth newsletter subscription with a shuffle competition every three months.
\nSee for what price you gain client or customer data, maybe less is again more.
\nBe creative. Your legal team for sure will find some ways to make your customers share information with you. But don’t use third parties to collect this. Your customers will see if you redirect them somewhere else.
\nPublicis Media is a member of Adledger. It is a non-profit research and development consortium responsible for implementing global technical standards and solutions for the digital media and blockchain industry. AdLedger’s goal is to promote trust and transparency in the digital media space. Publicis Sapient can support you in finding the right way of doing things.\nMonetizing your applications differently
\nGet a Publisher at the Basic Attention Network. Users visiting your applications with Brave can monetize you.
\nIf you get data from customers who trust you, you have more value than just having data from the ones who do not know how to prevent themselves from being tracked. So maybe using single sign-on on your applications, not sharing with others, can make your user data more valuable again. As it is not only your customers’ data, it is also yours!
\nTracking your users’ data across small businesses may not even be helpful. This is even truer on private webpages.\nBest practices and other things to read
\nI have chosen this as a fairy tale that shows the fighting against the more intelligent or always step ahead analogy. ‘The Hare and the Hedgehog’ in detail.
\n", "date_published": "2020-03-19T00:00:00Z" } , { "id": "https://b.polente.de/blog/WebComponents/", "url": "https://b.polente.de/blog/WebComponents/", "title": "Should I use Web components?", "content_html": "At my current employer we do all kind of Web Applications. We call it Experience Technology. These customer user experiences have different needs. Sometimes we do static content deliverables like temporary marketing campaign pages, or knowledge bases that never get touched again. More often we do enterprise shopping experiences, catalogue maintenance, and other e-commerce platforms.
\nAsking someone of my team how to build their next customer user experience I get named: React, VUE, Svelte or at last, Angular. Normally no one tells me yet: Let’s do it native, let’s use Web Components.
\nWhy the frameworks are so common and preferred is having some reasons:
\nDoing a quick poll with our experience technologists hardens the opinion.
\n![\"Showing](\"https://b.polente.de/img/jzruGhsCFU-360.png\")
Showing React 58%, Angular 3%, VUE 15%, Native Web Components 7%. Other 13%
\nUsing frameworks and libraries for everything, causes problems that could be prevented. Average weight of a page is increasing. Complexity of generated code too. Views of common frameworks and libraries are often ridiculous complicated and deep nested and adding libraries and grid systems is done with a click. Importing without seeing the direct deeper effect. On top of that, Designers create complex animations and placeholders and forget that we still have low-end devices to support and not an ideal-world fast internet. Accessibility and search, like find-ability is getting worse. When useless containers are nested and semantics are getting lost.
\nOn top of all, GDPR compliance is bad to achieve as of often third parties are used in a way that makes it hard to know where your customers details are getting shared.
\nThis directly leads me to the this ask: Do we at all need to use a framework or library? Can’t we use Web components?
\nWebcomponents.org tells a clear use case, but why does still no one considers it first place to use it as base in their projects?
\n\n\nWeb components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML. Web components are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behaviour. - Webcomponents.org
\n
Would there be any advantage when using them instead of a framework? Long-term for sure. Imagine a situation where Facebook stops support for React, or Google for Angular. Sooner or later libraries might get outdated. The community for sure support it for some years, but it can stop. There is no guarantee that it works long. There are also new Libraries popping out every day.
\nAs we started writing decoupled user experiences, using micro-services and micro-frontends, we forgot to enable us to create long lasting frontend code, that is maintainable. Instead of using native functionalities, write proper markup and getting accessible and search engine friendly.
\nWe now create a dependency to a framework that is maybe out-dating soon. Any reason to do so?
\nFrameworks and libraries should help us organizing and writing our code and deliverables, but not overtaking our thinking and tooling. It is not reasonable that we deliver whole applications to clients browsers, when the contents never or only every view months change. We should instead build more meaningful smaller applications. We even need to render server side, using JavaScript.
\nUsing Web components would allow us to get back to standards, using browser supported simple tooling.
\nSo why should you consider Web components as complement for frameworks and libraries?
\nWeb components are the wrapper name for a set of techniques that create browser rendered interfaces. They are created through custom elements, shadow DOM, HTML templates and HTML modules. The latter is yet not widely adopted by browsers.\nCustom Element
\nSetup a JavaScript file that contains the code for your custom element.
\nclass MyCustomElement extends HTMLElement {\n connectedCallback() {\n this.innerHTML = `<p>Some Text</p>`;\n }\n}\nwindow.customElements.define(\"my-custom-element\", MyCustomElement);You need a DOM node that can initialise it.
\n<my-custom-element></my-custom-element>With your custom element you can add coloured text in the context of other text paragraphs. You can capsule your styles that only belonging to the needed node.
\nconst shadowRoot = document.getElementById('fetched').attachShadow({ mode:\n'open' }); shadowRoot.innerHTML = `<style>\n p {\n border: 1px solid red;\n padding: 5px;\n }\n</style>\n\n<p id=\"paragraph\">Paragraph using <slot></slot></p>\n`;Create some HTML to connect your code with it.
\n<span id=\"fetched\">Slot</span>\n\n<p id=\"paragraph\">Normal Text</p>Shadow DOM like shown below will be generated.
\n<body>\n <span id=\"fetched\">\n <#shadow-root>\n <style>\n p {\n border: 1px solid red;\n padding: 5px;\n }\n </style>\n <p id=\"paragraph\">Paragraph using Slot</p>\n </#shadow-root>\n </span>\n <p id=\"paragraph\">Normal Text</p>\n</body>Stay DRY. Use HTML templates. Look at the the above example. If you want to render more paragraphs, you can repeat your <p> or just use a <template>. It is obvious what is wet and what is dry.
You can use them together with custom elements and shadow root, or alone.
\n<template id=\"template\">\n <p></p>\n</template>\n<section id=\"paragraphs\"></section>How to render a HTML template.
\nconst paragraphs = document.getElementById(\"template\");\nconst text = [{ node: \"Text 1\" }, { node: \"Text 2\" }, { node: \"Text 3\" }];\ntext.forEach((text) => {\n const domNode = document.importNode(paragraphs.content, true);\n domNode.querySelector(\"p\").innerHTML = text.node;\n document.getElementById(\"paragraphs\").appendChild(domNode);\n});Nope. But they are currently considered. So let’s see.
\nTake also into account that all is maintained in a component library. Handled in a DSM provided by InVision, Figma, or Design Kits like Sketch. We need to ensure to reuse our code and Styles. Design Tokens help here. Amazon has Style Dictionary, but there are others. And ideally, have a direct connect to your repository. (More would be subject of a full own post)
\nAsk them why! Seriously!
\nUpdate when took over to this blog. At the time I wrote this in 2019 it was not sure that IE will ever die.\nIf they still insist, and maybe even have a dated soon to be replaced Edge: there are Polyfills available, they render the components as HTML for you.
\nMore and more Frameworks and libraries arise that help generating your applications with Web components. They offer build in test ability, design libraries, pattern libraries and more. There are well established ones like Polymer, LIT or Stencil. You can find more on the web component page list. So if you do not want to do it manually. Use provided tools.
\nThere is no golden hammer that makes all your problems a nail. But you should consider re-usability, need of the current implementation, and how long it will exists. Then it can help you making a decision.
\nStatic rendering for interims campaign pages, knowledge bases, and so on can improve SEO, size, and customer experience. Full blown SPA with a checkout or profile management, and a healthy mixture for catalogue can do their part on this.
\nBut the base of all should be a Web component. Just do it.
\nYes, you can also make Web components complicated.
\n", "date_published": "2019-11-27T00:00:00Z" } ] }