|
Issue #555 • March 7, 2024
The Element.innerHTML property is as old as time, and most of you who have been coding JavaScript for a while have likely used it. Nowadays, the property is discouraged due to security concerns. For example, MDN states the following regarding using innerHTML to replace content:
This is a security risk if the string to be inserted might contain potentially malicious content. When inserting user-supplied data you should always consider using Element.setHTML() instead, in order to sanitize the content before it is inserted.
The problem with this advice is that the setHTML() method is not currently supported by most modern browsers. According to the browser compatibility chart data, it had support in previous versions of Chromium browsers and others but support was dropped.
I'm guessing this is (ironically) due to some type of security concern with the method somehow being exploited, so support has been dropped until the problem is resolved. So it's a good idea to keep setHTML() in the back of our minds for future use, but for now other solutions (like safely using innerHTML) will have to be relied on.
Another useful tidbit that I found on the MDN article for innerHTML is a neat little script that lets you easily create a 'view source' button for the current web page. The code looks something like this:
|
let btn = document.querySelector('button'),
de = document.documentElement;
btn.addEventListener('click', function () {
de.innerHTML = `
<pre>${de.innerHTML.replace( /</g, "<", )}
</pre>
`;
}, false);
|
I've aliased the document.documentElement object to abbreviate the code a bit but that's the gist of the little script. Try it on CodePen here.
The main thing to notice is that I'm using innerHTML to replace the contents of the current document with a pair of <pre></pre> tags. Within those tags the script uses the replace() method to replace the first angle bracket of every HTML tag with its encoded equivalent. This is enough to essentially encode the HTML, as the closing angle bracket will be assumed to be encoded as well.
The only problem with the demo is that there's no way to return to the original HTML without refreshing the page. I could build a mechanism to regenerate the original DOM elements, but this simple demo should suffice.
I also noticed that adding any CSS to the <pre> element in the CSS panel won't work, so if you want to (for example) wrap the lines, you'd have add some inline styles directly onto the <pre> element in the JavaScript or else find a way to successfully inject the styles onto the newly added element.
Now on to this week's tools!
|
CSS & HTML Tools
GoHT — A Haml template engine and file generation tool for Go that includes full Haml support and templates are compiled to type-safe Go.
Curlwind — Use a CDN along with query parameters to create your own on-demand Tailwind bundle with no build process, specifying features like used classes, variants, exclude Preflight, minified or not, and more.
htmz — A minimalist HTML microframework (similar to htmx, but simplified) for creating interactive and modular web user interfaces with the familiar simplicity of plain HTML.
Your Next Big AI Product Idea — We taught AI to brew beer and big ideas. Our AI Ideas Generator takes your business problem and gives you a report of AI-powered solutions that can help you address it. Give it a try. SPONSORED
Skeleton Generator — Paste your HTML code and this tool will generate the Tailwind equivalent for generating animated 'loading skeletons' for your UI.
Mojo CSS — An atomic CSS Framework that generates CSS based on your HTML in real-time and with near zero-runtime.
 |
concrete.css — A simple, classless CSS stylesheet, as a companion to Normalize.css, useful as a starting point for a simple website or landing page, with automatic dark mode via a media query.
ui.jln.dev — A generator and directory that lets you explore 10,000+ themes for shadcn/ui. You can randomize the UI colors, save palettes, toggle dark mode, and copy the tokens as CSS variables.
click-spark — A web component that adds animated sparks (i.e. like tiny explosions) when the user clicks on specific parts of the page (or the whole page if you prefer).
buttons.ibelick — A gallery of button click and hover effects built with Tailwind and easy to copy/paste into an existing Tailwind project.
Color Lisa — A curated list of color palettes based on masterpieces of the worlds greatest artists, with palettes in hex format.
|
| |
Git, GitHub, & CLI Tools
Distrobox — A shell application that allows you to use any Linux distribution inside your terminal. Enable both backward and forward compatibility with software and freedom to use whatever distribution you want.
actions-batch — A time-sharing supercomputer built on GitHub Actions, built in Go, allowing you to run a shell script in an isolated, immutable environment, and collect the logs or results.
tea.xyz — A decentralized technology framework secured by reputation and incentives that enables open-source developers and maintainers to be rewarded for their software contributions.
Meco: The #1 Newsletter Aggregator — The inbox is full of distractions and too many subscriptions lead to inbox chaos. Free your newsletters from the inbox. Move your newsletters to a space built for reading and declutter your inbox in seconds. SPONSORED
Sudo for Windows — From Microsoft, a Windows-equivalent to the `sudo` command, allowing users to run elevated commands directly from unelevated terminal windows.
Files Sync Action — A GitHub Action that synchronizes files across multiple repositories based on a configuration file written in YAML.
npminsights — Enter a package name and this interactive tool will show you daily, weekly, monthly, and yearly download history in an attractive visual graph format.
 |
meow — A dependency-free CLI app helper with features like argument parsing, converting flags to camel case, flag negation, and more.
Gmeek — A blog generator based on GitHub Pages, GitHub issues, and GitHub Actions, and can be deployed in a few minutes.
Diversion — A version control tool for modern code and assets management powered by the cloud. Includes a decent free plan (10 repos, 10 users, 100GB).
|
JavaScript & DOM Scripting E-Books Bundle
Over the last 10 years I've created quite a bit of JavaScript content in various forms. The majority of that content can now be purchased in my e-books as a single bundle.
The bundle includes 4 e-books in EPUB and PDF formats and there are 250+ JavaScript tips across 450+ pages (PDF version). There are more than 200 live demos for each of the tips and the bundle also includes some longform pieces on deeper subjects.
Get the Bundle Now →
|
ChatGPT and AI Tools
Dewhale — A GitHub-Powered AI for effortless development, an open-source alternative to v0 by Vercel.
OpenAI DevTools — A browser extension (Chrome & Firefox) that automatically generates OpenAPI specifications in real time for any app or website.
McAnswers — A prompt library that lets you choose your programming language, then select from predefined errors and warnings, or type your own text into the prompt to create a new AI-based answer thread.
Privy — An open-source alternative to GitHub copilot that runs locally, featuring real-time code completion, chat about your code, and more.
SecureAI Tools — Private and secure AI tools that includes AI chat, chat with docs, support for 100+ AI models, built-in authentication, user management, and more.
Meco: The #1 Newsletter Aggregator — The inbox is full of distractions and too many subscriptions lead to inbox chaos. Free your newsletters from the inbox. Move your newsletters to a space built for reading and declutter your inbox in seconds. SPONSORED
Zerve — A platform that provides data science and ML teams a unified space to explore, collaborate, build and deploy data science and AI projects. Includes a free Community version for individuals.
Visual Backend — Generate code and scaffolding for back-end essentials like endpoint handlers, auth and CI/CD to help you quickly connect your ML service to a REST API.
 |
Jan — A native, open-source ChatGPT alternative that runs 100% offline on your computer, available for Windows, Mac, and Linux.
nextjs-chatgpt-plugin-starter — A Next.js boilerplate for creating a simple ChatGPT plugin, essentially the JavaScript version of a similar Python app.
|
|
Commercial Apps & Classifieds
Pagedone – A library of 1000+ UI components, sections, etc., designed in Figma and built on Tailwind CSS.
|
|
NinjaBootstrap UI – A UI kit of responsive HTML components for modern web design, built with Bootstrap. AD
|
ShipGPT – A boilerplate of all AI use cases to develop AI apps or enable existing tech with AI.
|
|
Doocs – A clean, intuitive interface to publish product documentation quickly and easily.
|
TLDR – A daily byte-sized version of Hacker News that takes just a few minutes to read. AD
|
|
CodeRadar – Monitor and protect your themes, plugins, templates, and boilerplates on GitHub.
|
ConfigCat – A developer-centric feature flag service with unlimited team size and solid support.
|
|
|
An X Post for Thought
Did you know that your GitHub account is linked with a public ID? Scott Hanselman shows how you can view yours. The smaller the number, the earlier your GitHub account was created. Mine is 558709, which is a much larger number than Scott's! The API link lets you view other bits of info as well.
Send Me Your Tools!
Made something? Reply to this email or send links via Direct Message on X @LouisLazaris (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...
Here's a neat AI challenge to test how good your prompt skills are: Twin Pics. You get a daily picture that you have to reproduce using an AI prompt as closely as possible. The game has limits on usage but you can use your own OpenAI access if you want to pay the small fee (about $0.05 per image) so you can play each day.
Thanks to everyone for subscribing and reading!
Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly
|
|
