A color picker in CSS, console text size and other editor changes

In the week after the launch the editor collected several small changes. None of them is worth a post of its own, so we put them together.

Colors in CSS

Let us look at an ordinary piece of styles:

.card {
  background: #1f2937;
  border-color: rgb(59 130 246 / 0.4);
  color: hsl(210 40% 96%);
}

To tell which colors these are, you either remember hex codes or look at the preview and guess which value does what. Now every color value in the code has a small square of that color in front of it. It appears for hex, rgb(), hsl(), hwb() and named colors like tomato — in the CSS panel and in styles inside HTML.

A click on the square opens a picker: a field of saturation and lightness, a hue bar and an opacity bar. We move a slider — the value in the code and the preview change at once, without picking numbers by hand.

There is a detail here: the picker does not rewrite the code its own way. Hex stays hex, hsl() stays hsl(). If another notation is needed, a click on the value in the picker header switches it: hex, rgb, hsl in a circle.

The squares can be turned off in Settings — the "Color swatches" option. This is for a file with many colors, where the marks get in the way of reading the code.

Console text size

The editor font size could be set before, while the console stayed small — 12 pixels. On a large monitor or on a projector during a class the output was hard to read.

Settings now have a separate option, "Console font size": from 12 to 22 pixels, 14 by default. It is not tied to the editor font size — the code can stay compact while the output is large. The choice is kept in the browser.

Someone else's pen without a Save button

Someone else's pen used to have two buttons — Fork and Save. Such a pen cannot be saved, so the second button made a fork as well. Two buttons with one result only raised the question of how they differ.

Now someone else's pen has one button — Fork. The familiar Ctrl+S (⌘S) makes a copy there too: the changes are not lost, they go into your fork.

Where signing in leads

After signing in, the site now returns you to where it is usually needed:

• "Sign in" in the header — to the profile, to your pens;
• signing in from the editor — back to the pen that was open;
• Save, Fork or a like without an account — back to the editor, and the action completes itself; the code is not lost.

If something in the editor is inconvenient, write to us at penlab.info@yandex.com.