Forem: TinyMCE

TinyMCE 7.8 Release Notes - New Filters in Image Optimizer and React 19 support

Mrinalini Sugosh (Mrina) — Tue, 22 Apr 2025 01:36:38 +0000

TinyMCE 7.8 enhances productivity with new Image Optimizer filters for effortless, on-brand editing and compatibility, with full support for React 19.

What's New and Improved?

Image Optimizer (New Filters & Improved Accessibility)

The Image Optimizer advanced feature now offers new, professionally-designed photo filters to enhance images with just a click. Additionally, accessibility improvements provide a smoother UX across all supported platforms.

For more details, see the Image Optimizer Feature Documentation

React 19 Compatibility

TinyMCE now offers full support for React 19, providing developers with quick integration and seamless compatibility.

For more details, see theReact Integration Documentation.

Improvements and Fixes in TinyMCE 7.8

TinyMCE 7.8 also includes several usability, accessibility, and compatibility improvements:

Added performance for Image Optimizer with faster loading times
Better error handling and clearer messages for configuration issues
Minor bug fixes to improve editor stability across various environments

How to Get TinyMCE 7.8

New to TinyMCE?

Upgrading from TinyMCE 6 or 7?

Check out our Migration Guide for a seamless upgrade.

For support, contact our Customer Success Team via the support page.

We Value Your Feedback

Submit feature requests or vote on existing ones via the TinyMCE Roadmap.

Useful Links

Thank you for choosing TinyMCE! 💙

— The Tiny Team

RAG, AI Agents and Agentic RAG - what is it and how does it work?

Mrinalini Sugosh (Mrina) — Tue, 01 Apr 2025 17:30:27 +0000

If you’re keeping up with AI (and who isn’t?), you’ve probably heard of Retrieval-Augmented Generation (RAG) and AI Agents. But what about this other term Agentic RAG? It’s like combining the best parts of both worlds—retrieval-driven accuracy and agent-based decision-making—to create something seriously powerful.

In this guide, I’ll walk you through how these systems work, why they matter, and how you can use them to level up your projects.

What’s the Deal with RAG?

RAG makes large language models (LLMs) smarter by adding real-time retrieval into the mix. Instead of relying solely on the data they were trained on (which, let’s face it, can get outdated fast), RAG pulls relevant information from external sources during runtime.

How does RAG work

At its core, RAG has two key components:

Retriever: Think of this as the search engine for your system. It uses vector similarity (tools like FAISS or Pinecone) to fetch relevant documents or data based on the input query.
Generator: This is your LLM (like GPT), which takes the fetched data and crafts a coherent, context-aware response.

Why You’ll Love It

No Hallucinations (Well, Fewer Anyway): By grounding responses in real data, RAG drastically reduces those “plausible but wrong” outputs we all hate.
Real-Time Updates: Pulls in fresh, accurate information instead of being stuck with static training data.
Quick to Set Up: With tools like LangChain or Haystack, integrating RAG into your app is surprisingly straightforward.

Where It Shines

Customer support chatbots pulling FAQs or manuals in real-time
Healthcare apps pulling the latest research papers for diagnosis
Research tools pulling niche datasets for highly specialized queries

What Are AI Agents?

AI Agents take things a step further by acting autonomously. They don’t just process inputs—they make decisions, execute tasks, and can even collaborate with other agents.

What Kinds of Agents Are Out There?

Reactive Agents: They’re quick to react but have no memory. Great for simple rule-based tasks.
Cognitive Agents: These are your memory-holding, learning-from-the-past kind of agents.
Collaborative Agents: Perfect for distributed systems, where multiple agents share tasks and data.

Why Use Agents?

Agents are like having a virtual assistant that can analyze, decide, and act without constant handholding. Whether it’s automating workflows, optimizing processes, or handling complex queries, they get it done.

What Is Agentic RAG?

Now imagine combining RAG’s retrieval magic with an agent’s autonomy, and you get Agentic RAG. It’s a hybrid approach that gives agents the power to dynamically decide what to retrieve, when, and why.

How It Works

Here’s a simplified flow:

Agents Analyze: One agent figures out what data is needed and sends out a retrieval task.
Dynamic Retrieval: The retriever fetches the most relevant info based on the agent’s input.
Generator Crafts a Response: The retrieved data and the query go into the LLM for a well-rounded output.

Why It’s a Big Deal

Smarter Retrieval: Agents actively decide the scope of retrieval, making it far more efficient and relevant.
Better Context: Multi-agent collaboration means complex queries can be broken into manageable tasks.
Real-Time, Personalized Responses: Perfect for dynamic applications like chatbots or recommendation engines.

Use Cases to Get You Inspired

How They Compare

	RAG	AI Agents	Agentic RAG
Focus	Real-time info retrieval	Autonomous decision-making	Combines both for dynamic solutions
Strengths	Accuracy, real-time data	Independence, task automation	Context-aware, multi-agent workflows
Limitations	No autonomy	No external data retrieval	Can be complex to implement

Why Agentic RAG Should Be on Your Radar

For developers, Agentic RAG isn’t just another buzzword—it’s a powerful framework that combines the best of both retrieval and autonomy. Whether you’re building a next-gen chatbot, a decision-making tool, or anything in between, this hybrid approach gives you the flexibility and intelligence to tackle real-world challenges.

Got ideas or questions? Let’s chat—I’d love to hear how you’d apply this in your projects

TinyMCE 7.7 Release Notes

Mrinalini Sugosh (Mrina) — Mon, 17 Mar 2025 16:36:45 +0000

TinyMCE 7.7 introduces improvements to premium features, usability enhancements, and bug fixes for a more reliable editing experience.

What's New and Improved?

Spell Checker (Self-hosted)

The Spell Checker paid feature now includes an updated Java-based server-side component to improve compatibility with modern application servers.

Updated Version: ephox-spelling.war updated to 2.128.3.
Server Compatibility Updates: Now supports Eclipse Jetty 9.4+, WebSphere Application Server (WAS) 8+, and Apache Tomcat 10+.
Deployment Change: Tomcat 10+ requires WAR files to be placed in the webapp-javaee directory instead of webapps.

For details, see Server-side component installation.

Updates to Premium Features

Comments

Mentions Fix: Adding a mention to an edited comment now correctly displays after saving.
Keyboard Shortcut Improvement: Pressing Cmd + Alt + M (Mac) or Ctrl + Alt + M (Windows) now focuses the reply text area instead of the comment.
UI Improvement: The comments panel header now has better visual separation from the body.
Change Event Dispatch: Editing or replying to a comment now correctly triggers a change event in the editor.
Comment Card Jump Fix: Large comment edits in Chrome no longer cause the sidebar to jump.
Kebab Menu Fix: Closing the kebab menu with the keyboard no longer triggers an editor blur event.

Comments Feature Documentation

Image Optimizer

Expanded File Support: .jfi and .jif images are now correctly recognized as valid formats.
Drag-and-Drop Fix: Dropping an image into a placeholder now ensures it appears in the correct location.
Error Message Improvement: The plugin now provides clearer messages when uploadcare_public_key is misconfigured.
Placeholder Border Visibility: The image upload placeholder border now correctly renders while loading.

Image Optimizer Feature Documentation

Export to PDF

Format Option Update: The exportpdf_converter_options now accepts lowercase values for format properties.

Export to PDF Feature Documentation

Export to Word

Watermark Support: Watermarks can now be added to exported Word documents.

Export to Word Feature Documentation

Advanced Typography

Language Fix: Corrected the spelling of Serbian and Ukrainian in the typography plugin.

Advanced Typography Feature Documentation

Enhanced Code Editor

Cursor Placement Fix: The cursor now appears in the correct position when opening the source code editor.

Enhanced Code Editor Feature Documentation

Revision History

New Restore Control Option: Added revisionhistory_allow_restore to control whether users can restore previous revisions.

Revision History Feature Documentation

Accessibility Checker

WCAG Compliance Fix: Validation error messages now use the correct color contrast in dark mode.

Accessibility Checker Feature Documentation

Improvements and Fixes in TinyMCE 7.7

TinyMCE 7.7 includes several improvements and fixes to enhance usability, accessibility, and stability. Keyboard focus has been improved for comment annotations inside images, and invalid notification types now default to info. The forceReadOnly option now supports a disabled state instead of read-only mode. Bug fixes include better keyboard navigation for size inputs, proper replacement of non-editable elements with the insertContent API, and consistent toolbar UI styling. MathML elements are now correctly preserved, anchor links in the Preview dialog navigate properly, and floating image captions no longer have alignment issues. Additionally, focus behavior has been refined for disabled elements, and keyboard navigation no longer gets stuck on the "More" toolbar button.

Known Issue

The Blockquote toolbar button tooltip currently lacks a Hebrew translation.

How to Get TinyMCE 7.7

New to TinyMCE?

Upgrading from TinyMCE 6 or 7?

Check out our Migration Guide for a seamless upgrade.

For support, contact our Customer Success Team via the support page.

We Value Your Feedback

Submit feature requests or vote on existing ones via the TinyMCE Roadmap.

Useful Links

Thank you for choosing TinyMCE! 💙
— The Tiny Team

5 AI Trends Shaping 2025: Breakthroughs & Innovations

Mrinalini Sugosh (Mrina) — Fri, 07 Feb 2025 03:37:26 +0000

The AI space is moving at an insane speed, with new models, architectures, and market dynamics changing almost every day. I simply can't keep up. So to sum it up, here’s what you need to know about the latest AI breakthroughs as of February 2025.

#1 - DeepSeek: More Than Just “Engineering Hacks”

DeepSeek has generated significant buzz, and while some critics dismiss their advancements as just engineering tweaks, their breakthroughs in AI efficiency and cost reduction are reshaping the field. By pushing the boundaries of floating-point precision and optimizing inference efficiency, they have set new standards in AI training and deployment. These innovations are not just small optimizations. They are redefining what’s possible in AI development, making high-performance models more accessible and cost-effective.

Source: DeepSeek surpassing ChatGPT as No 1 on the App Store

FP8 Training: By leveraging floating-point precision (FP8), DeepSeek dramatically lowered training costs, switching from 32-bit to 8-bit representation.
Optimized Key-Value Cache: This reduces inference latency, improving performance without excessive compute.
Advanced Mixture of Experts (MoE): DeepSeek took MoE to new heights, outperforming existing models in efficiency and cost-effectiveness.
Industry Impact: Every major AI lab is now evaluating similar techniques. This is real innovation, not just incremental improvements.

By lowering AI training costs and improving inference efficiency, DeepSeek is making high-performance AI more accessible for developers working on cutting-edge applications.

#2 - OpenAI's Operator & O3-Mini: 2 Big Announcements for AI Automation and Reasoning

AI is quickly evolving to not only generate content but to interact with the web in a more meaningful way. OpenAI’s Operator and O3-Mini are two innovations pushing the boundaries of practical AI applications. Operator is an AI agent that can autonomously navigate websites and execute user-defined tasks, making web-based automation more efficient and minimizing human intervention. This could have a profound impact on developers building AI-powered automation tools and web applications, allowing them to create smarter, more responsive systems.

Source:Sam Altman announcing Operator and Open AI Dev Day

Meanwhile, O3-Mini is proving to be a powerful yet cost-effective AI model. Early benchmarks indicate that it offers significantly better reasoning than Sonnet and is on par with R1. While Sonnet still holds an edge in coding tasks, O3-Mini’s affordability and versatility make it an attractive option for a wide range of applications.

Function Calling & Reasoning Mode: Developers can toggle between a high-reasoning mode for complex problems and a low-compute mode for quick answers.
40% the Price of GPT-4o: This model is being positioned as a high-performance yet cost-effective alternative, even exceeding O1, which is 10x the price.
Pricing Wars Incoming? With O3-Mini undercutting GPT-4o, will Anthropic and OpenAI lower prices to stay competitive? Developers now have more cost-effective access to advanced AI reasoning and automation tools, allowing them to build smarter, more efficient applications with fewer constraints on budget and computing power. This shift empowers innovation, making it easier to integrate powerful AI functionalities into a wider range of projects.

#3 - The OpenAI vs. DeepSeek Controversy

The battle between OpenAI and DeepSeek is heating up, raising critical questions about data usage, AI ethics, and fair competition. At the core of the dispute is OpenAI’s claim that DeepSeek leveraged its model outputs for training, sparking a larger debate about the very foundations of AI development. This conflict isn’t just a legal matter, it’s a glimpse into the broader struggle for dominance in the AI space and what the future of model training could look like.

Source: Open AI vs Deepseek Meme

OpenAI’s Claims: OpenAI and Microsoft suggest DeepSeek violated their TOS by using OpenAI-generated content for training.
The Irony? OpenAI (and every LLM company) built their models by scraping the internet under “fair use.” Now they’re calling foul when others do the same.
Massive GPU Power: Initial estimates suggested DeepSeek was working under US export restrictions, but new reports indicate they have over $500M worth of GPUs, possibly downplaying their real capabilities.

Despite the controversy, DeepSeek-V3 is proving to be a formidable competitor against closed-source leaders, excelling in math and coding benchmarks while remaining cost-efficient. These disputes are more than just corporate clashes; they underscore the fundamental ethical dilemmas surrounding AI development, data usage, and fair competition. As AI continues to evolve, developers must stay vigilant about policies that could shape the future of training and deployment. Ethical AI practices are no longer optional; they are essential for responsible innovation and sustainable progress in the industry.

#4 - Nvidia’s AI Empire: How Long Can It Last?

Nvidia has long been the backbone of AI infrastructure, but its so-called “reign” is facing new challenges. The landscape is shifting as emerging competitors bring fresh innovations, alternative AI hardware gains traction, and open-source frameworks weaken Nvidia’s stronghold. While Nvidia continues to push the boundaries with advancements like the Blackwell AI chip, the question remains: Can it maintain its dominance, or will the AI industry move toward a more diversified future?

Source: NVIDIA - Stock Decline by 13% in January

Cerebras and Groq are tackling Nvidia’s limitations with wafer-scale chips that remove bottlenecks and innovative compute approaches that challenge GPU reliance. Meanwhile, Apple, Google, and OpenAI are investing in custom AI chips to boost performance and reduce dependence on Nvidia, disrupting its long-held monopoly.
Nvidia’s CUDA dominance is fading as developers embrace open-source alternatives like Triton and JAX, offering more flexibility, cross-hardware compatibility, and reducing reliance on proprietary software.
DeepSeek’s efficiency breakthroughs are lowering AI training costs, making large-scale models more accessible while reducing reliance on Nvidia’s expensive GPUs, driving interest in alternative, cost-effective hardware solutions.
As I have seen it happen time and time again in tech, the companies that once fueled Nvidia’s growth are now its biggest challengers, with Google, Amazon, OpenAI, and Microsoft all developing custom AI chips to optimize performance and reduce reliance on Nvidia’s hardware, intensifying competition in the AI space.
At CES 2025, Nvidia introduced its GeForce RTX 50 Series GPUs with the Blackwell AI chip, promising major advancements in AI-driven graphics, real-time rendering, and deep learning performance.

While Nvidia strengthens its position, competitors are catching up. With new AI hardware and frameworks emerging, developers now have more options beyond Nvidia’s ecosystem. The future of AI processing is no longer Nvidia-dominated—it’s shifting toward greater diversity and competition.

#5 - The Stargate Project: AI’s Next Big Investment

Source: OpenAI announces Stargate

The Stargate Project is a bold initiative launched by OpenAI, Oracle, SoftBank, and MGX, with a staggering $500 billion investment aimed at transforming AI infrastructure. This project focuses on building cutting-edge data centers and power generation facilities to support the exponential growth of AI. By securing large-scale computing resources, Stargate is set to provide the necessary foundation for next-generation AI models, ensuring more efficient and scalable solutions for developers and enterprises alike.

With AI rapidly advancing across automation, efficiency, and computing power, developers are finding new ways to integrate these technologies into their workflows. From DeepSeek’s efficiency gains for LLMs and OpenAI’s Operator for Agents to the growing competition in AI hardware, these innovations are making AI more accessible, cost-effective, and powerful. As ethical considerations and competitive tensions rise, all developers must stay informed and adaptable to navigate this rapidly shifting space.

While keeping up with ALL these changes, I continue to explore how AI can enhance developer experiences and AI agentic experiences. For me, with rich text editors and web applications, I'm focused on helping developers build smarter, more intuitive content experiences that easily integrate AI and AI workflows.

I’m also hosting two hands-on workshops with Major League Hacking (MLH) on February 7 from 1-2 PM EST and Feb 12 from 9-10 AM EST to help full stack developers build with AI. These workshops will explore building apps in Angular and Laravel, connecting with AI APIs like OpenAI, and using AI as a pair programmer with Windsurf AI and Cursor AI editors. Whether you’re just starting out or looking to update your AI dev skills, this is a great opportunity to dive in, learn, and build with me.

Happy Coding!

From AI Hype to Personal Growth: Lessons Learned in 2024

Mrinalini Sugosh (Mrina) — Sat, 01 Feb 2025 18:17:29 +0000

This is a submission for the 2025 New Year Writing challenge: Retro’ing and Debugging 2024.

This is a submission for the 2025 New Year Writing challenge: Compiling 2025.

2024 was a year of upheaval and introspection, both for the tech industry and in my own life. With widespread layoffs, the 2024 election, benefit cuts, and a mounting AI race, the landscape felt increasingly disconnected from meaningful progress. Venture capital poured into costly AI innovations, often overshadowing deeper, real-world challenges.
I saw this quote recently on Twitter: “this year has, on some level, radicalized me,” and it resonated deeply as I navigated my professional journey, reflecting on the role of AI in reshaping not only our work but our priorities and values.

Professional Reflections

This year brought a whirlwind of releases at TinyMCE, including the significant decision to move TinyMCE 7.0 to a GPL license. This change reinforced our commitment to empowering the developer community by making the editor more accessible while maintaining its team, flexibility, and extensibility.
From the release of TinyMCE 7.0 with features like Enhanced Code Editor and AI Assistant to the rollouts of Document Converters, Markdown Support, and Revision History, there was no shortage of innovation to make the editor more collaborative than ever before. These efforts just came to show how enhancing the developer journey remains a top priority for 2025. Each of these updates was designed to make content creation simpler, faster, and more accessible for developers and end-users alike.

Presenting Typescript Fundamentals at Infobip Shift

On the community front, our DevRel team’s presence at global events like React Summit, We Are Developers, and Front End Nation gave us invaluable insights into how developers engage with RTEs. Interacting directly with developers reaffirmed my belief in working with products that solve real problems, not just cater to AI market trends.

Meetup after talk at DevWorld Amsterdam

While I’m proud of the work we accomplished by exceeding the goals we set at the beginning of the year, I’d be remiss not to acknowledge the areas where we fell short.
The push to deliver new content or projects sometimes came at the expense of deeper problem-solving. In hindsight, I would have advocated for slower, more thoughtful project rollouts that prioritize stability, feedback, and long-term value over deadlines.
Additionally, I’ve grown increasingly wary of the blind optimism surrounding AI in content creation, and going forward, I’d push for greater transparency about what AI can and cannot do, ensuring ethical and practical conversations about its implications and applications at work.

Personal Reflections

On a personal level, 2024 challenged me to reevaluate my priorities. Losing multiple family members last year was one of the most difficult challenges I’ve faced, and navigating that grief while being there for my family was both emotionally and mentally taxing. Balancing these responsibilities with a demanding career taught me the importance of resilience and choosing to be present for my loved ones during tough times.
It also reminded me of the importance of taking intentional breaks to reset and recharge. Travel became a much-needed way to gain perspective and step back from the frenetic pace of work.

Rest, Relax and Recover hike to Machu Picchu

Regular exercise also played a key role in maintaining both physical and mental health, serving as a counterbalance to the stress of the year. Reflecting on these practices, I’m setting clear intentions to prioritize self-care and create a healthier work-life balance moving forward.

Goals for 2025

As I reset and strategize for 2025, I’m setting goals to align my personal and professional growth with a more balanced, sustainable approach to life and work.

Professional Goals

**Deepen My Understanding of AI: **Learn more about AI technologies to create tools that enhance both team workflows and developer experiences. This includes exploring innovative ways to automate tasks, streamline processes, and derive actionable insights that improve content and marketing strategies.
Complete My Master’s Degree: Finish my graduate program with a focus on applying my learnings to real-world challenges in product marketing and development.
Expand Strategic Impact: Drive meaningful collaborations and refine strategies that prioritize developer needs and ethical AI practices.

Personal Goals

Travel More: Take time off to explore new places and recharge. Travel has always been a way for me to gain perspective and reset.
Exercise Regularly: Commit to working out at least five times a week to maintain physical and mental health.
Spend Quality Time with Family, Friends, and Home: Dedicate more time to being present with my loved ones, including my dog Nala, and focusing on creating meaningful moments.

Moving Forward

2024 has left me both proud and apprehensive; proud of the strides we made at my work, but deeply reflective on what it means to work in tech today. Moving into 2025, I’m committed to championing a more thoughtful, human-centered approach to developer relations and marketing.
This means doubling down on real-world impact, advocating for the teams I work with, and being unafraid to challenge industry norms that prioritize hype over substance. The lessons of this year are not just about building better products; they’re about fostering a better industry. And while I can’t change the tech landscape alone, I can’t think of a better place to start than now.

Humanity is What Makes AI Powerful: Predicting 2025

Coco Poley — Wed, 29 Jan 2025 13:38:13 +0000

This is a submission for the 2025 New Year Writing challenge: Predicting 2025.

The world's best creators and engineers have always needed editors and collaborators. From Da Vinci to J.R.R. Tolkien to Steve Jobs and beyond, every historic creative mind has needed help. An assistant, if you will. My prediction for tech in 2025 is that humanity is going to be more important than ever with the rise of Artificial Intelligence (AI). Why? There's a few reasons.

AI thrives on human guidance

AI systems are brilliant at executing specific tasks and can operate autonomously, while human input improves their effectiveness and application. Large Language Models like ChatGPT, or code-focused platforms like Cursor can maintain context across conversations while being driven from clear user direction and prompts. AI is only as powerful as the clarity of its instructions and the depth of its data sources.

In 2025, the relationship between humans and AI will deepen as we design custom integrations into specific technical processes, automate project management, and predict bugs before they happen. We will teach machines to augment our strengths while compensating for our weaknesses.

This collaboration aligns with a broader truth: writing by hand, for instance, enhances memory retention because it engages the mind and body in ways typing doesn’t. Similarly, interacting with AI stimulates strategic thinking, task prioritization, and decision-making—skills that are uniquely human.

With great power comes great responsibility

To leverage the great power of AI, it will be crucial for new processes to be guided by expert technical knowledge, and anchored in ethical oversight. Well-engineered AI tools excel at specific, focused tasks, from summarizing dense texts to debugging complex code. However, achieving these outcomes requires humans to provide context-rich prompts and strategic oversight.

But Artificial General Intelligence (AGI) is still years away. In the meantime, humanity’s ability to operate and innovate with AI will create a new wave of expertise: people fluent in "speaking AI."

More professionals will be fluent in AI in 2025

This year, we’ll see more resumes with machine learning expertise, cognitive computing development, and algorithmic programming on them. Detailed discussion and sharing how we use AI on a regular basis will replace the question, “What do you think of AI?” In the last few years, these technologies have seen an uptick in popularity. I predict that this year they will become the norm.

AI cannot replace true creativity

AI lacks the spark of imagination that defines human creativity. It can remix existing ideas, but it cannot dream in the way a person might while brainstorming solutions or crafting a story. Humans can draw inspiration from personal history, cultural context, and abstract thought. Machine intelligence, for all its efficiency, does not carry these lived experiences.

Major investments in custom AI in 2025

We have already seen some major investments in out-of-the-box AI tools in 2024. Generative AI usage jumped from 53% in 2023 to 75% in 2024 according to Microsoft’s IDC study, and that is just the beginning. The study also reported that within 24 months, businesses already using machine intelligence to drive their productivity will expand to create their own solutions. It’s not just about a free, quick AI tool anymore.

I predict that in 2025 we will see major financial, media, and retail organizations launch innovative, custom, interactive technologies to the public that are based on artificial intelligence.

The potential for AI in 2025 is limitless

AI has already transformed how we work. 2025 is the year we learn how to use these tools more effectively. Picture an intelligent system integrated into your workplace, spotting errors in data or automatically debugging broken code on a pull request. These advancements aren’t distant dreams. They’re the reality we’re shaping for 2025.

An explosion of AI related jobs in 2025

It’s easy to deduce that if there will be more organizations building custom AI solutions, and if there are more experts in the workforce, there will be an explosion of related jobs. From creators comfortable with AI generated content, to programmers writing neural networks, the spectrum of AI-related jobs will expand and grow rapidly this year.

Many jobs will become augmented and we’ll be working with these new tools. Mundane tasks will be taken over by custom automations and helpful agentic workflows. I predict that there will be a huge opportunity in the market for experts who are needed to work with AI tools as well as develop, and maintain these custom technologies we’ll see arrive in 2025.

AI's potential lies not in replacing human efforts but in amplifying them. By combining the precision of machines with the intuition of humans, we can address challenges more efficiently and creatively than ever before.

Wrap up: AI will achieve greatness with our help

In 2025, success in technology will depend not on AI alone but on the people who guide and refine it. The fast-fail methodology will thrive as teams experiment with new workflows, learning what works and iterating quickly. Those who embrace this partnership of balancing the creative and the computational will drive the next wave of innovation.

Ultimately, AI will not achieve greatness unless we do. By leaning into our strengths as people, embracing collaboration, and continuing to try new tools, we can stay in tune as the symbiosis of human intelligence and artificial capabilities defines the future of technology.

The What, the How, and the Why of JWTs

Mrinalini Sugosh (Mrina) — Tue, 28 Jan 2025 19:26:54 +0000

Security isn’t just a priority, it's one of the most important parts of web development today. Whether you’re building a SaaS platform, a collaborative editor, or even a cloud-based document management system, securely managing user authentication and access to resources is a fundamental challenge. That’s where JSON Web Tokens (JWTs) come in, providing a stateless, scalable way to handle authentication.
For example, TinyMCE’s Import from Word feature requires setting up JWT authentication to make sure that only authorized users can upload and manage Word documents. Without JWTs, it’s nearly impossible to enforce proper security in multi-user environments where sensitive documents might be handled. JWTs enable TinyMCE to offer a high quality user experience while maintaining strict security controls over file uploads.
JWTs aren’t just important for Rich Text Editors or web components; they’re widely used across web apps for their simplicity, flexibility, and stateless design. In this blog, we’ll walk through what JWTs are, how they work, and why they’re crucial for building secure, scalable auth systems.

What are JWTs?

JSON Web Token or JWT is a token that allows secure data transmission between web servers. It’s a lightweight, self-contained solution that helps manage authentication and authorization without the need for server-side session storage. It’s more secure than traditional session based user authorization, but how?

Traditional User Based Session vs JWT Session

In the traditional approach, when a user logs in, the server stores their information in a session and sends a session ID to the client as a cookie. That app then includes this cookie in all future requests which allows the server to identify and authorize the user. Each time the server receives a request, it has to retrieve and validate the session ID before responding.

Image Source

In the JWT approach, when the client requests access, the server generates a JWT containing user information and sends it back to the client. The server doesn’t need to store any user data—everything is stored in the token on the client side. For each future request, the client includes the JWT instead of the user information, and the server verifies the token’s signature to confirm the user’s identity before responding.

Image Source

What Makes a JWT Work?

At first glance, a JWT might look like a random mess of characters, but under the hood, it’s a well-structured token designed for secure data exchange.

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Let’s take a look at it this token the JWT debugger:

So here we see that the token is made up of 3 parts. The header, the Payload and the Signature:

Header – Contains metadata about the token, like the signing algorithm used.
Payload – This is where the actual data (e.g., user information) is stored.
Signature – This ensures the token hasn’t been tampered with.

Think of a JWT like a digital passport. The payload holds user-specific data, while the signature acts as a tamper-proof seal.

Why JWTs Matter for Stateless Authentication

Stateless authentication is crucial today. With JWTs, the server doesn’t need to maintain session data. Everything it needs to know is in the token. This makes JWTs perfect for scaling, especially when you’re dealing with microservices, serverless functions, or distributed systems where maintaining centralized session storage would be a nightmare. Remember, while JWTs are great for auth and data integrity, they’re not designed for data confidentiality. So if you need to transmit sensitive info, you’ll still need SSL/TLS and possibly encryption at the application level.

Common Pitfalls:

Token bloat – Keep the payload minimal. Don’t throw everything in just because you can.
Long-lived tokens – Short-lived tokens reduce the risk of exposure. For long-term sessions, consider using refresh tokens.
Insecure secret keys – Your secret key isn’t just a "key"; it’s the backbone of your token’s security. Use a long, complex, random string—no shortcuts.

JWTs are not just popular, they are also a practical solution for modern authentication challenges. Their stateless nature makes them ideal for scalable architectures, and when implemented correctly, they offer a clean, efficient way to manage user sessions without the need for server-side storage. But like any tool, they come with caveats. JWTs ensure data integrity, not confidentiality, so it’s on you to use them responsibly. Keep the payload light, avoid sensitive data, and always, always use a strong secret key.

At the end of the day, JWTs let you build faster, more scalable apps while keeping things secure. In a world where speed and security are everything, that’s a win-win.

TinyMCE 7.6 Release Notes - Introducing Image Optimizer powered by Uploadcare

Mrinalini Sugosh (Mrina) — Thu, 23 Jan 2025 19:33:47 +0000

TinyMCE 7.6 is here, introducing exciting new features and updates to enhance your editing experience! This release includes the debut of a powerful new premium plugin, Image Optimizer powered by Uploadcare, as well as significant updates to several existing plugins. All of these changes are aimed at improving functionality, accessibility, and user experience.

Our Engineering, Product, and Design teams have been working diligently, and we’re thrilled to share the latest updates with you! 😊

What's New and Improved?

New Premium Plugin: Image Optimizer

TinyMCE 7.6 introduces the Image Optimizer plugin, a powerful new tool for seamless image hosting, serving, and editing.

Key Features:

Responsive Image Delivery: Automatically serves images in optimal sizes for any device or platform.
Automatic Image Format Selection: Converts images to the best-suited format for performance and quality.
Automatic Compression: Compresses images without compromising quality.
Non-Destructive Transformations: Offers powerful tools for cropping, rotating, editing, and adjusting images.
Maintains Original Image: Secures the uploaded file via CDN so that users can revert to the original image at any time.
Offers Security and Compliance Rules: Built-in security and compliance keep all images safe for professional environments.

For more information, see Image Optimizer powered by Uploadcare Docs.

Updates to Existing Premium Plugins

Accessibility Checker

Enhanced usability and accessibility with several improvements, including:

Live Region for Screen Readers: Added a dedicated live region to improve dialog announcements, ensuring consistency across browsers.
Detailed Issue Descriptions: Displays content type and snippets of affected content for better context when navigating with screen readers.
Improved Content Highlighting: Updated color contrast for highlights to meet accessibility standards.

For more information, see Accessibility Checker Docs.

Checklist

Fixed a critical issue affecting checklist item responsiveness:

Alignment Issue Fixed: Checklist items now respond correctly to clicks, regardless of alignment (left, center, or right).

For more information, see Checklist Plugin Docs.

Comments

Introduced multiple enhancements for better collaboration:

Event Log Improvement: The commentAuthor property is now included in reply events for comprehensive tracking.
Mentions Dropdown Expansion: Mentions dropdown now flows outside the editor container for better usability.
Consistent Scrolling Behavior: Improved navigation between conversations in the sidebar with updated scrolling logic.
Improved Accessibility: Added tooltips to sidebar menu buttons and refined caret behavior in comment text areas.

For more information, see Comments Plugin Docs.

Enhanced Code Editor

Fixed the following issue:

Corrected Tooltip Text: Fixed a typo in the fullscreen toggle button tooltip.

For more information, see Enhanced Code Editor Docs.

Enhanced Skins & Icon Packs

Rebuilt to include updates introduced in the default TinyMCE 7.6 skin, Oxide.

For more information, see Enhanced Skins & Icon Packs.

How to Get Access to TinyMCE 7.6

New to TinyMCE?

Adding TinyMCE to your project is quick and simple! Sign up for your free cloud API key via our Pricing page. The API key includes a 14-day free trial of our most popular premium features.

Upgrading from TinyMCE 6?

Check out our Migration Guide for tips on updating your implementation to leverage the latest features.

For additional assistance, our Customer Success Team is here to help.

We Value Your Feedback

Let us know your thoughts! Submit feature requests or vote on existing ones via the TinyMCE Roadmap.

Useful Links

Thank you for choosing TinyMCE!

The Tiny Team

3 Myths, 3 Facts, and 3 Strategies to Scale Node.js Apps

Mrinalini Sugosh (Mrina) — Fri, 20 Dec 2024 16:20:46 +0000

Node.js has become a go-to solution for developers over the past decade, known for its ability to handle concurrent connections and power high-performance applications. From my experience working on Express projects with Rich Text Editors, I’ve seen firsthand how Node.js can transform content creation applications into scalable, customizable solutions. But here’s the big question: Is Node.js truly capable of scaling to support millions of users at an enterprise level?

The answer is yes—but the reality is far more nuanced. Node.js is designed to scale, but its performance at scale depends heavily on application architecture, optimizations, and your approach to managing system resources.

Myths About Node.js and High Traffic: What’s True and What’s Not?

When it comes to handling high traffic, Node.js often gets both praise and skepticism. Some devs say it’s a game-changer for real-time applications, while other devs argue it has limitations when scaling to millions of users. Let’s take a look at the common myths:

Myth 1: Node.js Can’t Handle High Traffic

The Reality: Node.js is built on an event-driven, non-blocking I/O model that actually allows it to manage thousands of concurrent connections with ease. Unlike traditional server architectures (Apache, PHP), which create a new thread for every request and quickly eat up resources, Node.js operates on a single thread, using an event loop to handle tasks asynchronously. This exact design is what minimizes resource usage and boosts scalability.

Myth 2: Node.js Is Just JavaScript and Lacks Power

The Reality: While Node.js runs on JavaScript, its power comes from Google’s V8 JavaScript engine, which compiles JavaScript into optimized machine code. This means Node.js isn’t just running scripts, it’s delivering performance comparable to compiled languages for many use cases.

Myth 3: Scaling Node.js Is Easy

The Reality: Node.js’ architecture is ideal for I/O-heavy tasks like API servers, chat apps, and real-time systems, but scaling to millions of users requires thoughtful planning and the right architecture. Techniques like load balancing, clustering, and optimizing system resources are key to making it work at scale.

The Facts About Node.js at Scale

After debunking myths let’s talk facts. Node.js has proven itself capable of powering high-performance, scalable applications, but scaling to millions of users is NOT without its challenges.

Fact 1: Node.js Relies on a Single-Threaded Model

Let’s start with the foundation of Node.js’ architecture. Its single-threaded, event-driven model is great for I/O tasks, which makes it efficient at handling multiple connections simultaneously. However, when it comes to CPU-intensive operations, this same model can become a bottleneck. Heavy computations on a single thread can block the event loop, causing delays in processing other requests.

While single threaded is a limitation, we should remember that Node.js also excels at handling multiple connections simultaneously because of its non-blocking I/O. To address the limitations of the single-threaded model, you can offload CPU-intensive tasks using worker threads or microservices, depending on the application’s architecture.

Fact 2: Memory Management Is Critical at Scale

As your application grows, managing resources becomes increasingly important. The fact is memory leaks can be a big problem for growing Node.js applications. They happen when resources, like objects or variables, don’t get properly cleaned up. Over time, this slows everything down or even causes the server to crash, especially when traffic spikes.
Adidas faced memory leaks in their Node.js systems, which caused performance problems as their user base grew. Aleksandar Mirilovic, Director of Software Engineering at Adidas, shared his experience in an article titled How to Find Production Memory Leaks in Node.js Applications. He found objects were being held in memory unnecessarily, which led to resource bloat.

How They Fixed It:

TL;DR: After trying and failing to reproduce the issue locally and in staging, Adidas captured heap snapshots directly from production. The root cause was traced to a Google reCAPTCHA library creating new gRPC connections for each request without closing them. Refactoring the code to use a single client instance fixed the issue, stabilized memory usage, and improved performance.

Fact 3: Scaling Across CPU Cores is not automatic

Once you’ve optimized for I/O and memory management, there’s another aspect of scaling to consider: hardware utilization. By default, Node.js runs on a single thread, which means it doesn’t automatically take advantage of all available CPU cores. For high-traffic apps, this can be a problem since a lot of your server’s processing power might go unused. Many developers don’t realize this, and without setting up something like clustering, they’re not getting the most out of their hardware.

You can use the Node.js cluster module to run multiple instances of your application, with each instance running on a separate CPU core. This distributes the workload across all available cores, so your app can handle more concurrent users, and have improved performance.

Strategies that Scale

Scaling Node.js to handle millions of users isn’t just about writing efficient code—it’s also about architecting an infrastructure that can grow with your user base.

Strategy 1: Load Balancing

A single server can only handle so much—it’s a hardware limitation. That’s where load balancing comes in. By spreading traffic across multiple servers, you can prevent bottlenecks and keep your app responsive. Without it, you risk downtime or sluggish performance during traffic spikes.

Just think of recent examples: ChatGPT users frustrated by crashes or Amazon shoppers greeted by pictures of cute dogs instead of product pages. Load balancing ensures smoother operations during demand surges. Tools like NGINX, HAProxy, or AWS Elastic Load Balancer can distribute requests evenly across Node.js instances, improving performance and adding redundancy so your app stays online even if a server goes down.

Strategy 2: Caching

Fetching the same data repeatedly from a database or external API can slow down your app and strain backend resources. Caching solves this by storing frequently requested data in memory, allowing your app to deliver faster responses and handle more traffic without breaking a sweat. Tools like Redis and Memcached are game-changers here, and real-world examples show just how impactful caching can be.

How Redis Is Used Across Industries:

E-commerce: Gap Inc. tackled slow inventory updates that frustrated shoppers by integrating Redis Enterprise. This reduced delays and provided real-time inventory information, even during Black Friday’s massive traffic spikes.
Fraud Detection: BioCatch, a digital-identity company, processes 5 billion transactions per month using Redis Enterprise. By caching behavioral data and API responses, they detect fraudulent activity in under 40 milliseconds, staying ahead of cyber threats.

Caching isn’t just about speed—it boosts reliability, reduces backend load, and prevents cart abandonment.

Strategy 3: Database performance

Even if caching is in place, the weak link in high-traffic applications is often database operations. Inefficient queries or poorly designed structures can slow everything down, leaving users frustrated and your app struggling to keep up. Caching is great for speeding up frequent requests, but your database still needs to handle the rest of the work efficiently—especially as traffic grows.

To handle high traffic more efficiently, you can make a few key improvements to your database. First, focus on fine-tuning your queries—this means simplifying SQL statements, getting rid of unnecessary operations, and adding indexes to speed things up.

For example, if your app frequently searches for a user_id, adding an index for that column can make the database find it much faster. Next, reduce the number of queries your app sends. Instead of making separate requests for user details and orders, combine them into a single query using joins. If your app handles a lot of traffic, you’ll need to scale by either sharding (splitting your schema architecture into smaller, more focused pieces of data) or setting up read-replicas to share the load of heavy read operations.

Still wondering if Node.js can handle the pressure?

It’s already powering some of the largest platforms in the world. LinkedIn transitioned from Ruby on Rails to Node.js, cutting their server count by 20x while supporting over 600 million users. Netflix relies on Node.js to manage millions of concurrent streams and deliver faster load times. Uber’s engineering stack uses its real-time capabilities to handle high volumes of ride requests seamlessly. And Walmart turned to Node.js to keep their systems running smoothly during Black Friday’s intense traffic surges.

With strategies like load balancing, caching, and database optimization, Node.js can handle even the most demanding workloads. Whether you’re building a global platform or scaling up to meet growing traffic, I am willing to bet that with Node.js you can truly create fast, dependable, and scalable applications.

TinyMCE 7.4 & 7.5 Release Notes - Overview

Mrinalini Sugosh (Mrina) — Tue, 17 Dec 2024 14:19:18 +0000

The latest updates to TinyMCE are here, bringing exciting new enhancements to streamline your editing experience and improve collaboration, accessibility, and customization. TinyMCE 7.4 and 7.5 introduce improvements to Comments, Templates, Export to Word, PDF, and Markdown plugins, alongside several bug fixes and usability enhancements.

Our Engineering, Product, and Design teams have been hard at work, and we’re excited to share the results with you! 😊

What's New and Improved?

Enhanced Collaboration with Comments

Mentions Support: Comments now allow user mentions using the @ symbol. Enable mentions with the tinycomments_mentions_enabled option.
Improved Event Tracking: The conversationAuthor property is now available in event logs, enhancing data retrieval for create events.
UI Updates: Streamlined comment management with a refreshed interface and a new "comments-only mode" for focused reviews.

Export to Word & PDF

Default Page Settings: Both Export to Word and PDF now default to U.S. letter page size with standard 1-inch margins, offering consistent formatting for documents.
Updated Plugin Configurations: Simplified plugin setup with new default options for better out-of-the-box usability.

Markdown Plugin

Improved Command Execution: The MarkdownInsert command is now asynchronous and immediately accessible at initialization, enhancing responsiveness.
New Event: A MarkdownInserted event fires upon command completion, enabling better post-insertion handling.

PowerPaste Plugin

Clipboard Compatibility: The mceInsertClipboardContent command now executes synchronously for plain text and is compatible with Markdown.

Read-Only Templates

Prevent accidental edits to template content with the new read-only feature while allowing customization in non-locked sections. This enforces content consistency across documents.

Accessibility Enhancements

Color Picker ARIA Support: Improved screen reader compatibility with updated aria-label placement and descriptive text.
Raw CSS Colors: The color_map_raw property now allows defining custom colors using raw CSS for greater flexibility in the color picker.

Bug Fixes

Improved Dialog Focus: Nested dialogs now return focus to the parent dialog after closing.
Keyboard Input Fixes: Resolved conflicts on German Mac keyboards for { input.
UI Consistency: Toolbar buttons and focus highlights now function correctly in read-only and fullscreen modes.
Markdown Compatibility: Addressed issues with autocompleter activation and PowerPaste synchronization.

How to Get Access to TinyMCE 7.4 & 7.5

New to TinyMCE?

Adding TinyMCE to your project is quick and simple! Sign up for your free cloud API key via our Pricing page. The API key includes a 14-day free trial of our most popular premium features.

Upgrading from TinyMCE 6?

Check out our Migration Guide for tips on updating your implementation to leverage the latest features.

For additional assistance, our Customer Success Team is here to help.

We Value Your Feedback

Let us know your thoughts! Submit feature requests or vote on existing ones via the TinyMCE Roadmap.

Useful Links:

Thank you for choosing TinyMCE!

- The Tiny Team

5 Essential HTML and CSS Tricks to Ditch JavaScript

Mrinalini Sugosh (Mrina) — Thu, 17 Oct 2024 13:41:29 +0000

Let’s talk about when not to use JavaScript and why HTML and CSS can often be the better tools for the job. This might sound counterintuitive—especially coming from a Javascript Developer—but it’ll make sense by the end, trust me!

I’m not anti-JavaScript. I write in it all day long for a Rich Text Editor. But over time, I’ve found that by using HTML and CSS for many tasks, I can actually make my code simpler, more maintainable, and often more performant. This approach is rooted in a core web development principle known as the rule of least power.

The Rule of Least Power

The rule of least power is simple: use the least powerful language suitable for the task. In web development, this means using HTML over CSS, and CSS over JavaScript wherever possible. The logic here is that:

HTML is declarative and lightweight, great for structuring content.
CSS is also declarative and used for styling, offering many layout and interaction options that don't need JavaScript.
JavaScript, while powerful, does introduce complexity, performance costs, and potential errors.

So let’s dive into some real-world examples, all of which are available in this GitHub repository, where you might have typically used JavaScript but can achieve better results with just HTML and CSS. These examples demonstrate how you can simplify your code while maintaining functionality and performance.

Example 1: Custom Switches (Checkboxes without JS)

We’ve all built custom switches. Usually, this involves a lot of JavaScript to handle clicks and toggle states. But here’s how you can build a fully functional, accessible switch using just HTML and CSS.

Github Repo

HTML

<label class="switch">
  <input type="checkbox" class="switch-input">
  <span class="switch-slider"></span>
</label>

CSS

/* The outer container for the switch */
.switch { 
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* The hidden checkbox input */
.switch-input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The visible slider (background) of the switch */
.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

/* The circle (slider button) inside the switch */
.switch-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

/* Pseudo-class that styles the switch when the checkbox is checked */
.switch-input:checked + .switch-slider {
  background-color: #2196F3;
}

/* Moves the slider button to the right when the switch is checked */
.switch-input:checked + .switch-slider:before {
  transform: translateX(26px);
}

This setup creates a fully functional switch without JavaScript, leveraging the :checked pseudo-class for styling changes.This pseudo-class targets the element (the checkbox) when it's in the "checked" state. It triggers the style changes for the switch, such as changing the background color and moving the slider button when the checkbox is toggled on.

Why This Is Better:

No JavaScript needed: Fewer moving parts, fewer chances for bugs.
Accessible out of the box: You get keyboard and mouse support automatically, making it easier to maintain.

Example 2: Auto Suggest with `<datalist>`

Autocomplete functionality is often done with a library or custom JavaScript. But with HTML’s <datalist> element, you can create an auto-suggest input with minimal effort.

Github Repo

HTML

<input type="text" list="suggestions" placeholder="Choose an option...">
<datalist id="suggestions">
  <option value="Open AI">
  <option value="Open Source">
  <option value="Open Source Software">
</datalist>

CSS

.container {
  width: 300px; 
  display: block; 
}

input {
  padding: 10px;
  font-size: 18px;
  width: 100%;
  box-sizing: border-box;
}

Here, the <datalist> provides a list of suggestions when the user starts typing in the text input. No need for JavaScript-based autocomplete libraries.

Why This Is Better:

Lightweight: It’s built into the browser, so it’s faster and more efficient.
Simple: No extra JS, dependencies, or complex logic needed.

Example 3: Smooth Scrolling with CSS

In a lot of websites, smooth scrolling on a webpage was handled with jQuery or custom JavaScript functions. But now, we can achieve this with a single line of CSS.

Github Repo

HTML

<nav>
  <a href="#section1">Go to Section 1</a>
  <a href="#section2">Go to Section 2</a>
  <a href="#section3">Go to Section 3</a>
</nav>

<!-- Section 1 -->
<section id="section1">
  <h2>Section 1</h2>
</section>

<!-- Section 2 -->
<section id="section2">
  <h2>Section 2</h2>
</section>

<!-- Section 3 -->
<section id="section3">
  <h2>Section 3</h2>
</section>

CSS

/* Basic styling for sections */
section {
    height: 100vh;
    padding: 20px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Different background colors for each section */
#section1 {
    background-color: lightcoral;
}

#section2 {
    background-color: lightseagreen;
}

#section3 {
    background-color: lightblue;
}

/* Styling for the navigation */
nav {
    position: fixed;
    top: 10px;
    left: 10px;
}

nav a {
    display: block;
    margin-bottom: 10px;
    text-decoration: none;
    color: white;
    padding: 10px 20px;
    background-color: #333;
    border-radius: 5px;
}

nav a:hover {
    background-color: #555;
}

When a user clicks on a section's anchor link, this ensures that the page scrolls smoothly to that section.

Why This Is Better:

Less Code: Achieve smooth scrolling with a single line of CSS instead of complex JavaScript, reducing code complexity.
Improved Performance: Native CSS scrolling is faster and more efficient than JavaScript-based solutions.
Browser Consistency: CSS ensures smooth scrolling works consistently across browsers and devices.

Example 4: Accordions using `<details>` and `<summary>`

Accordion menus are often built with JavaScript to toggle visibility of content. But HTML provides the <details> and <summary> elements that give us this functionality with no extra code.

Github Repo

HTML

<details>
  <summary>Click to toggle</summary>
  <p>This is some content!</p>
</details>

CSS

details {
  width: 300px;
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
  font-size: 18px;
}

summary {
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}

details[open] summary {
  color: #2196F3;
}

This simple markup gives us an interactive, accessible accordion that can open and close, without needing any JavaScript.

Why This Is Better:

Native: It’s a browser feature, so it’s faster and more reliable.
** Accessible:** The browser handles focus management and interaction patterns for you.

Example 5: Scroll-Triggered Animations with CSS

Animating elements based on scroll position is often done with JavaScript libraries. But with the scroll-margin property and scroll-behavior CSS, you can create smoother, more accessible animations.

Github Repo

HTML

<body>
     <!-- Navigation with anchor links -->
     <nav style="position:fixed; top:10px; left:10px;">
        <a href="#section1">Section 1</a>
        <a href="#section2">Section 2</a>
        <a href="#section3">Section 3</a>
        <a href="#section4">Section 4</a>
    </nav>

    <!-- Section 1 -->
    <section id="section1">
        <h2>Welcome to Section 1</h2>
    </section>

    <!-- Section 2 -->
    <section id="section2">
        <h2>Welcome to Section 2</h2>
    </section>

    <!-- Section 3 -->
    <section id="section3">
        <h2>Welcome to Section 3</h2>
    </section>

    <!-- Section 4 -->
    <section id="section4">
        <h2>Welcome to Section 4</h2>
    </section>
</body>

CSS

html {
    scroll-behavior: smooth;
}

/* Remove body margins */
body {
    margin: 0;
}

/* Full viewport height for sections with centered content */
section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    transition: background-color 0.6s ease-in-out;
}

/* Styling for headings */
section h2 {
    font-size: 36px;
    margin: 0;
    transition: transform 0.6s ease, opacity 0.6s ease;
    opacity: 0;
    transform: translateY(30px);
}

/* Add margin for scroll snapping */
section:nth-child(odd) {
    background-color: #ffcccb;
}

section:nth-child(even) {
    background-color: #d0e7ff;
}

/* Scroll-triggered animation */
section:target h2 {
    opacity: 1;
    transform: translateY(0);
}

Why This Is Better

No JavaScript required: You can achieve smooth scroll-triggered animations with just CSS.
Performance: Animations are handled natively by the browser, leading to smoother, more efficient transitions without the complexity of JavaScript.
Simpler to maintain: Using CSS reduces the need for complex JavaScript scroll-tracking logic, making the code easier to update and maintain.

There are plenty of cases where you can avoid the complexity of JavaScript entirely by using native browser features and clever CSS tricks.

As we see the rise of AI assistants in coding and Chat-Oriented Programming, the ability to adopt and enforce simpler, declarative solutions like HTML and CSS becomes even more crucial. AI tools can generate javascript code quickly. But leveraging HTML and CSS for core functionality ensures that the code remains maintainable and easy to understand, both by humans and AI. By using the least powerful solution for the job, you not only make your code more accessible but also enable AI to assist in a more efficient and optimized way.

HTML and CSS provide powerful tools for building interactive, accessible, and responsive web components—without the need for heavy JavaScript. So next time you’re tempted to reach for JavaScript, take a moment to consider if a simpler solution using HTML and CSS might work just as well, or even better.

Check out the Github repository for all the examples in the article. Also, check out the TinyMCE blog for insights, best practices, and tutorials, or start your journey with TinyMCE by signing up for a 14-day free trial today.

Happy coding!

10 HTML Features You Need to Know

Mrinalini Sugosh (Mrina) — Tue, 01 Oct 2024 16:53:38 +0000

Working with TinyMCE—a rich text editor (RTE) that directly interacts with the DOM and converts content into HTML—I've come to realize that HTML is more than just the basics like <div>, <p>, and <img>. There are several advanced features that can significantly enhance our web development projects, improving not only functionality but also accessibility and security. Unfortunately, many of us overlook these powerful tools. That's why I've put together a list of 10 HTML features you might not be usingm but should definitely consider incorporating into your work.

1. Template Element

I've found the <template> element incredibly useful for defining reusable HTML that isn't rendered until needed. It's great for managing dynamic content more efficiently. Since the content inside <template> isn't displayed until invoked, it can help reduce the initial page load and improve performance.

Example:

<template id="myTemplate">
    <div class="modal">
        <p>Template content goes here.</p>
    </div>
</template>

Security Tip: When I use the <template> element to inject content dynamically, I always ensure that the content is sanitized to prevent XSS (Cross-Site Scripting) attacks.

2. Mark Element

To highlight important text, I use the <mark> element. It's a simple but effective way to draw attention to key points in content. For users with assistive technologies, like screen readers, the <mark> element helps emphasize important information within the text.

Example:

<p>The term <mark>highlighted</mark> is important in this context.</p>

Accessibility Tip: The <mark> element is automatically announced by screen readers, so it's a good way to ensure key information isn't missed by users relying on these technologies.

3. Picture Element

When I want to ensure images are responsive and look great on all devices, I turn to the <picture> element. It allows me to specify multiple image sources, so I can serve the most appropriate one based on the user's device. It's essential for improving load times and user experience.

Example:

<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Responsive Image">
</picture>

Accessibility Tip: I always include the alt attribute for images, ensuring that all users can understand the content, even if they cannot see the image.

4. Details and Summary Elements

To create expandable content sections, I use the <details> and <summary> elements. They're perfect for FAQs or collapsible sections, helping keep web pages clean and user-friendly. These elements also enhance accessibility by allowing users to control the display of additional content without relying on JavaScript.

Example:

<details>
    <summary>More Information</summary>
    <p>This is the hidden content that will be revealed when you click on "More Information".</p>
</details>

Accessibility Consideration: The <details> and <summary> elements provide a semantic way to create collapsible content, ensuring that assistive technologies correctly interpret the relationship between the summary and the details.

5. Dialog Element

The <dialog> element is a native way to create modals without relying on external JavaScript libraries. I find it perfect for alerts, confirmation dialogs, or custom pop-ups. Beyond its ease of use, the <dialog> element is more accessible than many custom modal implementations, as it's designed with built-in focus management.

Example:

<dialog id="myDialog">
    <p>This is a modal dialog</p>
    <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>

Accessibility Consideration: The <dialog> element automatically manages focus when it opens, which is crucial for users navigating with a keyboard or screen reader.

6. Output Element

I use the <output> element to display results of calculations or user interactions directly within forms. It's a straightforward way to enhance form interactivity without heavy JavaScript and ensures that assistive technologies can correctly interpret the content.

Example:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" id="a" value="0"> +
    <input type="number" id="b" value="0">
    = <output name="result" for="a b">0</output>
</form>

Accessibility Consideration: The <output> element can be programmatically linked to form elements, allowing screen readers to announce the result as it changes.

7. Data Element

The <data> element helps me associate machine-readable values with human-readable content. This is particularly useful for SEO and making content more understandable for search engines, which can then present it more accurately in search results.

Example:

<p>Price: <data value="49.99">$49.99</data></p>

Security Note: When displaying data linked to backend systems, I ensure that the data presented is sanitized and free from vulnerabilities that could expose sensitive information.

8. Meter Element

If I need to represent a measurement within a known range, I use the <meter> element. Whether it's disk usage or progress tracking, it provides a clear, visual representation. The <meter> element is also accessible, offering an easy-to-understand display of numeric values for all users.

Example:

<meter value="70" min="0" max="100">70%</meter>

Accessibility Tip: I always provide context around the <meter> element, so that users with assistive devices understand what the measurement represents.

9. Time Element

To accurately represent dates and times, I use the <time> element. This not only makes content more accessible but also enhances how search engines interpret temporal data. It's especially important for screen readers.

Example:

<time datetime="2024-08-15">August 15, 2024</time>

Accessibility Tip: Using the datetime attribute provides a machine-readable format, which can be easily interpreted by assistive technologies.

10. Progress Element

The <progress> element lets me display the completion progress of tasks like downloads or submissions. It's a straightforward way to offer real-time feedback to users and ensures that assistive technologies can announce progress updates.

Example:

<progress value="70" max="100">70%</progress>

Accessibility Consideration: Pairing the <progress> element with an aria-label or similar attribute provides context to users of screen readers about what the progress represents.

I'd love to hear how these tips help improve your workflow. Want to explore more tips and enhance your content creation experience? Check out the TinyMCE blog for insights, best practices, and tutorials, or start your journey with TinyMCE by signing up for a 14-day free trial today!