Issue #495 (CodePen, CSS/HTML, Build Tools, Media)01/12/23
As you know from this newsletter, I create tons of CodePen demos demonstrating whatever front-end coding feature I happen to be writing about – whether it's here or in a full-length article published on my blog or elsewhere (e.g. see my promo above!).
I haven't really messed around too much with CodePen's settings other than laying out the editor to display the code panels on the left.
Maybe you also use CodePen a lot. If you do, it's good to know there's a specific page where you can modify editor-specific settings to suit your own needs and maybe be more in line with what's in your primary IDE.
Check out the page for yourself and toggle the "Sticky Preview" to "On" to view any changes in real-time. To help, here's a quick run-through of the kinds of things you can customize:
Syntax Highlighting
You can change to a light or dark syntax highlighting theme, with 14 options available. I'm going to try out "Oceanic Dark" for a while as I've always used the default "High Contrast Dark" until now.
 |
Code Font Family
You can let CodePen use your default system monospace font or choose one from the list of options. FiraCode seems to be pretty popular so I'm going to give that one a whirl for a while.
Key Bindings & Code Indenting
You can enable key bindings for either Vim or Sublime Text. I've used Sublime Text for a long time now, and more recently switched to also using VS Code. Since there's no option for VS Code, I'll try out the Sublime Text bindings. I'm not sure the extent of what CodePen will do in this area, but it's worth a try.
As far as indenting, I do 2 spaces exclusively, because it's much cleaner and nicer looking for articles and tutorials (though there are cases to be made in favour of tabs in other contexts).
Preprocessor & Library Defaults
Most of my demos are for teaching raw front-end stuff, so I don't use any preprocessors in CodePen and I only include Normalize.css and maybe Autoprefixer if I feel it's needed.
Editor Options
This area has some stuff I didn't know existed. Years ago I had a discussion with Chris Coyier, one of CodePen's founders, about the lack of autocomplete. At the time he chalked it up to poor performance. But I guess they added that option at some point so by enabling that, you can see suggestions for code features as you type. Cool!
Emmet Settings
And lastly, there are options to activate Emmet and add your own Emmet snippets. I generally use a native text expander on my system for common text snippets in various contexts, so I probably won't use this in CodePen. But it's there if you need it.
So if you haven't done so already, be sure to check out your CodePen settings to see if you can make your CodePen experience a little closer to what you're accustomed to in your native IDE.
Now on to this week's tools!
|
CSS and HTML Tools
Emerging Tech Brew
A free 3-times-a-week newsletter that delivers the latest tech news impacting your future. The most important stories are curated & summarized in a concise yet witty way, so you're up to speed in minutes. SPONSORED
Font Engine
An online tool to help you select the a font. Use the sliders to choose desired "formality" and "modernity" levels along with other tags that can help identify a tone and brand style.
Glyphy
Resource to copy and paste symbols, emojis, and unique text fonts (e.g. glitch text, upside text, etc).
Stop Form Spam
A small JavaScript utility to prevent spam bots from completing input, select and textarea fields and from submitting online forms.
Unhead
A small utility that provides a universal `head` tag manager that's framework-agnostic and currently has Vue integration with more coming in the future.
Fontpie
A JavaScript-based CLI utility that uses CSS font descriptors to measure your website's cumulative layout shift (CLS) and automatically include a suitable fallback font to minimize the shift.
macaron
A new compile time CSS-in-JS library with type safety, zero runtime bundles, colocation of styles and components and supports both the styled-components API and vanilla-extract styling API.
OKLCH Color Picker & Converter
An online interactive tool to experiment with OKLCH, a new experimental color standard that improves on traditional color formats on the web.
Ace-Editor-Web-Component
A web component that allows you to easily add a WYSIWYG editor to any page, based on Ace, a popular editor by AWS Cloud9.
Mesher
A CSS mesh gradients generator that lets you randomize gradients, add and remove colors as needed, and export as CSS.
relative-time-element
A web component that formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.
Fontjoy
An online tool that makes font pairing easier. It generates font combinations with deep learning, showing you fonts that pair with one another along accepted design principles.
|
| |
Build Tools, Bundlers, etc.
The Daily Upside
A business newsletter that covers the most important stories in business in a style that’s engaging, insightful, and fun. No jargon, no fluff, with quality insights and unique stories you won’t read elsewhere. SPONSORED
Twify
A simple CLI tool to setup a Tailwind CSS project with a single command, with support for Next.js, Nuxt, SvelteKit, Remix, Angular, and more.
Pattern Lab
An old tool that I've never officially included here. It's a frontend workshop environment that helps you build, view, test, and showcase your design system's UI components.
Create React Package
A CLI utility to create React packages with zero build configuration, thus no need to install or configure tools like Rollup, Babel, or ESLint.
Nuxt Web Bundle
An experimental tool to generate web bundles with Nuxt 3. It uses a new experimental feature in Chrome called Web Bundles that lets you share a website as a single file over Bluetooth and run it offline.
Phero
Full-stack type-safety with pure TypeScript. A no-hassle and type-safe glue between your back end and front end, with TypeScript at the core of it all.
 |
vite-plugin-list-directory-contents
A Vite plugin to list folders contents when in dev mode so you don't have to manually type in the paths to all your inputs.
esm-env
A utility that uses export conditions to return environment information in a way that works with major bundlers and runtimes.
tea
An alternative to package managers like Homebrew that provides a unified packaging infrastructure that puts the entire open source ecosystem at your fingertips.
On the Release Radar:
|
Media Tools (SVG, Images, Audio, etc.)
1440: News Without all the Nonsense
A daily digest of all the most important info in culture, science, sports, politics, business, and everything in between—and it's the fastest way to an informed and impartial point-of-view SPONSORED
Slim
A set of 100 free and open source SVG icons available in a "slim" 1.5px stroke width.
more.graphics
An all-in-one resource of free generator tools for hexagon patterns, CSS gradients, and other styles like Mondrian, Geometric, Bauhaus, and more.
Fotor
A full-featured online graphics editor for desktop and mobile that allows you to edit and retouch photos, create full designs, and build collages.
PixelBin
A real-time image transformation, optimization, and digital asset management platform. Free plan includes 15GB of storage and 45 credits.
JXL.js
A JPEG XL decoder in JavaScript that uses WebAssembly (from the Squoosh app) running in a Web Worker.
clumsy-wav
A set of JavaScript functions for generating, playing, and downloading .wav files.
Futicons
A beautiful set of line-based icons representing objects in futuristic categories like VR, AR, Interplanetary, AI, Crypto, Blockchain, and more.
 |
Vectormaker
An online tool to convert PNG and JPEG images to SVG vectors. It outlines your pixel based images and turns them into colored SVG vector files.
Nyx.gallery
A gallery of AI-generated photos of food, animals, landscapes, etc., that don't exist, free for commercial use.
FabPic
Online tool to create beautiful screenshots for docs, presentations, etc. You can customize background, border, padding, position, shadow, and aspect ratio.
On the Release Radar:
|
|
Commercial Apps and Classifieds
These are commercial apps, affiliate links, PPC ads, and paid classifieds. Submit yours!
|
Headlessforms – A simple, intuitive, and powerful one-stop HTML forms service.
|
|
CandyIcons – A searchable, massive collection of stunning app icons in 15 categories.
|
|
designstripe – A growing graphics library to create your own illustrations with no design skills.
|
|
Patr – An easy-to-use cloud platform to deploy static sites,
apps, databases, containers, etc.
|
Popsy – No-code website builder for creators with a Notion-like UI and free illustrations.
|
| |
|
|
A Tweet for Thought
I'm guessing the front-end devs voted for back-end and the back-end devs voted for front-end in this poll. But it was pretty close!
Send Me Your Tools!
Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
If for some reason you want to simulate being a 1990s style Hacker, check out Online Hacker Simulator and Hacker Typer. Type anything in the latter and it will appear as if you're doing some hardcore old-school coding!
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
