Forem: CKEditor

DrupalCon Chicago 2026: How I vibe-coded my first custom Drupal module extending CKEditor

Ondřej Chrastina — Wed, 01 Apr 2026 14:58:57 +0000

I was at DrupalCon Chicago 2026, juggling booth duty, an AI Summit talk, and a Lightning Talk about CKEditor's contrib modules. But it's those hallway conversations that stick with you – and this time, the same question kept coming up.

"How do I customize CKEditor just a little bit?"

"Can I add my own button?"

"I want something specific to our workflow, but where do I even start?"

People knew what they wanted. They just didn't know how to get there.

So I grabbed Wojtek Kukowski – the main maintainer of the CKEditor Drupal modules (CKEditor 5 Plugin Pack and CKEditor 5 Premium Features), and asked him:

"What's actually required to make a CKEditor plugin extension for Drupal?"

He briefed me on the essentials: create a Drupal module that wraps a CKEditor plugin. And I thought: "Let me try to translate this into a prompt for Claude Code and include the official docs and see what happens."

The experiment

Setup

Drupal: 11.3.3.
Tool: Claude Code.
Goal: Create a Drupal module with a CKEditor 5 plugin from scratch.

The prompt (almost too simple)

I kept it minimal:

I would like to register a new module for Drupal based on the https://www.drupal.org/docs/develop/creating-modules information. I would like the module to be a CKEditor plugin https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/creating-simple-plugin-timestamp.html

If you are not sure, ask me.

That's it. Two documentation links and an invitation to ask questions.

What happened

Claude explored the codebase – I was prompting in the local project with CKEditor AI running. It found existing CKEditor modules (CKEditor 5 Plugin Pack and CKEditor 5 Premium Features in my case) and learned from their patterns.
Claude asked clarifying questions:
- What should the plugin do? (Insert timestamp.)
- What should the module be called? (ckeditor5_timestamp)
- Toolbar button or context menu? (Toolbar button.)
Claude created all the files – module metadata, CKEditor configuration, JavaScript plugin, PHP class. Everything.
Time: A couple of minutes.

Let me show you what it generated.

The files Claude created

All in ~/web/modules/custom/ckeditor5_timestamp.

Module metadata

The standard .info.yml that tells Drupal about your module:

name: CKEditor 5 Timestamp
type: module
description: "Adds a CKEditor 5 plugin that inserts the current timestamp at the cursor position."
package: CKEditor
core_version_requirement: "^10.1 || ^11"

CKEditor plugin definition

This is where the magic happens – the .ckeditor5.yml file that registers your plugin with Drupal's CKEditor integration:

ckeditor5_timestamp_timestamp:
  ckeditor5:
    plugins:
      - timestamp.Timestamp
  drupal:
    label: Timestamp
    library: ckeditor5_timestamp/timestamp
    toolbar_items:
      timestamp:
        label: Timestamp
    elements: false

JavaScript plugin

The actual CKEditor 5 plugin that creates the toolbar button and handles the timestamp insertion:

import { Plugin } from "ckeditor5/src/core";
import { ButtonView } from "ckeditor5/src/ui";

class Timestamp extends Plugin {
  init() {
    const editor = this.editor;

    editor.ui.componentFactory.add("timestamp", (locale) => {
      const button = new ButtonView(locale);

      button.set({
        label: "Timestamp",
        withText: true,
        tooltip: true,
      });

      button.on("execute", () => {
        const now = new Date();
        editor.model.change((writer) => {
          editor.model.insertContent(writer.createText(now.toString()));
        });
        editor.editing.view.focus();
      });

      return button;
    });
  }

  static get pluginName() {
    return "Timestamp";
  }
}

export default { Timestamp };

PHP plugin class

A minimal PHP class that extends Drupal's CKEditor plugin system:

<?php

declare(strict_types=1);

namespace Drupal\ckeditor5_timestamp\Plugin\CKEditor5Plugin;

use Drupal\ckeditor5\Plugin\CKEditor5PluginDefault;

/**
 * CKEditor 5 Timestamp plugin.
 */
class Timestamp extends CKEditor5PluginDefault {

}

The gotcha (there's always one)

I enabled the module, cleared the cache, added the button to a text format... and hit this:

CKEditorError: plugincollection-plugin-not-found {"plugin":null}
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-plugincollection-plugin-not-found

The problem

Drupal's CKEditor 5 uses a DLL (Dynamic Link Library) pattern – webpack-specific builds that register plugins to the global CKEditor5 variable. Raw ES modules don't work – plugins must be bundled and exported to the CKEditor5.[pluginname] namespace.

Drupal core is discussing an Import Maps API that might let browsers resolve ES module imports natively – no bundling to UMD required. If import maps land in Drupal core, you'll be able to write clean import { Plugin } from 'ckeditor5/src/core' statements and have the browser figure out the rest. Browser support for import maps is getting there too: Chrome 133+ and Safari already support multiple import maps, with Firefox ESR 153 expected around July 2026.

The fix

Claude created a properly bundled version in js/build/timestamp.js and updated the library configuration to point to it:

timestamp:
  js:
    js/build/timestamp.js: { minified: true }
  dependencies:
    - core/ckeditor5

Total additional time: About 2 minutes.

Voila! The timestamp button appeared in the toolbar, and clicking it inserted the current date and time.

What you get

Two files that can help you extend CKEditor:

SKILL.md – A comprehensive guide teaching Claude Code how to:
- Explore existing CKEditor implementations.
- Ask the right clarifying questions.
- Create all necessary files.
- Handle the DLL bundling requirement.
- Troubleshoot common issues.
PROMPT.md – A template you can customize:
- Replace the plugin requirements with yours.
- Specify your module name.
- Define the UI type you need.

How to use it

Install Claude Code: See the official documentation.
Put the files in your Drupal project.
Adjust PROMPT.md with your requirements:
- Plugin function: What should it do?
- Module name: your_module_name.
- UI type: Toolbar button, context menu, etc.
Ask Claude to run it:

Please create a CKEditor 5 plugin for Drupal following the SKILL.md approach using the requirements in PROMPT.md
Enable and configure:

   drush en your_module_name
   drush cr

Then configure the text format in Drupal admin to add your new button.

Try it yourself

My plugin was straightforward – a simple timestamp inserter. I'm curious how it works for you with more complex requirements.

Did it work on the first try?
What gotchas did you encounter?
How complex was your plugin?

You can check out the files like PROMPT.md and SKILL.md as well as the module files in the GitHub repository.

Beyond the plugin

How the SKILL.md and PROMPT.md came to be

The same "reverse engineering" approach I used for the webpack configuration also created the SKILL.md and PROMPT.md files. After Claude successfully built the plugin, I backtracked through its actions – what did it explore? What questions did it ask? What files did it create? – and distilled that into reusable instructions.

I do this whenever I need repeatable context. Instead of relying solely on a project-wide CLAUDE.md file, I create focused instruction files for specific tasks. The SKILL.md teaches Claude how to build CKEditor plugins; the PROMPT.md provides the what – the specific requirements for each new plugin.

CI for the build

Similarly, I asked Claude to generate a GitHub Actions workflow that builds the JavaScript on every push to main. If the bundled output changes, the action commits it automatically. This keeps the repository's js/build/timestamp.js in sync without manual intervention – useful for contributors who might not have Node.js set up locally.

Making it community-friendly

To make this repository truly accessible as a starting point, more work would be needed: proper documentation, contribution guidelines, issue templates, and licensing clarity. I maintain a template for this at os-guidelines – a checklist covering everything from repository naming to CI automation across different tech stacks. If you're publishing your own CKEditor plugin module, consider using it as a starting point.

Want to learn more?

Create your own plugin: Check out the CKEditor 5 plugin development guide for the full tutorial on building custom plugins from scratch. Once you're comfortable with the basics, explore more capabilities – toolbar customization, editor behavior hooks, and custom commands.
Try CKEditor AI: The AI capabilities have been in CKEditor since last year and are gaining adoption across the ecosystem. Drupal support landed just a week before DrupalCon – perfect timing! You can try the demo right in your browser, or grab a free 14-day trial to test it in your own Drupal installation.
Grab the code: All the files from this article – SKILL.md, PROMPT.md, the complete module, webpack config, and GitHub Actions workflow – are available in the GitHub repository.

Enjoy! And if you have any question - the comments section is yours, or find me up on Drupal Slack! 🥑

AI Conference 2025 - CKEditor in da house

Ondřej Chrastina — Tue, 07 Oct 2025 12:55:04 +0000

In the middle of September 2025, the CKEditor team attended The AI Conference in San Francisco. The team engaged with the vibrant AI community, connected with other leaders for potential integrations, and revealed news about the new CKEditor AI suite of capabilities 👻.

// Detect dark theme var iframe = document.getElementById('tweet-1968337657546813612-747'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1968337657546813612&theme=dark" }

I wanted to summarize the conference from the eyes of a developer advocate who has worked in the field for decades and has put particular focus on AI in recent months. Here you go...

Conference rundown

It was a busy two days filled with basically non-stop talking to people about CKEditor and CKEditor AI (😅 ohh I spoiled it already). The overall vibe was more on the business side: lots of CEOs, founders of AI startups, and business professionals. Developers? Probably less than 10% of attendees. Not the standard crowd for the developer advocate part of me, but very exciting for the AI enthusiast part.

The venue itself was unique. It was an old shed at Pier 39 (Google says Pier 48 - Lot #39). My guess is it was originally a boat storage or maintenance shed. We arrived to set up our booth the evening before the event: swag arrived on time, the booth looked good, and the stage and the venue were still getting ready. Still partly looking like a shed.

On the first day of the conference, we encountered a lot of excitement, but also a pinch of hesitance with AI advancing so quickly. Inside, the Pier was nice and shiny: almost unrecognizable from the evening before. The main corridor in the center included two stages on the sides, with the back lined with booths, and finishing with the main stage.

The morning flew by so quickly that we barely had time to grab breakfast or coffee. Lunch wasn’t much different. We had to take turns just to grab a bite. And right after, I went to deliver my talk (more about that in the next section).

Day two was quieter, but no less engaging. The slower pace meant more one-on-one conversations and deeper dives into what CKEditor AI can really do.

// Detect dark theme var iframe = document.getElementById('tweet-1968721785777451082-439'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1968721785777451082&theme=dark" }

The talk — why we went there

I gave a lightning talk during lunch and expected maybe 30 people casually eating. Instead, I ended up speaking to ~300 (my best guess from the photos). That was a surprise, but also a great opportunity.

The talk focused on the problem of “Bring Your Own AI” chaos (78% of knowledge workers bring their own AI tools) and how CKEditor AI solves it by offering a frictionless, unified AI writing stack inside any application.

Outline of the talk

The Bring Your Own AI (BYOAI) problem: copy/paste friction, compliance risks, and content inconsistency
What is CKEditor?
- Editor (customizable and framework-agnostic)
- Cloud services (including telemetry, logs, compliance, and on-prem or SaaS deployment)
- 🎉 CKEditor AI Early access announcement
The three AI surfaces:
- AI Chat: An AI writing assistant directly next to your editor
- Quick AI Actions: Sentiment analysis, proofreading, translation, repetitive tasks - anything you use repeatably
- AI Content Review: Handles complex use cases, offering help for suggestion-heavy workflows and advanced AI tasks
Real-world use case examples: Audits in regulated industries, marketing translations with disclaimers, and support ticket reply generation

Below is the exclusive preview of the talk (after a bit of post-processing):

🖼️ Slide deck 🔗

If you want to learn more, check out the CKEditor AI Landing page.

CKEditor 5 Pitfall: Don't Forget the Paragraph Plugin

Ondřej Chrastina — Mon, 23 Jun 2025 10:51:07 +0000

When you're adding CKEditor 5 to your platform, chances are you're starting simple—maybe testing in a sandbox project or integrating through the excellent CKEditor Builder, or diving into the CKEditor Framework Crash Course.

In my case, I tried both approaches:

Both are fantastic resources. However, there's one small but crucial detail that’s easy to overlook:
💡 You need two plugins to make even a minimal CKEditor 5 setup work:

Essentials

🚨 Paragraph (yes, it's not included in Essentials!)

ClassicEditor.create(element, {
    licenseKey: 'GPL',
    plugins: [
        Essentials, // * ✅ Essential
        Paragraph // 🚨 Paragraph 🚨 
    ]
});

The Pitfall: Only Using Essentials

It might seem like the following setup is enough:

// Import the editor.
import {
    ClassicEditor,
    Essentials,
} from 'ckeditor5';

// Import the styles.
import 'ckeditor5/ckeditor5.css';

// Get the HTML element with the ID of 'app'.
const element = document.querySelector('#app');

// Instantiate the editor using the `create` method.
const editor = await ClassicEditor.create(element, {
    licenseKey: 'GPL',
    plugins: [
        Essentials
    ]
});

The editor initializes, but nothing works—no content, no cursor, and no error messages either! 😱

Yes, the configuration on the image is slightly richer, but still behaves the same.

Take a look at this case:

“Are you missing something?”
Yes. Yes, you are!

YES, it is in the code docs

(alias) class Essentials
import Essentials
A plugin including all essential editing features. It represents a set of features that enables similar functionalities to a element.
It includes:

:ui/editorui/accessibilityhelp/accessibilityhelp~AccessibilityHelp,

:clipboard/clipboard~Clipboard,

:enter/enter~Enter,

:select-all/selectall~SelectAll,

:enter/shiftenter~ShiftEnter,

:typing/typing~Typing,

:undo/undo~Undo.

This plugin set does not define any block-level containers (such as :paragraph/paragraph~Paragraph). If your editor is supposed to handle block content, make sure to include it.

The Fix: Add the Paragraph Plugin 🎉

// Import the editor.
import {
    ClassicEditor,
    Essentials,
    Paragraph
} from 'ckeditor5';

// Import the styles.
import 'ckeditor5/ckeditor5.css';

// Get the HTML element with the ID of 'app'.
const element = document.querySelector('#app');

// Instantiate the editor using the `create` method.
const editor = await ClassicEditor.create(element, {
    licenseKey: 'GPL',
    plugins: [
        Essentials,
        Paragraph
    ]
});

And voilà:
“Much better!”

🧠 Key Takeaway

Essentials plugin ≠ has everything you need for editing.
For a working CKEditor instance, especially one with block content, add the Paragraph plugin.
Always double-check the docs—even for plugins that sound... well, essential.

Keep this in mind as you build your rich text editing experiences! 💡

Storybook Starter Guide: Learn Design System Principles

Vadim Smirnov — Fri, 28 Mar 2025 17:44:22 +0000

Run this in your terminal:

npm create storybook@latest

At first glance, it's a generic starter for a component library: a button, a header, and a few example stories. But underneath that simplicity lies something much more powerful — the foundation of a design system.

In this article, we’ll explore how Storybook’s starter is an introduction to core design system principles — reusability, composability, and consistency.

What is Storybook?

Storybook is an open-source tool for building and testing UI components in isolation. Think of it as a dedicated workshop where you can create, preview, and document components in every possible state without spinning up the full application.

But Storybook isn’t just a place to organize your UI components. In practice, it becomes a powerful platform that organizes frontend workflows by:

Letting you build and debug components without business logic getting in the way.
Supporting a wide range of frameworks like React, Vue, Angular, Svelte, and more.
Offering a natural cross-team collaboration workflow — designers, developers, and stakeholders can all review and work on components to deliver great quality user interfaces.

Whether you're crafting a single button or a complete design system, Storybook helps you move faster, stay consistent, and collaborate more effectively.

Benefits of Using Storybook

Now, let's address some more arguments in favor of using Storybook:

Visual Testing of Component States: Each story represents a specific state of a component. This makes it easier to notice edge cases and ensure a consistent look across the application.
Auto-Generated Docs: Autodocs turns your stories into complete, shareable documentation. Anyone on the team can explore usage examples, parameters, and behaviors. This is also a great point when onboarding new team members on the project.
Smooth Collaboration: Designers, product managers, and QA engineers can view and interact with components in the browser, leave feedback, and review changes even without technical knowledge of setting up a local environment.
Works Across Frameworks: Storybook supports React, Vue, Angular, Svelte, Web Components, and more, making it a good option for any team to avoid framework support limitations.
Trusted by Top Companies: The Washington Post, Shopify, NASA, and others rely on Storybook to power their UI workflows. It’s also the foundation behind popular component libraries like Chakra UI or Fluent UI.

Core Design System Principles in the Starter

Reusability

Reusability is a fundamental principle of any design system. It’s about creating abstract components that can be used in different use cases while maintaining a consistent look and feel.

Let's review the included Button component:

export const Button = ({
  primary = false,
  size = 'medium',
  backgroundColor,
  label,
  ...props
}: ButtonProps) => {
  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
  return (
    <button
      type="button"
      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
      style={{ backgroundColor }}
      {...props}
    >
      {label}
    </button>
  );
};

It might look basic, but out of the box, it has a good set of props:

Boolean prop primary to toggle variants
Props for size, color, and label

The stories for this component reinforce reusability:

export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
};

export const Secondary: Story = {
  args: {
    label: 'Button',
  },
};

export const Large: Story = {
  args: {
    size: 'large',
    label: 'Button',
  },
};

The story format encourages creating components in a Don’t Repeat Yourself (DRY), consistent manner.

Composability

Design systems aren’t just about single-use components — they’re about components that combine like LEGO blocks.

The Header component showcases this principle:

export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
  <header>
    <div className="storybook-header">
      <div>
        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="<http://www.w3.org/2000/svg>">
      ...
        </svg>
        <h1>Acme</h1>
      </div>
      <div>
        {user ? (
          <>
            <span className="welcome">
              Welcome, <b>{user.name}</b>!
            </span>
            <Button size="small" onClick={onLogout} label="Log out" />
          </>
        ) : (
          <>
            <Button size="small" onClick={onLogin} label="Log in" />
            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
          </>
        )}
      </div>
    </div>
  </header>
);

Here, we don't hardcode buttons that should be present in the header but reuse the existingButton component. This is how good design systems are built — small parts are assembled into larger elements.

Storybook makes it easier to follow this mindset by isolating each component. You focus on one piece at a time.

Consistency

Consistency is key in a design system — visually, behaviorally, and structurally. That can be achieved with design tokens.

The starter doesn’t include an implementation out of the box, but its architecture makes it easy to add one.

For example, at CKEditor, we use a hybrid approach — Syntactically Awesome Style Sheets (Sass) preprocessor and CSS variables:

$radius-medium: var(--app-radius-medium);
$radius-big: var(--app-radius-big);
$radius-bigger: var(--app-radius-bigger);

Then, we can define theme-specific values:

.app-theme-custom {
    --app-radius-medium: 4px;
    --app-radius-big: 7px;
    --app-radius-bigger: 15px;
}

Extending with Addons

One of Storybook’s biggest strengths is its ecosystem of addons. These allow tailoring a Storybook setup for more specific needs, such as testing the accessibility of your components.

With the accessibility addon, accessibility checks can be integrated directly into your component stories.

To enable it, start by installing the npm package:

npm install @storybook/addon-a11y --save-dev

Then register it inside your .storybook/main.js file:

module.exports = {
    addons: [
        ...,
        '@storybook/addon-a11y',
    ],
};

Once set up, every component story gets an Accessibility panel that performs automated audits. It highlights issues like missing labels, contrast problems, and more without leaving your development environment.

This addon serves as a perfect example of how you can extend Storybook beyond the basics.

The full list of available addons can be found on the Storybook Integrations page.

Final Thoughts

In this article, we explored the Storybook starter and its main concepts and features.

It introduces you to the core principles of a good design system:

Reusability
Composability
Consistency

It’s not code that is meant to be removed as soon as generated, but a foundation for your design system. Study, expand, and use it to create a design system that will help you create stunning user interfaces!

How to Detect Bot Traffic using Next.js Middleware: A Quick Guide

Vadim Smirnov — Fri, 28 Feb 2025 15:30:35 +0000

Bots make up a significant portion of internet traffic. Some, like Googlebot, are beneficial, while others — such as scrapers — can harm your site. In this article, we'll explore how to detect and block bots using Next.js Middleware.

What is Bot Detection and Why Does it Matter?

Not all web traffic is human. In fact, almost half of web traffic is automated. Bots can:

Scrape content
Spam your website
Slow down your app

Why Should You Implement Bot Detection?

From a security point of view, bot detection functionality is an essential part of the security toolset.

With bot detection, you can improve security by blocking malicious traffic, reduce server load by filtering unnecessary requests, and protect analytics accuracy by preventing bot traffic.

Since Next.js Middleware runs before a request is processed, it’s the perfect solution for implementing bot detection.

What is Middleware in Next.js?

Middleware in Next.js allows you to run code and execute logic before completing the request.

Additionally, Middleware can be run globally. However, you can modify this behavior for specific routes. It's important to mention that Middleware works really well with platforms like Vercel and Netlify.

How Next.js Middleware Works

Let's simplify the explanation by identifying key facts:

Middleware must be placed in the project root as a middleware.ts or middleware.js file depending if you are using TypeScript or not.
It automatically applies to all routes unless configured otherwise.
It uses the NextResponse to modify requests and perform specific actions like redirecting or rewrite

A Simple Middleware Implementation

Before we add bot detection, let's create a basic Middleware implementation to log requests. First, we need to create middleware.ts in the root directory.

For a basic implementation, our Middleware will do the following:

Log every incoming request in the terminal.
Pass the request through without modification.

import { NextResponse } from "next/server";

const EXCLUDED_PATHS = ["/_next/", "/static/"];
const EXCLUDED_EXTENSIONS = [".svg", ".js", ".css", ".ico", ".png", ".jpg", ".jpeg", ".gif", ".webp", ".woff2"];

export function middleware(req: Request) {
  const url = new URL(req.url);

  if (EXCLUDED_PATHS.some(path => url.pathname.startsWith(path)) || EXCLUDED_EXTENSIONS.some(ext => url.pathname.endsWith(ext))) {
    return NextResponse.next();
  }

  console.log(`Request received: ${req.url}`);
  return NextResponse.next();
}

Now, let's run our Next.js application to verify that our Middleware is functioning as expected.

Start your Next.js app by running the npm run dev in the terminal. Once you visit the localhost:3000 in the browser, check the terminal — you should see the following log there:

Request received: <http://localhost:3000/>

Extend Middleware with Bot Detection

Now, let's improve our Middleware to detect bot-like User-Agents. We can do that by updating middleware.ts with Bot Detection:

import { NextResponse } from "next/server";

const EXCLUDED_PATHS = ["/_next/", "/static/"];
const EXCLUDED_EXTENSIONS = [".svg", ".js", ".css", ".ico", ".png", ".jpg", ".jpeg", ".gif", ".webp", ".woff2"];
const BOT_PATTERNS = [/bot/i, /crawler/i, /spider/i, /curl/i, /wget/i];

export function middleware(req: Request) {
  const url = new URL(req.url);
  const userAgent = req.headers.get("user-agent") || "";

  if (EXCLUDED_PATHS.some(path => url.pathname.startsWith(path)) || EXCLUDED_EXTENSIONS.some(ext => url.pathname.endsWith(ext))) {
    return NextResponse.next();
  }

  if (BOT_PATTERNS.some(pattern => pattern.test(userAgent))) {
    console.log(`Bot detected! (${userAgent}) - Redirecting to /bot-detected.`);
    return NextResponse.redirect(new URL("/bot-detected", req.url));
  }

  console.log(`Request received: ${req.url} | User-Agent: ${userAgent}`);

  return NextResponse.next();
}

Let's review what changed in this version of our Middleware:

We extract the User-Agent header from the request.
Check if it matches one of the bot keywords (bot, crawler, spider, etc.).
Redirect detected bots to /bot-detected.
Log each request’s User-Agent for debugging.

Test the Middleware

Now, let's test our middleware using curl and simulate a bot request. Run the following in your terminal without stopping the Next.js application locally:

curl -i -A "Googlebot" <http://localhost:3000>

If you implemented the Middleware correctly, the following response will be visible in the terminal:

HTTP/1.1 307 Temporary Redirect
location: /bot-detected
Date: Mon, 24 Feb 2025 17:00:34 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Transfer-Encoding: chunked

/bot-detected

As you can see, the bot detection works!

Review of Common Bot Detection Techniques

Now that our basic bot detection Middleware works, let’s explore some common techniques.

User-Agent Header Checking

This is the solution that we implemented as a simple demonstration of bot detection.

It was very straightforward and was great for demo purposes. However, many bots use agents similar to real users, which makes this approach sub-optimal for real-life applications.

IP Address Filtering

This approach can be more effective in filtering and can be applied to real-life, production-ready applications. However, you can't rely on an array of addresses you manually gathered, so you must use anAPI that analyses IP.

That approach offers better protection but may be ineffective for more advanced bots.

Third-Party Bot Detection APIs

Building on the previous approach, if we want enterprise-grade protection, a complete dedicated bot detection service like BotD or DataDome is the most solid means that guarantees high detection accuracy.

While these solutions are not free, they are good enterprise-level solutions for production-ready applications.

If you want to get started with one of the solutions that were mentioned above, Vercel provides starter projects that allow you to see both of them in action:

Conclusion

Bots can have a huge impact on your website, from content scraping and spam to security risks and performance issues. Fortunately, Next.js Middleware provides an efficient way to filter out unwanted traffic before it reaches your app.

While basic bot detection is a great starting point, bots can bypass simple User-Agent checks. If you need stronger protection, consider third-party services like BotD or DataDome to detect even the most advanced bots.

Now, it's time for you to find the optimal solution for your needs!

Create a Rich Text Editor with Astro, Preact & CKEditor 5

Vadim Smirnov — Thu, 06 Feb 2025 12:46:47 +0000

Astro is a modern framework designed for ultra-fast performance by shipping only the JavaScript that's needed. Pair that with Preact, a lightweight alternative to React, and you’ve got the perfect recipe for building fast and efficient applications. To take things a step further, you can integrate CKEditor 5, a powerful rich text editor, to add robust content editing capabilities to your app.

In this article, we’ll walk you through the process of setting up an Astro + Preact project from scratch and show you how to seamlessly integrate CKEditor 5. Let’s dive in!

Why Choose Astro + Preact?

Astro:

Minimal JavaScript by default: Astro ships only what’s necessary to the client.
Perfect for content-focused websites: Ideal for blogs, documentation sites, and other projects where performance matters but also suitable for more complex and dynamic applications.
Framework flexibility: Supports popular frameworks like React, Preact, Vue, Svelte, and Solid.

Preact:

Extremely lightweight: Just ~3 kB gzipped, making it an excellent choice for performance-conscious projects.
React ecosystem compatibility: Most React libraries work seamlessly with Preact.
Fast and efficient: A great way to build modern, fast applications.

By combining Astro’s performance-first approach with Preact’s lightweight design, you get the best of both worlds: a highly-performant app and a pleasant developer experience.

Why CKEditor?

CKEditor is a powerful, flexible, rich text editor that enhances content creation and collaboration.

Fast & Efficient: Great writing experience with autoformatting, merge fields, and text transformation.
Complete Toolset for Collaboration: Real-time co-editing, track changes, and comments.
Flexible & Customizable: Over 100 plugins are configurable toolbar are available with CKEditor

Integrating CKEditor into Astro + Preact starter will allow you to build complex applications with excellent performance and feature-rich editing experience for various use cases.

Setting Up Your Astro + Preact Project

Here’s how to go from zero to a fully functional Astro + Preact project with CKEditor 5.

Step 1: Create a New Astro Project

First, let’s create a fresh Astro project. Open your terminal and run:

npm create astro@latest

Follow the CLI’s prompts to set up your project. Astro’s installation process is straightforward and beginner-friendly.

Step 2: Add Preact to Your Astro Project

Once your Astro project is set up, it’s time to integrate Preact. Astro provides a simple way to add Preact to your project:

npx astro add preact

This command automatically updates your configuration files and installs the necessary dependencies. With just one command, Preact is ready to go!

Step 3: Generate Your CKEditor Code

CKEditor 5 is a flexible and customizable rich text editor. To add it to your project, use the CKEditor 5 Builder. Here’s how:

Select the preset: Start with the Classic Editor (starter) for a simple yet powerful editor.
Enable features: CKEditor offers over 100 plugins. Pick the features you need (e.g., bold, italic, link) and decide between free or premium options.
Configure the toolbar: Customize the toolbar layout to match your requirements.
Generate code snippets: Choose React as the technology and Cloud (CDN) as the integration method. If you’ve selected only free features, your code snippet will include a 24-hour evaluation key; alternatively, press the Sign up for trial button to create a license key and automatically propagate it in your code snippets. If you have issues, refer to License key set up documentation.

Step 4: Integrate CKEditor 5 into Your Project

Now let’s integrate CKEditor 5 into your Astro + Preact project.

1. Install CKEditor’s React Package

Install CKEditor’s React package using npm:

npm install @ckeditor/ckeditor5-react

2. Add CKEditor Styles

Create a styles folder in your project and add a file named App.css. Paste the styles provided by the CKEditor Builder into this file:

@import url('<https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap>');

@media print {
    body {
        margin: 0 !important;
    }
}

.main-container {
    font-family: 'Lato';
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.ck-content {
    font-family: 'Lato';
    line-height: 1.6;
    word-break: break-word;
}

.editor-container_classic-editor .editor-container__editor {
    min-width: 795px;
    max-width: 795px;
}

3. Create an Editor Component

Create a file named editor.jsx in the components folder. Here’s the component code, slightly modified for Preact:

import { useState, useEffect, useRef, useMemo } from 'preact/hooks';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import './App.css';

const LICENSE_KEY = 'YOUR_LICENSE_KEY_HERE';

export default function Editor() {
    const editorContainerRef = useRef(null);
    const editorRef = useRef(null);
    const [isLayoutReady, setIsLayoutReady] = useState(false);
    const cloud = useCKEditorCloud({ version: '44.1.0' });

    useEffect(() => {
        setIsLayoutReady(true);

        return () => setIsLayoutReady(false);
    }, []);

    const { ClassicEditor, editorConfig } = useMemo(() => {
        if (cloud.status !== 'success' || !isLayoutReady) {
            return {};
        }

        const { ClassicEditor, AutoLink, Autosave, Bold, Essentials, Italic, Link, Paragraph } = cloud.CKEditor;

        return {
            ClassicEditor,
            editorConfig: {
                toolbar: {
                    items: ['bold', 'italic', '|', 'link'],
                    shouldNotGroupWhenFull: false
                },
                plugins: [AutoLink, Autosave, Bold, Essentials, Italic, Link, Paragraph],
                initialData:
                    '<h2>Evaluation license key 🔑</h2>\\\\n<p>\\\\n\\\\tAn evaluation key is being used in this editor. <a href="<https://portal.ckeditor.com/checkout?plan=free>">\\\\n\\\\t\\\\tCreate an account to use your own license keys.\\\\n\\\\t</a>\\\\n</p>\\\\n\\\\n<h2>Congratulations on setting up CKEditor 5! 🎉</h2>\\\\n<p>\\\\n\\\\tYou\\\\'ve successfully created a CKEditor 5 project. This powerful text editor\\\\n\\\\twill enhance your application, enabling rich text editing capabilities that\\\\n\\\\tare customizable and easy to use.\\\\n</p>\\\\n<h3>What\\\\'s next?</h3>\\\\n<ol>\\\\n\\\\t<li>\\\\n\\\\t\\\\t<strong>Integrate into your app</strong>: time to bring the editing into\\\\n\\\\t\\\\tyour application. Take the code you created and add to your application.\\\\n\\\\t</li>\\\\n\\\\t<li>\\\\n\\\\t\\\\t<strong>Explore features:</strong> Experiment with different plugins and\\\\n\\\\t\\\\ttoolbar options to discover what works best for your needs.\\\\n\\\\t</li>\\\\n\\\\t<li>\\\\n\\\\t\\\\t<strong>Customize your editor:</strong> Tailor the editor\\\\'s\\\\n\\\\t\\\\tconfiguration to match your application\\\\'s style and requirements. Or\\\\n\\\\t\\\\teven write your plugin!\\\\n\\\\t</li>\\\\n</ol>\\\\n<p>\\\\n\\\\tKeep experimenting, and don\\\\'t hesitate to push the boundaries of what you\\\\n\\\\tcan achieve with CKEditor 5. Your feedback is invaluable to us as we strive\\\\n\\\\tto improve and evolve. Happy editing!\\\\n</p>\\\\n<h3>Helpful resources</h3>\\\\n<ul>\\\\n\\\\t<li>📝 <a href="<https://portal.ckeditor.com/checkout?plan=free>">Trial sign up</a>,</li>\\\\n\\\\t<li>📕 <a href="<https://ckeditor.com/docs/ckeditor5/latest/installation/index.html>">Documentation</a>,</li>\\\\n\\\\t<li>⭐️ <a href="<https://github.com/ckeditor/ckeditor5>">GitHub</a> (star us if you can!),</li>\\\\n\\\\t<li>🏠 <a href="<https://ckeditor.com>">CKEditor Homepage</a>,</li>\\\\n\\\\t<li>🧑‍💻 <a href="<https://ckeditor.com/ckeditor-5/demo/>">CKEditor 5 Demos</a>,</li>\\\\n</ul>\\\\n<h3>Need help?</h3>\\\\n<p>\\\\n\\\\tSee this text, but the editor is not starting up? Check the browser\\\\'s\\\\n\\\\tconsole for clues and guidance. It may be related to an incorrect license\\\\n\\\\tkey if you use premium features or another feature-related requirement. If\\\\n\\\\tyou cannot make it work, file a GitHub issue, and we will help as soon as\\\\n\\\\tpossible!\\\\n</p>\\\\n',
                licenseKey: LICENSE_KEY,
                placeholder: 'Type or paste your content here!'
            }
        };
    }, [cloud, isLayoutReady]);

    return (
        <div className="main-container">
            <div className="editor-container editor-container_classic-editor" ref={editorContainerRef}>
                <div className="editor-container__editor">
                    <div ref={editorRef}>{ClassicEditor && editorConfig && <CKEditor editor={ClassicEditor} config={editorConfig} />}</div>
                </div>
            </div>
        </div>
    );
}

Step 5: Adjust Astro for Preact Compatibility

To make React libraries (like CKEditor 5 integration package) work in a Preact environment, update your astro.config.mjs file as follows:

import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';

export default defineConfig({
  integrations: [preact()],
  vite: {
    resolve: {
      alias: {
        react: 'preact/compat',
        'react-dom': 'preact/compat',
      },
    },
  },
});

Step 6: Add the Editor to Your Page

Finally, import the Editor component in your Astro page and render it using the client:only="preact" directive:

---
import Layout from '../layouts/Layout.astro';
import Editor from '../components/editor';
---

<Layout>
  <Editor client:only="preact" />
</Layout>

Once completed, you will be able to see the editor on the page:

Wrapping Up

Congratulations! You’ve successfully set up an Astro + Preact project and integrated CKEditor 5 into it. Here’s a quick recap of the key benefits of the created setup:

Minimal JavaScript Thanks to Preact: Preact keeps your application lightweight by reducing the shipped JavaScript, resulting in faster load times and improved performance, especially on content-focused websites.
Powerful React Compatibility: Since Preact is compatible with most React libraries and components, you can easily integrate React libraries while benefiting from Preact’s smaller footprint.
Great Developer Experience: Astro’s flexibility and Preact’s simplicity allow for a scalable setup with reusable components, making development more efficient and easier to maintain.
Powerful Editing Tool: CKEditor 5 enhances content creation with rich text formatting, real-time collaboration, media embedding, and an extensive plugin ecosystem, giving users a professional-grade editing experience.

This setup offers incredible performance while maintaining a great developer experience.

If you’d like to extend your CKEditor setup, check out the following resources:

CKEditor demo pages to get inspiration
CKEditor 5 features to get a high-level understanding of what is available with CKEditor
CKEditor Documentation to go deeper and see how you can customize not only the editor setup but also the plugin's behavior

Let us know in the comments what plugins or configurations you’ve used! 🚀

Building a Measuring Tool with the Resize Observer API

Vadim Smirnov — Fri, 20 Dec 2024 18:03:45 +0000

Web APIs - a very interesting and rarely well explored territory. And yet, there's a large number of unique and very useful APIs that can help you to create tools for your projects.

For example, tracking size changes is key to creating dynamic, responsive experiences. This is where the Resize Observer API comes in.

In this article, we’ll build a measuring tool that displays the width and height of a resizable box in real-time. This is a project that demonstrates the power of the Resize Observer API and Browser APIs in general in a practical and interactive way.

What is the Resize Observer API?

The Resize Observer API is a browser feature that allows you to detect changes to the size of an element. Resize Observer works on individual elements. It works out-of-the-box, and can be a great addition to your toolset for building responsive design and dynamic UIs.

Here’s what makes it great:

It’s lightweight and easy to use
You can track changes in size for specific elements, not just the entire viewport
It’s perfect for building responsive components or resizable widgets

What We’re Building

We’ll create a resizable box with dimensions displayed inside of it. As the user resizes the box, the displayed dimensions will update in real time.

Step 1: Setting Up the Project

First, let’s set up the basic structure for our project:

resize-tool/
├── index.html
├── styles.css
├── script.js

Step 2: The Markup

Here’s a simple layout for our app. The resizable box includes a text span to display its dimensions:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Measuring Tool with Resize Observer API</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div id="resizableBox" class="resizable">
      <span id="dimensions">Width: 0px, Height: 0px</span>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

Step 3: Styling the App

We’ll add some styles to make the resizable box more visually appealing:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f0f0f0;
}

.container {
  position: relative;
  width: 80%;
  height: 80%;
}

.resizable {
  position: absolute;
  width: 300px;
  height: 200px;
  border: 2px dashed #007bff;
  background: rgba(0, 123, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  resize: both;
  overflow: auto;
}

 .resizable span {
  background: white;
  padding: 5px;
  border-radius: 4px;
  font-size: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Step 4: Adding Real-Time Resize Tracking

Now let’s bring the project to life using the Resize Observer API:

const resizableBox = document.getElementById('resizableBox');
const dimensions = document.getElementById('dimensions');

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    const { inlineSize: width, blockSize: height } = entry.borderBoxSize[0];
    dimensions.textContent = `Width: ${Math.round(width)}px, Height: ${Math.round(height)}px`;
  }
});

resizeObserver.observe(resizableBox);

Step 5: Testing the Tool

Open the index.html file in your browser.
Drag the corners of the box to resize it.
Watch as the dimensions update instantly!

How It Works

The Resize Observer API is initialized to monitor size changes for the resizableBox element. It triggers a callback whenever the size of the observed element changes.
The Resize Observer Entry provides updated dimensions through the borderBoxSize property.
The updated width and height values are extracted and displayed dynamically by modifying the text content of the <span> element inside the resizable box.

Conclusion

In this tutorial, we built a fun and interactive measuring tool using the Resize Observer API. This project demonstrates how browser APIs can simplify complex tasks.
If you try this out or extend it further, feel free to share your creations in the comments!
Also, check out the CKEditor blog for articles around rich-text editors, and start your journey with CKEditor 5 by signing up for a free trial today!

OpenAI vs AWS Bedrock vs Azure Open AI - Choosing the right model for your AI Assistant

Mrinalini Sugosh (Mrina) — Mon, 13 May 2024 04:07:33 +0000

In the fast-paced world of AI development, choosing the right platform can significantly influence the efficiency, scalability, and success of your projects. Adding to this complexity is the integration of powerful editing tools like CKEditor 5's AI Assistant, which supports all three major AI platforms: OpenAI, AWS Bedrock, and Azure Open AI. This feature enhances editing efficiency and creativity by allowing users to generate content, process data with custom queries, or utilize predefined commands — all within the editor itself. Note that this is a premium feature, requiring an additional license on top of the CKEditor 5 commercial license.

📊 Comparison Chart
To put these frameworks into perspective, consider the following attributes:

Feature	OpenAI	AWS Bedrock	Azure Open AI
Language Support	Python, JavaScript	Python, Java, Go	Python, .NET, Java
Integration Ease	High	Medium	High
Scalability	High	Very High	High
Pre-trained Models	Extensive	Limited	Extensive
Custom Model Training	Yes	Yes	Yes
Pricing	Pay-as-you-go	Subscription-based	Pay-as-you-go

🚀 OpenAI

OpenAI provides a robust suite of AI models like GPT and DALL-E, known for revolutionizing natural language processing and image generation. It's celebrated for easy integration and generating human-like text. Here’s how you can use OpenAI's GPT model:

import openai

openai.api_key = 'your-api-key'
response = openai.Completion.create(
  engine="text-davinci-002",
  prompt="Translate the following English text to French: 'Hello, how are you?'",
  max_tokens=60
)
print(response.choices[0].text.strip())

🌐 AWS Bedrock

AWS Bedrock, part of Amazon Web Services, is designed to provide developers with scalable and integrated tools to build, train, and deploy machine learning models. AWS Bedrock emphasizes security and flexibility, supporting a wide array of machine learning frameworks like TensorFlow and PyTorch. Below is an example of deploying a machine learning model with AWS Bedrock:

import boto3

# Initialize the Bedrock client
bedrock = boto3.client('bedrock')

# Deploy a model
response = bedrock.deploy_model(
    ModelName='your-model-name',
    MinCapacity=1,
    MaxCapacity=10
)
print("Deployment status:", response['Status'])

🔵 Azure Open AI

Microsoft’s Azure Open AI service integrates OpenAI's powerful models with Azure's robust cloud infrastructure, offering enhanced security, compliance, and enterprise-grade capabilities. It is particularly useful for organizations that require deep integration with other Azure services. Here’s how you might set up a request to Azure Open AI:

from azure.ai.textanalytics import TextAnalyticsClient
from azure.identity import DefaultAzureCredential

client = TextAnalyticsClient(endpoint="https://<your-endpoint>.cognitiveservices.azure.com/",
                             credential=DefaultAzureCredential())

documents = ["Let's analyze the sentiment of this text."]
result = client.analyze_sentiment(documents)

for doc in result:
    print("Document Sentiment:", doc.sentiment)

In Summary

Each platform offers unique strengths:

OpenAI is ideal for developers looking for state-of-the-art language models and simplicity in integration.
AWS Bedrock suits those who need a robust, secure environment with the flexibility to work with various ML frameworks.
Azure Open AI is best for enterprises that require deep integration with other Azure services and enhanced regulatory compliance.

Integrating these AI platforms with CKEditor 5's AI Assistant can significantly boost your content creation capabilities, offering seamless support for generating and editing content directly within your applications. This premium feature can transform how you interact with text, combining AI's power with user-friendly editing tools. Don't forget to sign up for the CKEditor Premium Features 30-day free trial to test these capabilities. Whether you're building simple chatbots or complex, scalable AI solutions, choosing the right framework can pave the way for innovation and efficiency.

How to upload different media types in ckEditor5 using custom upload Adaptor

Amir Najafi — Thu, 18 Jan 2024 22:30:39 +0000

hello my fellow developers 🙌

One of the main issues when dealing with WYSIWYG editors is uploading media (audio, video, image, etc.)
there are always limitations on how to upload certain media and of course developers have come up with professional solutions that might help you in managing your files (tools like CKBox), but what if you just want to use your personal custom editor for a change?

Step 1: Create a Nextjs project

to begin, open the terminal and run the following command:
npx create-next-app

you can also activate Typescript, ESlint and other options if you intend to use them in your project.

Step 2: Create a custom build

you can choose your own ckeditor5 toolbar and plugins by going to CKEditor Online Builder and download the package.
unzip it and then copy the folder into your project's src folder and change these lines in ckeditor5/build/ckeditor.js

acceptedType:r.map((t=>`image/${t}`)).join(","))

to:

acceptedType:'*'

i=Array.from(n).filter((t=>s.test(t.type)))

i=Array.from(n)

and finally run npm install file:src/ckeditor5

you should now see ckeditor5-custom-build in your package.json

you should also install ckeditor package for react
npm install @ckeditor/ckeditor5-react"

step 3: Add editor to page

make a new folder inside app directory and rename it to blog.
then create a page.tsx and CustomEditor component:

// CustomEditor.js
import { CKEditor } from '@ckeditor/ckeditor5-react'
import Editor from 'ckeditor5-custom-build'
import axios from 'axios'

// upload Adaptor
function uploadAdapter(loader) {
  return {
    upload: () => {
      return new Promise((resolve, reject) => {
        const fd = new FormData()
        loader.file.then((file) => {
          // here check the mimetype and send request
          // to relevant backend api endpoint
          axios
            .post(`https://sample.com/files/${endPoint}`, fd)
            .then((res) => {
              resolve({
                default: res.data[0].fileAddress
              })
            })
            .catch((err) => {
              reject(err)
            })
        })
      })
    },
  }
}

function uploadPlugin(editor) {
  editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
    return uploadAdapter(loader)
  }

  // when upload completes, replace tag
  const imageUploadEditing = editor.plugins.get('ImageUploadEditing')
  imageUploadEditing.on('uploadComplete', (evt, { data, imageElement }) => {
    editor.model.change((writer) => {
      const view = editor.data.processor.toView(
        data.mediaType === 'video'
          ? `<video src='${data.default}' controls="controls"></video>`
          : data.mediaType === 'audio'
          ? `<audio src='${data.default}' controls="controls"></audio>`
          : `<img src='${data.default}' />`
      )
      const model = editor.data.toModel(view)
      editor.model.insertContent(model, editor.model.document.selection)
    })

    evt.stop()
    editor.editing.view.focus()
  })
}

const editorConfiguration = {
  placeholder: 'write your content...',
  extraPlugins: [uploadPlugin],
  toolbar: {
    items: [
      'heading',
      '|',
      'uploadImage',
      '|',
      'code',
      'codeBlock',
      'showBlocks',
      'sourceEditing',
      '|',
      'undo',
      'redo',
    ],
    shouldNotGroupWhenFull: true,
  },
  simpleUpload: {
    uploadUrl: `https://sample.com/files/editor`,
    fileTypes: ['.pdf', '.doc', '.docx', '.xls', '.xlsx'],
  },
  image: {
    upload: { types: ['mp4', 'pdf', 'mpeg', 'jpg', 'png'] },
  },

  htmlSupport: {
    allow: [
      {
        name: /.*/,
        attributes: true,
        classes: true,
        styles: true,
      },
    ],
  },
}

function CustomEditor(props) {
  return (
    <CKEditor
      editor={Editor}
      rows={7}
      data={props?.content}
      config={editorConfiguration}
      onChange={(event, editor) => {
        const newData = editor.getData()
        props.handleContent(newData)
      }}
    />
  )
}

export default CustomEditor

// blog/page.tsx

'use client';

import dynamic from 'next/dynamic.js';
import { useState } from 'react';

const CustomEditor = dynamic(
  () => {
    return import('./CustomEditor.jsx');
  },
  {ssr: false}
);

const Blog = () => {

  const [content, setContent] = useState("");

  return (
    <div>
      <CustomEditor id="content" content={content} handleContent={(newContent: any) => setContent(newContent)} />
    </div>
  );
};

export default Blog;

you can use your custom endpoints to send data to your backend and receive the file address. basically the code tries to replace the tag in the editor using conversion

also don't forget you need to add your backend uploader for this code to work (I'm using multer and express in my own project).

Here's the result:

Upload images in Ckeditor 5 with Laravel

David Carr — Sat, 21 Jan 2023 03:39:00 +0000

CKeditor 5 out of the box does not come with upload capabilities. Uploading is supported with its plugins, some are official paid plugins that require subscriptions. There are a few free options.

Base64 upload adapter

This plugin allows uploads that will convert an uploaded image into base64 data. Very easy to use but will require you to save the complete base64 code with the post, this can be get long.

Docs

Simple image adapter

An image upload tool. It allows uploading images to an application running on your server using the XMLHttpRequest API with a minimal editor configuration.

Docs

Use the online builder to add the simple image adapter then download the generated bundle unzip and place the folder inside a publicly accessible place in Laravel. such as /public/js/ckeditor5

Then link ckeditor.js in the pages you want to use Ckeditor

<script src="/js/ckeditor5/build/ckeditor.js"></script>

Using Ckeditor in a textarea.

I've made a blade component called Ckeditor so I can use:

<x-form.ckeditor wire:model="content" name="content" />

To render the editor. I'm using Livewire and AlpineJS.

The component looks like this:

@props([
    'name' => '',
    'label' => '',
    'required' => false
])

@if ($label == '')
    @php
        //remove underscores from name
        $label = str_replace('_', ' ', $name);
        //detect subsequent letters starting with a capital
        $label = preg_split('/(?=[A-Z])/', $label);
        //display capital words with a space
        $label = implode(' ', $label);
        //uppercase first letter and lower the rest of a word
        $label = ucwords(strtolower($label));
    @endphp
@endif
<div wire:ignore class="mt-5">
    @if ($label !='none')
        <label for="{{ $name }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-200">{{ $label }} @if ($required != '') <span class="text-red-600">*</span>@endif</label>
    @endif
    <textarea
        x-data
        x-init="
            ClassicEditor
                .create($refs.item, {
                simpleUpload: {
                    uploadUrl: '{{ url('admin/image-upload') }}'
                }
                })
                .then(editor => {
                    editor.model.document.on('change:data', () => {
                    @this.set('{{ $name }}', editor.getData());
                    })
               })
                .catch(error => {
                    console.error(error);
                });
        "
        x-ref="item"
        {{ $attributes }}
    >
        {{ $slot }}
    </textarea>
</div>
@error($name)
    <p class="error">{{ $message }}</p>
@enderror

the important part is:

simpleUpload: {
    uploadUrl: '{{ url('admin/image-upload') }}'
}

This tells Ckeditor where to upload files to.

My route is defined inside an auth group so you have to be authenticated in order to use the upload route.

Route::middleware(['web', 'auth'])->group(function () {
    //other routes
    Route::post('admin/image-upload', [UploadController::class, 'index']);
});

Next, create an UploadController:

<?php namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Str;
use Intervention\Image\Facades\Image;

class UploadController
{
    public function index(Request $request)
    {
        if ($request->hasFile('upload')) {

            $file = $request->file('upload');
            $name = $file->getClientOriginalName();
            $name = Str::slug($name);
            $img = Image::make($file);
            $img->stream();
            $name = str_replace('png', '', $name).'.png';

            Storage::disk('images')->put('posts/'.$name, $img);

            return response()->json([
                'url' => "/images/posts/$name"
            ]);

        }
    }
}

First, check if there is a file request.

Next, collect the file, and define its file name.

$file = $request->file('upload');
$name = $file->getClientOriginalName();

I'll use a slug to rename the file name.

$name = Str::slug($name);

Next, I use Intervention package to use its Image class to make the image and stream it.

$img = Image::make($file);
$img->stream();

Next, remove any unwanted text from the file name

$name = str_replace('png', '', $name).'.png';

Then save the image

Storage::disk('images')->put('posts/'.$name, $img);

Finally, return the image path so Ckeditor can load the image into the textarea

return response()->json([
    'url' => "/images/posts/$name"
]);

How to detect human faces (and other shapes) in JavaScript

Tomasz Jakut — Tue, 24 Nov 2020 15:50:07 +0000

Google believes in a Web that can compete with native applications unintimidated. One of the areas in which native applications for years have been superior to web applications was detecting shapes in images. Tasks such as face recognition were not possible until recently… But not anymore!

Shape Detection API

A new standard proposal has recently been announced in the Web Platform Incubator Community Group (WICG): Shape Detection API. It allows detecting two types of shapes in an image:

Currently, both of these detectors are implemented inside Chrome. Barcode detection is enabled by default and face detection is behind a flag (chrome://flags#enable-experimental-web-platform-features). There is also one more specification defining Text Detection API that allows detecting text.

All of these detectors share the same API:

const detector = new FaceDetector( optionalOptions );
const results = await detector.detect( imageBitmap );

There are three interfaces available globally (both inside the page and inside the Web Worker thread):

FaceDetector,
BarcodeDetector,
TextDetector.

The optionalOptions parameter is an object containing additional configuration for the detector. Every shape detector has its own set of options, but you can also omit this parameter altogether — in most cases, the defaults are usually enough.

After constructing a detector, you can use its asynchronous detect() method to actually detect shapes in the image. The method returns an object with the coordinates of the shape in the image and additional information about it (for example, recognized text in the TextDetector API or coordinates of particular face parts, like eyes or nose, in the FaceDetector API).

The imageBitmap parameter is the image to analyze, passed as an ImageBitmap instance.

Side note: Why is this ImageBitmap instead of just an img element or simply a Blob? This is because the shape detectors are available also inside workers, where there is no access to the DOM. Using ImageBitmap objects resolves this issue. Additionally, they allow using more image sources, like canvas elements (including offscreen ones) or even video.

And that's basically it!

Sample application

Ok, let's see how the new knowledge can be applied in practice. Let's prepare a sample web application that will allow you to detect shapes using the proposed API!

Detecting faces and text on an uploaded photo with the Shape Detection API.

HTML

Start with the index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shape Detection API demo</title>
</head>
<body>
    <h1>Shape Detection API</h1>

    <h2>Face detection</h2>
    <label>Choose an image file:
        <input type="file" accept="image/*" data-type="face">
    </label>

    <h2>Barcode detection</h2>
    <label>Choose an image file:
        <input type="file" accept="image/*" data-type="barcode">
    </label>

    <h2>Text detection</h2>
    <label>Choose an image file:
        <input type="file" accept="image/*" data-type="text">
    </label>

    <script type="module">
    </script>
</body>
</html>

The file contains three input[type=file] elements that will be the sources of images to analyze. All of them have a [data-type] attribute that informs the script which shape you want to retrieve. There is also a script[type=module] element that will contain the code needed to handle the input elements:

import detectShape from './detector.mjs'; // 1

document.body.addEventListener( 'change', async ( { target } ) => { // 2
    const [ image ] = target.files; // 3

    const detected = await detectShape( image, target.dataset.type ); // 4

    console.log( detected ); // 5
} );

First, you import the detectShape() function from detector.mjs (1). This function will do the entire job.

Then you bind the change event listener to document.body (2). It will react to all changes in input elements thanks to the event delegation mechanism.

Additionally, the listener is asynchronous, as the detector is also asynchronous and I like to use the async/await syntax whenever I can.

There is also a destructuring statement to get only the target property of the event object passed to the listener — so only the element which fired the event.

Fortunately, the next line is not as crowded and it basically gets the file chosen by the user and saves it to the image variable (3).

When you get the image, you can just pass it to the detectShape() function alongside the type of the detector, fetched from the [data-type] attribute (4).

After awaiting results, you can log them into the console (5).

JavaScript

Let's move to the detector.mjs file:

const options = { // 5
    face: {
        fastMode: true,
        maxDetectedFaces: 1
    },
    barcode: {},
    text: {}
}
async function detectShape( image, type ) {
    const bitmap = await createImageBitmap( image ); // 2
    const detector = new window[ getDetectorName( type ) ]( options[ type ] ); //3
    const detected = await detector.detect( bitmap ); // 6

    return detected; // 7
}

function getDetectorName( type ) {
    return `${ type[ 0 ].toUpperCase() }${ type.substring( 1 ) }Detector`; // 4
}

export default detectShape; // 1

There is only one export in this file, the default one: detectShape() (1). This function converts the passed file (as a File instance) to the needed ImageBitmap using the createImageBitmap() global function (2). Then an appropriate detector is created (3).

The constructor name is derived from the type parameter. Its first letter is changed to the upper-case and the Detector suffix is added (4).

There is also an object containing options for every type of detector (5). Both the barcode and text detector will use the default options, however, for the face detector, there are two options:

fastMode – Switches on less accurate detection (that will recognize more faces but also increase the number of false positives).
maxDetectedFaces – Set to 1 to detect only one face.

After creating the shape detector, you can call its detect() method and await results (6). When the results arrive, return them (7).

Running the application

Coding is complete, however, the application will not work correctly if you start it directly from the directory. This is caused mainly by the fact that the code uses ES modules that are bound by CORS rules. There are two solutions to these issues:

Switch back to old, non-module JavaScript — you will not be cool anymore.
Use a local web server to serve the site — you will still be cool.

Fortunately, using a local web server is as simple as running the following command inside the directory with the application:

npx http-server ./

It will download and run the http-server npm package. You can then navigate to http://localhost:8080 (or to another address that will be displayed in your terminal) and test your own barcode, text and face detector application. Remember to use Chrome with the experimental Web platform features enabled!

And that's it! With the new Shape Detection APIs, it is fairly easy to detect certain shapes in the image — at least in Chrome. We will need to wait and see if other browsers will follow.

Source code and demo

The complete code of the application is available on GitHub. There is also a slightly enhanced and styled live text, barcode and face detection demo available for you to play with. Its source code is also available on GitHub. Unfortunately, at the time of writing this article, shape detecting is not supported on Linux.

As for the next steps, one of the most important applications of face detection is facial recognition. This technology matches human faces detected on images or video frames against a database of faces. As other biometric technologies, it can be used to authenticate users, interact with computers, smartphones or other robotic systems, automatically index images or for video surveillance purposes.

How to become a better programmer

Dominik Szczepaniak — Mon, 23 Nov 2020 11:02:27 +0000

Being a programmer is not a simple thing. The variety of technologies, concepts, rules, and terminologies can be overwhelming for newcomers. What’s more, you need to be up-to-date all the time. Otherwise, you take a step back.

But if you made an effort and started your developer career, there is still much more to do to improve your programming skills. This article presents some ideas on how to become a better programmer. You will also find out how your company can help you with this endeavor.

Continuous growth means challenging tasks

To challenge yourself as a developer, it is worth to participate in as many and as diverse software projects as possible. If programming is your day-to-day job, consider what kind of tasks in your current project would be most challenging for you. Then talk about them with your superiors. If you see room for improvement in your current project, mention it.

However, you shouldn't limit your learning experience to what your job throws at you. To develop yourself as a programmer you need to actively seek opportunities outside your daily work.

No matter if you are an active developer working in the field, a beginner or an IT student, one of the most effective ways to improve as a programmer is to become a member of an open source project. You can start your search on GitHub. Find a project that uses the technology stack you would like to learn about and make your first contribution. Sometimes it’s even better to start something from scratch — GitHub is also a great place to begin your own project. You can adjust the technology stack to your needs, which allows you to learn whatever you want. Your project can be a clone of an application you use. It can also be a new idea for an application you need.

You shouldn’t be afraid of programming tasks that seem to be hard or even impossible. Facing challenges and leaving your comfort zone is one of the best things you can do to speed up your growth. The most obvious benefit is experience which will make you more attractive in the job market. According to the Software Craftsmanship approach, both theoretical knowledge and experience are required to deliver good software.

An interesting approach to learning to code is CodeKata, which emphasizes combining practical skills with theory. This approach assumes that after gaining new theoretical knowledge, you should use it in practice. The more you practice, the more you learn along the way. To learn all you can, practice often. In this approach practicing is the goal, not a solution.

In challenging yourself, you will also gain confidence. Perhaps you have imposter syndrome, a psychological pattern in which you constantly doubt your own achievements. It is estimated that up to 70% of the population will experience at least one episode of imposter syndrome in their lives. The first observable symptom is that you don’t believe you really deserve your success, which can discourage you and lead you to slow or even stop your growth. You can find a more in-depth analysis in this thesis prepared by the Behavioral Science Research Institute.

However, remember to choose your tasks carefully. Be reasonable and avoid taking on too much complex work at once. Failures also can teach you a lot, but don’t bite off more than you can chew. Nevertheless, challenging yourself on your way to becoming a better programmer has many more advantages than disadvantages.

Learn how to learn

After graduating from school or university some people lose their willingness to learn. Even for people who like learning, it may be hard to stay in a constant learning mode. Fortunately, there are a few tips that can help motivate you.

First, it is helpful to learn more about the topics you are interested in. Even if programming isn’t your hobby, you can create an application or website that is related to your hobbies. Second, avoid context switching and learn only one thing at a time. Third, make sure you understand the topic, not only memorize it. Memorization is effective only in the short term. Finally — learn from more than one source. The way knowledge is learned is the most important aspect of learning aside from the knowledge itself. If you prefer videos — watch videos. If you prefer books — read books.

As a programmer, you have lots to learn. Do it wisely!

For effective learning, you will need the right environment. To start, clean your desk. Remove all unnecessary books, notebooks, and distractions. Turn off the TV, mute notifications from your phone, and stay off social media. If you feel that you need a break, then go for a walk. Getting your blood flowing from a brief walk may even spark some ideas to help you tackle the challenge at hand.

You should also consider getting official certification. For example, for non-native English speakers certificates like FCE, CAE, and CPE are useful. If you are passionate about testing, you can consider getting your ISTQB certification. To validate your cloud expertise, an Amazon certificate is a valuable asset. These certificates are not cheap, but the invested money can be additional motivation to learn.

Learn how to be self-reliant

When you run into a problem, it is tempting to ask your colleagues or create new questions on Stack Overflow. Unfortunately, relying on somebody else's work or knowledge is just a quick fix. In the long run, a lack of self-reliance will negatively affect your path to become a better programmer.

To learn more and reach your potential, you need to make mistakes on your own. Of course, there is nothing wrong with googling and reading case studies. Many known programming problems have been resolved this way. Don’t try to reinvent the wheel and don’t be afraid to use well-known solutions. However, the very first person you should seek help from is you. There is nothing wrong with asking other people, but research the problem and come up with some ideas first. Do not always expect somebody else to solve your issue.

If you need help, know how to ask the right questions. For starters, ensure that the description of the problem is sufficient. Provide as many details as possible. If you’ve found a bug, provide reproduction steps, error stack, or a screenshot if possible. It’s good to also compare the pros and cons of the potential solutions to your problem. You can ask Stack Overflow, GitHub, or even Slack channels related to your field.

A bad question may be:

“How do I quit Vim!? Please help!”.

Now compare how the question should be asked:

“I need to close the Vim editor. I’ve tried to close it by using Esc and Alt+F4 and it didn’t work. I can turn off my workstation but I have some changes in a document and I’d like to save them. Can somebody explain to me what I should do to close Vim and save changes?”

You can find the full list of good practices related to creating questions at the Stack Overflow Help Center.

Expose your code

If you don’t have an account at a place like GitHub or GitLab and want to become a better programmer, you should create one as soon as possible. The code you create says a lot about you. It shows your way of thinking, your skill, and your progress. It documents your growth as a developer. However, you need to be open to criticism.

Publishing your code also allows other programmers to review it. Even though being self-reliant is crucial to personal growth, the perspective of more experienced coders is extremely useful during the learning process.

Show your code and be ready to have it reviewed.

If you don't want to develop your own project, you can try to contribute to others’ open source projects. To make your first contribution, you will need to study a lot of code. Very often it will be undocumented code with a different code style than yours. It is worth it, though. You will not only learn a lot but also become more recognizable in programming communities.

To dive into a project smoothly, you can find an issue with the "good first issue" ("easy" or "beginner-friendly") label. This label is dedicated to tasks that are good points to start in a project, or are relatively easy to do. For example, this label is available in the CKEditor 4 repository, as well as in other very popular projects like Node.js or VSCode.

Socialize and network

One of the simplest ways to dive into the programming world is to take part in conferences
and meetings. Being a speaker will help you grow your experience. If you don’t feel confident enough to do a full presentation, you can give a lightning talk, a brief form of presentation that lasts only a few minutes. A short presentation in Prezi, Google Slides, or even just a slide containing a piece of code with explanation will do. Even if you don’t feel comfortable with public appearances, just attend them and listen to what others have to say. Case study presentations are extremely useful for learning what went right and wrong in coding experiments.

It is said that people should learn from their mistakes. But it is much more comfortable to learn from the mistakes of other people. Conferences also give coders a forum to discuss, network and make new contacts in the developers community. Do not forget to add your new contacts to your social media accounts to stay in touch. If you don’t use social media, it is a good idea to at least create a LinkedIn account for this purpose.

Engaging with other programmers is a brilliant way to verify your knowledge and opinions. It is worth trying even if you are an introvert. Encountering new knowledge and the alternate opinions of others can make a profound difference. Leaving your comfort zone can lead you to some realizations that you haven’t had before, which will only help you grow as a developer. Discussions with other programmers can also be the first step to become a better public speaker.

Additionally, you can also join dedicated groups on Facebook, Reddit, or Slack channels to get even more new contacts in the software community, and to exchange knowledge and ideas.

Try to also reach out to locally-oriented social media groups in your area, for example on Facebook. You can find them through Meetup as well, which will let you join local coding events and notify you of new ones. Another place to search for these groups is at universities. At almost every university there are also coding communities.

Socializing also helps you develop your soft skills that are needed to become a better programmer. Being communicative, helpful, respectful, and open-minded has tremendous value, as does having the ability to see the software from the customer’s point of view. Soft skills are the key to advancement in a programming career, especially if you want to become a team lead, mentor or trainer.

Read, watch, and listen

To use knowledge in practice, you need to acquire it first. There is a wide range of knowledge sources to help you become a better programmer. The most obvious are books. However, it is important to choose a book wisely, as many are outdated (or are going to be outdated shortly). Mostly, they deal with specialized technologies, languages or frameworks. Before you start reading, check reviews and even the table of contents. It will help you filter out books not worth your time. With that said, many books are evergreen titles for software developers. Here are some books that probably will never go out of style and will let you improve as a programmer:

There is a wide range of knowledge sources that you can choose from.

The Pragmatic Programmer by David Thomas and Andrew Hunt;
Refactoring: Improving the Design of Existing Code by Martin Fowler;
Introduction to Algorithms by Thomas H. Cormen;
Clean Code: A Handbook of Agile Software Craftsmanship by Robert C. Martin;
Agile Software Development, Principles, Patterns, and Practices by Robert C. Martin;
Working Effectively with Legacy Code by Michael C. Feathers;
The Clean Coder: A Code of Conduct for Professional Programmers by Robert C. Martin;
Design Patterns: Elements of Reusable Object-Oriented Software by Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides;
Domain-Driven Design: Tackling Complexity in the Heart of Software by Eric Evans;
Cracking the Coding Interview: 150 Programming Questions and Solutions by Gayle Laakmann McDowell;
Patterns of Enterprise Application Architecture by Martin Fowler;
The Mythical Man-Month: Essays on Software Engineering by Frederick P. Brooks;
Algorithms + Data Structures = Programs by Niklaus Wirth.

The alternatives for books are newsletters and blogs. Here is a list of blogs that are worth following:

Unfortunately, many articles on less-known blogs contain mistakes and false claims. What’s more, a lot of that content is dedicated to beginners or is strongly opinionated. But the big advantage is the blogs are mostly free. An awesome tool you can use to read blogs is Pocket, which provides a mobile app and browser plugin with a nice and convenient UI that lets you save articles for later reading.

Another good place to start improving as a programmer is issues and pull requests in open source projects. Discussions on GitHub, for example, are a plentiful source of knowledge. Even if you aren’t working on an issue, you can still read or comment. See how it looks in CKEditor 5 or in Node.js.

If you have a bigger or more flexible budget, you can consider buying a more advanced training course. The cost of these courses can be very high, but the return of investment can be fast and significant. Before signing up, read some reviews. Be sure to check that your course of choice will get you a valid, reputable certification (and for how long).

Last but not least, audiovisual media can help you expand your knowledge. Videos on YouTube, podcasts, or courses on e-learning platforms like Udemy are all good ways to learn about programming. The biggest advantage of these forms of education, especially podcasts, is that they are easy to use. You can read, watch, or listen to them during your daily workout routine or on public transport. Listening to podcasts in a tram or a gym won't make you a noticeably more talented programmer overnight, but it is a tiny step forward in your development as a programmer. Additionally, archival materials from conferences are incredibly insightful. Many presentations are recorded and then shared on YouTube, such as Chrome Dev Summit 2019.

Take care of your health

Do not neglect your diet and health. A bit of sport and healthy eating can positively affect your brain. Try to reduce coffee, alcohol, and cigarettes. Consider eating more fruit, vegetables and brainfood. Reduce junk food in your diet.

Do not forget to sleep enough — late working hours won’t help you become a better programmer. Lack of sleep has also a negative influence on other parts of your life. Even worse if you don’t get enough sleep and drink a lot of coffee to get going in the morning. It has a destructive impact on your body and your mind.

Consider using a bike instead of a car or public transport. Don’t hesitate to walk to work if the distance is relatively short. Avoid sitting in front of a computer for long stretches. Take short breaks and short walks.

Work for a company that invests in your development

If you work for a caring company, your path to becoming a better programmer can be much easier. Many companies know that investing in employees will benefit all involved. What’s more, some of these investments are cheap and easy to introduce. Still, some companies may not be so generous. If your company has no obvious development programs, try speaking with your superiors. Explain to them what practices are worth introducing and why they are beneficial for the company. Focus on the benefits for your company and the company’s bottom line. What benefits of employee investment are there, they might ask? Well, consider the examples below.

Assigning tasks to more than one person

Organized cooperation can shorten the development process. It also stimulates the knowledge sharing process among employees. Potential problems can be detected and resolved faster. Common goals also mean better relationships between employees.

Pair programming, where colleagues sit together and/or share screens, is another solution. Their ideas can be easily exchanged, and potential problems can be recognized and solved more quickly and satisfactorily.

Code reviews

Code reviews have benefits both for employees and for the company. It is always better to detect a problem during the review process than after the release. In general, they reduce costs and save developers time. Code reviews also save you time later — many bugs could have been avoided if the code was reviewed well in the first place. In addition to that, it provides the same benefits as assigning tasks to more than one person and stimulates the knowledge sharing process.

Code review can be also the beginning of a longer discussion. Opinions and biases can be challenged, which leads to further learning and growth. During the review, problems and areas of improvement can be discovered. See how it looks in the CKEditor 5 repository:

A discussion during the code review can be enlightening.

Development fund

Another form of supporting employees is a development fund. Books and courses are very often quite expensive, and participating in conferences usually isn’t free either. Setting up a development fund is the most direct form of investing in an employee’s development.

Have an impact on the final product and used technologies

Having a real impact on the developed product not only sparks motivation, but it also helps you advance in your chosen career path. But with opportunities comes also responsibility. You are responsible for the technology you use. You will need to maintain, develop, and perhaps fix it in the future.

However, the whole process from research through implementation to deployment will teach you a lot. First, you will need to do research — find the pros and cons of proposed solutions, and finally, choose the best one. Next, you will need to prepare a prototype, then a ready-to-use implementation. Finally, you will have to handle the product release.

Each step can teach you a lot. Being a better programmer means not only being good at implementing features and fixing bugs. It means being good at research, maintaining products, and convincing others to use your ideas.

How to find these companies?

To find the right company, the most direct way is to read reviews. Employer review sites are a good place to start. These pages provide very detailed information about salary, interview, and opportunities to grow.

You can also ask other programmers about their companies, or for companies they recommend. If you participate in meetups and conferences, you can often see which companies programmers work for. Focus on t-shirts and badges. If you meet some brilliant people that talk about interesting projects, why not apply to the companies where they work? Go and ask them about their employer and projects they participate in. What’s more, if you see a programmer actively using their company’s gadgets, it is a good sign that the company invests in employees.

All of these benefits are ones you can find working on CKEditor Ecosystem products for CKSource. Did you know that we are hiring? Visit the career page and see what else we can do to boost your growth!

But most of all – have fun with programming

Without having fun with programming, it will be more difficult to develop your coding skills. As I mentioned before, programming isn’t a simple thing. Learning a lot of stuff that’s hard to understand without liking it is even more challenging than programming itself.

You need to be aware that programming is not only implementing new features and maintaining clean and perfect code. Very often you will spend hours or even days on arduous debugging or refactoring. You will also work with poorly written and buggy code.

However, thanks to programming you can create incredible things. You can simplify, automate, or even get rid of many daily activities. Furthermore, you can also develop your other hobbies. For example, if you are interested in meteorology, you can build and program a weather station. Then you can collect statistics and make forecasts. Or whatever else you want! That’s the magic of programming.

Have fun with programming!

People don’t only live to work. You can develop and use your skills by playing some coding games:

Another way to get a lot of satisfaction from programming is to create software that people need. Positive opinions from grateful customers and community can inspire a lot.

And that's still not all...

Becoming a better programmer is an everyday job. It takes a lot of effort and dedication. There is no one universal path to improve as a software developer and this article, while giving you some hints, is definitely not complete. Why don’t you share your tips and tricks to become a better programmer in 2020 in the comments? You can also reach out to us on our Twitter. 😉