A bookmarklet is a JavaScript-based bookmark that provides to an online browser. I’d like to indicate you some superior internet browser hacks to help your internet improvement workflow and the right way to convert these hacks into time-saving bookmarklets.
Activating design mode
Making use of a background to all the things
Simulating occasions
Setting cookies
Toggling lessons
Coloration widget bookmark
What different bookmarklets are you able to consider?
Activating design mode
Design mode (styled as designMode because it’s a JavaScript property) is for who prefer to experiment with variations of copy on a reside web site. For instance, copywriters who like to watch how content material reads throughout the movement of the web site’s design, or, say, designers who need to make sure that textual content suits comfortably inside a sure house at a sure font dimension.
JavaScript has a mightily easy characteristic that may render a whole HTML doc editable. It really works precisely like HTML’s contenteditable=”true” name-value attribute (or contentEditable=”true” in JavaScript) however for the entire doc. In the event you’d prefer to see the way it works, begin by getting into the browser’s console utilizing the related keyboard shortcut:
Chrome: Choice + ⌘ + J / Shift + CTRL + JFirefox: Choice + ⌘ + Okay / Shift + CTRL + OkaySafari: Choice + ⌘ + C / Shift + CTRL + C
Subsequent, kind doc.designMode=”on” into the console, hit Return, after which click on on any textual content aspect. You’ll see that this textual content aspect (and all different textual content components) at the moment are editable just by clicking on them. This methodology of modifying textual content on a reside web site is a lot quicker than having to open DevTools, then right-clicking and deciding on the “Edit Textual content” choice… and a lot much less tiresome.
“Guides and Thangs” — my favourite a part of CSS-Tips
Whereas I’m unsure that “design mode” is probably the most correct description of the characteristic, it’s tremendous helpful nonetheless and it’s truly been round for a extremely very long time, surprisingly.
And what’s even a good quicker technique to allow it? A bookmarklet, in fact! Create a bookmark utilizing javascript: doc.designMode=”on”;void 0; because the URL.
Making use of a background to all the things
When HTML components don’t have backgrounds, it may be troublesome to visualise their bounds and/or precisely measure the space between them and different components. Builders may need to higher visualize bounds when coping with optical imbalance (i.e. when one thing “appears to be like off” regardless that it’s not), margin collapse (when sure margins are ignored), varied points with show:/float:/place:, and extra.
Making use of backgrounds means making use of a semi-transparent background to all HTML components as a way to higher visualize their bounds and spacings. It’s one thing many people generally do by opening up DevTools then typing a CSS declaration like selector { background: rgb(0 0 0 / 10%); } into the “Kinds” field. However once more, it’s actually tiresome and repetitive — and one thing we will simplify with a bookmarklet.
As soon as once more, to create a bookmark, we’re going to make a URL. Right here’s what we will use for this one:
javascript: doc.querySelectorAll(“*”).forEach(aspect => aspect.model.background=”rgb(0 0 0 / 10%)”);
We’re utilizing a semi-transparent background as a result of the transparency stacks, which ensures that each nested aspect is distinguishable and the distances between them could be measured.
Apply a background to all the things to see what’s taking place.
Simulating occasions
Have you ever ever needed to take a look at an online occasion that first requires a sequence of interactions, or sure situations to be met? It’s tremendous time-consuming to have to check or debug these sorts of functionalities. This occasion simulation bookmarklet can be utilized to immediately set off particular occasions, making testing a breeze.
Simulating an occasion means coding a “throwaway” button that triggers a JavaScript occasion, making it a lot simpler to rapidly and repeatedly take a look at the occasion with out having to fulfill any common user-facing situations, like needing to be logged in.
Assuming that you’ve got your JavaScript occasion listeners arrange, create a bookmark for every occasion that you just’d prefer to set off/simulate and submit the next URL:
javascript: doc.querySelector(“SELECTOR”).click on();
Exchange “SELECTOR” together with your distinctive selector, substitute “click on” with “focus” or “blur” (when essential), or prolong the snippet to make it set off extra complicated occasions, like scroll.
Setting cookies
Cookies are tokens which can be saved on a web site customer’s laptop by the web site that they’re visiting. Cookies comprise knowledge that may be learn by the web site that created them till they’ve exceeded their expiration date or have been deleted. The mere existence of a cookie can decide whether or not or not a customer is logged in, whereas the info itself can retailer consumer data.
An instance of a state of affairs the place you may need to set a cookie utilizing a bookmarklet is while you need to pressure a logged-in state throughout web site testing. Web sites usually look very completely different for customers which can be logged in, nonetheless, logging out and in finally turns into very tedious, so this bookmarklet can save fairly a little bit of time.
Manually writing expires= dates for cookies is awkward as heck, however fortunately this create-your-own-set-cookie-bookmarklet app can generate a bookmarklet for a selected cookie, if you already know its actual identify.
Toggling lessons
You might need to add or take away a category from an HTML aspect as a way to set off a recent state or a change in look, in any other case referred to as toggling lessons. Class toggling occurs behind the scenes of most reside web sites, nevertheless it can be used throughout testing to skip having to fulfill sure user-facing situations.
Class toggling can be utilized to set off modifications in look (e.g. different themes or states) and even animations, however it may be a bit of fiddly when doing it with developer instruments when it’s just for testing causes (i.e. the web site doesn’t truly operate that manner for customers). Just like the opposite bookmarklets, use this one to quickly toggle lessons and save your self time.
Create the next bookmarklet to focus on all components that match your chosen “SELECTOR”, which, in flip, toggles the “CLASS.”
javascript: doc.querySelectorAll(“SELECTOR”).forEach(aspect => aspect.classList.toggle(“CLASS”));
Coloration widget bookmark
Whereas not technically a “bookmarklet,” this bookmarkable knowledge URI by Scott Jehl opens up an <enter kind=”shade”> in a brand new tab:
So hey right here’s my new shade picker app!
It’s um, simply an HTML shade enter wrapped in a knowledge URI so I can bookmark it. (Be happy to take action your self):
knowledge:textual content/html;charset=utf-8,%3Chtmlpercent3Epercent3Ctitlepercent3EColor Pickerpercent3Cpercent2Ftitlepercent3Epercent3Cinput kindpercent3D”shade”%3Epercent3Cpercent2Fhtmlpercent3E pic.twitter.com/0QyFqAsUSq
— Scott Jehl (@scottjehl) August 19, 2021
knowledge:textual content/html;charset=utf-8,%3Chtmlpercent3Epercent3Ctitlepercent3EColor Pickerpercent3Cpercent2Ftitlepercent3Epercent3Cinput kindpercent3D”shade”%3Epercent3Cpercent2Fhtmlpercent3E
Why is that cool? Effectively, what number of instances have you ever wanted to seize a shade worth off a web page, solely to seek out your self cracking open DevTools, clicking by means of a bunch of components, and pouring over CSS properties to seek out the worth? Higher to run this little man, click on the aspect, and get a shade straight away!
What different bookmarklets are you able to consider?
Are there any overly repetitive internet improvement workflows that require you to make use of the net browser’s sometimes-awkward developer instruments? If that’s the case, it’s tremendous straightforward to create your personal time-saving bookmarklets. Simply bear in mind to begin the URL with javascript:!
And should you’ve made a bookmarklet to simplify your workflow, I’d like to see it! Share them right here within the feedback and let’s get a pleasant assortment going.
6 Helpful Bookmarklets to Increase Internet Improvement initially printed on CSS-Tips. It is best to get the publication.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!