Penlab blog
Articles about front-end work and notes on what changed in Penlab. Newest first.
-
Update
Code on a phone: a symbol bar above the keyboard
On a phone a bar now sits above the keyboard: undo, redo, Tab and symbols for HTML, CSS and JS. CSS adds the colon and semicolon itself, JS suggests querySelector and short snippets.
-
Update
Editor blocks you do not need can now be turned off
The layout menu got toggles for the blocks: HTML, CSS, JS, Result and Console. Keep, say, only JS and the console — and the set is saved with the pen.
-
Article
How to build a modal window with HTML, CSS and JS: the dialog element
A modal window is built on the dialog element: the browser dims the page, manages focus and closes the window on Esc. We show the code, a version without JavaScript and browser support.
-
Article
Smooth appearance of a block in CSS: how to animate display: none
A block with display: none can be shown and hidden smoothly with CSS. We go through @starting-style and allow-discrete on working examples and look at browser support.
-
Article
How to build an accordion with HTML and CSS without JavaScript: the details element
An accordion is built on the details element: the browser opens the items, and the name attribute keeps only one open. We show the code, a custom arrow, smooth opening in CSS and browser support.
-
Update
Which email you can sign up with
A new Penlab account is now created with an address at a well-known email service: Gmail, Outlook, Yandex, Mail.ru and others. Here is why it was needed and whom it concerns.
-
Update
Editor's Picks: pens we select by hand
The home page no longer shows the six most liked pens: it shows a random six of those the editors selected. On the showcase they have a filter of their own and a label on the card.
-
Update
A color picker in CSS, console text size and other editor changes
Colors in CSS are now visible right in the code and can be changed in a picker. Three smaller changes: console text size, no Save button on someone else's pen, and landing on the right page after signing in.
-
Update
Share a pen and embed it on your site
The editor now has a Share button: a link to the pen and a code to paste into any page. An embedded pen stays live — its code can be edited and run.
-
Update
Penlab is open
A front-end playground in the browser: three code panels, a live preview and a console. Here is what Penlab can do today.
1–10 of 10