Issue #517 (Cookies, CSS/HTML, Git/CLI, JS Utils)06/15/23
The Terminal of Choice for AI-generated Commands ⚡
Built with Rust and integrated AI, Warp is a modern terminal that will make you faster on the command line. Type ‘#’ to open AI Command Search. Then, use natural language to look up commands without leaving your terminal.
Ask Warp AI about how to troubleshoot a React state management problem or handle a specific npm package. It can even guide you step-by-step through setting up a Node.js server. With Warp, executing suggested commands is as easy as a single click – no copy-pasting necessary.
Try Warp AI today
|
The one thing I've never covered in this intro is one of the oldest and controversial web APIs: cookies! As we all know, modern web APIs like IndexDB and Web Storage (using localStorage and sessionStorage) have come into general use in recent years.
Though those newer technologies are recommended for larger amounts of data, it's still good to be familiar with how cookies can be accessed and created via JavaScript. So let's dig into the four basic things you can do with cookies.
Setting a Cookie
To set a cookie, you can use the document.cookie property, which allows you to read and write cookies. To set a cookie, you assign a string value to document.cookie, following the format name=value. Here's an example:
|
document.cookie = "username=John Doe";
|
Once that cookie is created, you can access it via the same property.
Reading a Cookie
To read a cookie, you can access the same document.cookie property. It returns a string containing all the cookies associated with the current document, with the cookies separated by semi-colons. To extract a specific cookie value, you'll need to parse the string, as shown below:
|
let cookies = document.cookie.split(";");
for (let cookie of cookies) {
let trimmedCookie = cookie.trim();
if (trimmedCookie.startsWith("username=")) {
let username = trimmedCookie.substring(
"username=".length
);
console.log("Username: " + username);
}
}
|
As you can see, cookies aren't very intuitive to work with, which is another reason why other data storage formats have become more popular.
Accessing a Cookie
To access a cookie value directly, you can use a helper function to retrieve the value based on the cookie name. Here's some code to demonstrate:
|
function getCookieValue(cookieName) {
let cookies = document.cookie.split(";");
for (let cookie of cookies) {
let trimmedCookie = cookie.trim();
if (trimmedCookie.startsWith(cookieName + "=")) {
return trimmedCookie.substring(
cookieName.length + 1
);
}
}
return null; // Cookie not found
}
let username = getCookieValue("username");
console.log("Username: " + username);
|
I've formatted the above code for readability but you should be able to get the gist of it. Again, you can see how convoluted it can be to access cookies, and why it would be much better to use a small library to do this sort of thing!
Expiring a Cookie
Finally, to expire a cookie, you can set its expiration date to a past date. This will cause the browser to remove the cookie, as in the following code:
|
function deleteCookie(cookieName) {
document.cookie = cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}
deleteCookie("username");
|
Once again, it would be much easier to have a small library to do all this work behind the scenes so you can just work with a simple API. But if you've never actually worked directly with cookies before using JavaScript, the above code examples should give you a decent overview of how they're created and accessed.
And if you want to demo any of the above code, you can go to any web page and just enter those snippets in the browser console, and you should more or less get the expected results (though the output may differ if the page has cookies set already).
Now on to this week's tools!
|
CSS and HTML Tools
Realtime Colors
An interactive website where you can test color palettes on real live UI elements in real time, with the ability to generate palettes and deep link to a specific palette demo.
CSS Gradient Generator
A gallery of CSS gradients with a tool to generate random gradients and adjust the angle of the gradient and you can also generate based on preferred colors.
Swap.js
A JavaScript micro-library that uses HTML attributes to facilitate Ajax-style navigation in web pages in less than 100 lines of code.
Branition
Browse over 300 hand-curated color palettes with advanced filter options best fitted for logos & branding.
The Terminal of Choice for AI-generated Commands ⚡
Built with Rust and integrated AI, Warp is a modern terminal that will make you faster on the command line. Troubleshoot a React state management problem, handle a specific npm package, or get help on setting up a Node.js server. As easy as a single click, no copy-pasting necessary. SPONSORED
SupportsCSS
Live, in-browser detection of modern CSS support for selectors, features, and at-rules, as an extension of the @supports feature. Applies support-based classes, exposes a results object, and allows custom tests.
 |
Toaster
An impressive pure CSS 3D editor that looks like Canvas or WebGL where the elements are built with nothing but HTML and 3D transforms.
CSS Patterns
A gallery of background patterns that resemble SVG-based patterns but are built using pure CSS gradients (linear, radial, and conic).
ColorSlurp
A native color picker tool for macOS or iOS that lets you pick any color on your screen using a high-precision magnifier, create and organize palettes, and check color contrast for accessibility.
Type Scale
A visual, interactive type scale generator that's integrated with Google Fonts and lets you choose either a predefined scale or enter a custom one.
table-magic
An online tool to convert between CSV, TSV, HTML, SQL, and Markdown and has a form editor and preview.
|
Git, GitHub, and CLI Tools
Framed
A Go-based CLI tool that simplifies the organization and management of files and directories in a reusable and architectural manner.
Map of GitHub
A searchable, visual representation of 400,000+ GitHub projects. Search for a project by name to drill down and show related projects based on GitHub stars (i.e. multiple people starred the same projects so they appear close together).
Mods
A simple Go-based tool that makes it easy to use AI on the command line and in your pipelines, and works with OpenAI and LocalAI.
Turn Leads Into Customers
Created specifically for sales and marketing professionals, Invido can give you a much-needed boost in video prospecting, follow up rates, and ultimately help close more deals. SPONSORED
snips.sh
An SSH-powered pastebin with a human-friendly TUI and web UI, usable from any machine with an SSH client installed and it's self-hostable.
Monolith
A Rust-based CLI tool for saving complete web pages as a single HTML file, with features that improve the "Save page as..." method used in browsers.
logss
A simple Rust-based command line tool that helps you visualize an input stream of text.
PR Explainer Bot
A GPT-powered, AI-based GitHub app that analyses your pull requests and offers explanations, suggestions, spots bugs, and more.
citty
An elegant CLI builder that has a fast and lightweight argument parser, nested sub-commands, lazy and async commands, and more.
Zero
Unique, powerful, and secure secrets management software for developers. Includes a free plan for solo developers with unlimited secrets and projects.
Envio
A Rust-based command-line tool that simplifies the management of environment variables across multiple profiles.
|
JavaScript Utilities
jiti
Runtime Typescript and ESM support for Node.js with seamless interoperability between ESM and CommonJS.
@webreflection/promise
A JavaScript module that exposes a drop-in replacement for both Promise and AbortController with extra features.
supercluster
A fast JavaScript library for geospatial point clustering for browsers and Node.js.
Turn Leads Into Customers
Created specifically for sales and marketing professionals, Invido can give you a much-needed boost in video prospecting, follow up rates, and ultimately help close more deals. SPONSORED
jscanify
An open-source pure JavaScript mobile document scanner designed to run in any JavaScript environment.
Memize
A barebones memoization library with a focus on speed with support for multiple arguments, including non-primitive arguments (by reference).
ohash
A super-fast hashing library written in vanilla JavaScript and based on murmurhash3.
TS Writer
A just-in-time template string template engine designed to generate TypeScript code at runtime. Simple to use and has a small footprint, useful for CLIs and code generation tools.
queue
An asynchronous function queue with adjustable concurrency that implements most of the Array API.
Croner
Trigger functions or evaluate cron expressions in JavaScript or TypeScript, no dependencies and works with Node, Deno, Bun, and the browser.
TypeScript API Utils
Utility functions for working with TypeScript's API, a successor to an older project called tsutils.
jsdoc-to-markdown
Generates markdown API documentation from jsdoc annotated source code, useful for injecting API docs into project README files.
|
|
Commercial Apps and Classifieds
CSS Pro – A DevTools enhancement to easily live-edit CSS on a web page.
|
|
Meco – Enjoy newsletters in a space built for mindful reading and give your inbox space to breathe. AD
|
Microlink – A fast, scalable, and reliable high-level API to control a headless browser.
|
|
Chatspell – A live chat service for your website, powered by ChatGPT.
|
VSCode.Email – The latest news, articles, and tools for the world's most popular text editor. AD
|
|
OpenWidget – Service to add interactive widgets to your website (contact us, FAQ, etc.)
|
Wrap – Design and edit images for social media, product development, presentations, and more.
|
|
|
A Tweet for Thought
This is one of the more impressive robot demos I've seen, showing how far this kind of technology has come.
Send Me Your Tools!
Made something? Reply to this email or 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 you're trying to glue two things together and don't know what kind of glue to use, check out This to That. Select the two materials you want to glue and this tool will tell you the best possible adhesive to use.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
