Angular Releases New Profiling Track for Chrome DevTools

Angular partnered with the Chrome team to create a new custom track for Angular in Chrome DevTools. The tool provides Angular-specific data and insights from the Chrome DevTools performance panel.

“Traditionally, Chrome’s performance panel is excellent for detailed function call analysis, while Angular DevTools offers a higher-level view based on framework concepts like components, lifecycle hooks, bindings, etc.,” Angular developers Mark Thompson and Pawel Kozlowski wrote in Wednesday’s announcement. “Unfortunately, having two separate tools leads to a fragmented understanding of performance.”

The blog post provides screenshots to help developers understand the new interactive track, or you can head straight to the documentation.

Astro Rolls Out Intro Course

If you’d like to learn more about Astro’s recent release of live content collections, or just Astro in general, the framework’s maintainers hosted and participated in a series of virtual events last week, called the Solstice Festival.

Among the events was the release of an Intro to Astro course, a discussion with core maintainer Sarah Rainsberger, a panel on learning Astro and a drill-down on content collections with Kane and senior software engineer and YouTuber Nick Taylor.

Included in the event was a deep-dive post into the new live content collections by Astro core maintainer Matt Kane.

Astro is a content-focused web framework. Content collections were originally a way to structure content from files (Markdown, MDX and JSON), allowing developers to build blogs and documentation sites, he explained. But they’ve since evolved into a content layer that supports pluggable loaders for a variety of data sources, including APIs and CMS, Kane wrote.

Live content collections bring real-time data capabilities to the content collections API. Use cases include e-commerce sites that need frequent inventory changes, news and social media aggregation, and using custom loaders in pages.

Deep Dive into Shopify’s Frontend Tech Stack

Shopify’s tech stack is known for its scalability, and now we can see how it was built, thanks to a recent in-depth look published by the blog ByteByteGo. Shopify assisted with the piece.

“Shopify’s frontend has gone through multiple architectural shifts, each one reflecting changes in the broader web ecosystem and lessons learned under scale,” the blog post noted. “The early days used standard patterns: server-rendered HTML templates, enhanced with jQuery and prototype.js.”

Shopify then built its own single-page application framework called Batman.js, which offered reactivity and routing, but became a long-term maintenance problem. They next shifted to statically rendered HTML and vanilla JavaScript.

Now, TypeScript is paired with React.

“Today, the Shopify Admin interface runs on React, React Router by Remix, written in TypeScript, and driven entirely by GraphQL,” the post stated. “It follows a strict separation: no business logic in the client, no shared state across views. The Admin is one of Shopify’s biggest apps, built on Remix that behaves as a stateless GraphQL client. Each page fetches exactly the data it needs, when it needs it.”

For mobile development, they use React Native.

The piece also explores the backend tech stack.

Figma Adds Custom Interactions With React

Figma is best known as a design tool, but it supports developer collaboration in a number of ways. In June, the cloud-based design and prototyping tool introduced code layers, which is a new way to build custom interactions in Figma Sites — its tool for designing, prototyping and publishing websites directly from Figma designs.

Code layers use custom React code to add interaction and motion. Of course, it leverages AI to do so.

“Whether you’re creating an element from scratch or riffing on an existing design, code layers allow you to add dynamic functionality to your site — from flyouts and dropdowns to shaders and maps — by converting components to code layers, chatting with AI to build and tweak them, or editing directly in Figma’s code composer,” the company wrote in it’s announcement. “By creating a code layer for a component, you can add dynamic behavior simply by prompting the built-in AI chat — powered by Figma Make.”

Code layers can be turned into reusable components and Figma allows users to import packages of code from npm to unlock richer interactions, it adds.

Canva Offers More AI Integration

Speaking of design tools that are building out support for developers, last week Canva launched a Canva MCP Server that will connect users’ Canva content and design capabilities to AI tools.

The Canva MCP Server allows any AI assistant to tap directly into a user’s full Canva workspace — including design history, creative tools and templates — to generate designs, iterate or draft design copy, resize assets; all within a conversational flow, the company stated.

With the Canva MCP Server, AI assistants and AI agents can:

• Generate any design type, from social posts to presentations, incorporating context from the AI chat.
• Autofill charts with labeled, formatted data from AI-generated insights;
• Resize and export branded templates, from Presentations to Canva Docs, with on-brand, contextual copy; and
• Import PDFs or files directly from a link.

MCP integrations with Claude, ChatGPT and Salesforce will be available soon, the company added.

Canva also launched a deep research connector for ChatGPT. It connects Canva users’ designs directly to ChatGPT, “enabling specific, thoughtful, and context-rich responses grounded in your past work,” the company said.

Usage of the Canva GPT, which generates new designs that can be edited in Canva, has surged 375% YoY, making it one of ChatGPT’s top productivity apps, according to the company.

Canva already offers a Dev MCP Server.