6 Useful Bookmarklets To Spice Up Net Development
from web site
A bookmarklet is a JavaScript-based bookmark that adds to a web browser. I’d like to point out you some awesome web browser hacks to aid your net improvement workflow and the way to convert those hacks into time-saving bookmarklets.
1. Activating design mode
2. Applying a background to the whole lot
3. Simulating occasions
4. Setting cookies
5. Toggling ペットサロン ホームページ作成 . Coloration widget bookmark
7. What different bookmarklets can you consider?
Activating design mode
Design mode (styled as designMode since it’s a JavaScript property) is for who wish to experiment with variations of copy on a dwell webpage. For example, copywriters who prefer to observe how content reads within the movement of the website’s design, or, say, designers who want to make sure that text suits comfortably within a certain area at a certain font size.
JavaScript has a mightily simple feature that can render a complete HTML document editable. It works exactly like HTML’s contenteditable="true" identify-worth attribute (or contentEditable="true" in JavaScript) however for the whole doc. If you’d like to see how it works, begin by entering the browser’s console using the related keyboard shortcut:
Chrome: Possibility + ⌘ + J / Shift + CTRL + J
Firefox: Possibility + ⌘ + K / Shift + CTRL + Okay
Safari: Possibility + ⌘ + C / Shift + CTRL + C
Subsequent, kind doc.designMode="on" into the console, hit Return, and then click on any textual content element. You’ll see that this textual content component (and all different textual content components) are now editable simply by clicking on them. This methodology of editing text on a live web site is far faster than having to open DevTools, then proper-clicking and choosing the “Edit Text” choice… and far much less tiresome.
Whereas I’m unsure that “design mode” is probably the most correct description of the feature, it’s tremendous useful nonetheless and it’s actually been around for a very long time, surprisingly.
And what’s even a fair sooner way to enable it? A bookmarklet, in fact! Create a bookmark utilizing javascript: document.designMode="on";void 0; because the URL.
Applying a background to the whole lot
When HTML elements don’t have backgrounds, it can be difficult to visualize their bounds and/or accurately measure the distance between them and other components. Developers may want to raised visualize bounds when dealing with optical imbalance (i.e. when one thing “looks off” regardless that it’s not), margin collapse (when certain margins are ignored), numerous points with display:/float:/place:, and more.
Making use of backgrounds means making use of a semi-clear background to all HTML parts so as to better visualize their bounds and spacings. It’s something many people generally do by opening up DevTools then typing a CSS declaration like selector background: rgb(0 0 0 / 10%); into the “Styles” field. However again, it’s actually tiresome and repetitive - and something we will simplify with a bookmarklet.
Once once more, to create a bookmark, we’re going to make a URL. Here’s what we can use for this one:
We’re using a semi-transparent background as a result of the transparency stacks, which ensures that every nested component is distinguishable and the distances between them may be measured.
Simulating occasions
Have you ever ever had to check an internet event that first requires a collection 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 used to immediately set off particular occasions, making testing a breeze.
Simulating an event means coding a “throwaway” button that triggers a JavaScript occasion, making it a lot simpler to shortly and repeatedly take a look at the event with out having to meet any regular user-going through conditions, like needing to be logged in.
Assuming that you have your JavaScript event listeners arrange, create a bookmark for each event that you’d like to trigger/simulate and submit the following URL:
Replace “SELECTOR” along with your unique selector, substitute “click” with “focus” or “blur” (when obligatory), or lengthen the snippet to make it set off more complex occasions, like scroll.
Setting cookies
Cookies are tokens which are saved on a website visitor’s laptop by the website that they’re visiting. Cookies comprise data that can 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 information itself can store user info.
An example of a situation the place you might need to set a cookie using a bookmarklet is if you want to power a logged-in state throughout web site testing. Websites typically look very totally different for users which can be logged in, however, logging in and out ultimately becomes very tedious, so this bookmarklet can save fairly a little bit of time.
Manually writing expires= dates for cookies is awkward as heck, but fortunately this create-your-own-set-cookie-bookmarklet app can generate a bookmarklet for a selected cookie, if you realize its precise identify.
Toggling classes
You might want so as to add or remove a category from an HTML ingredient in order to trigger a contemporary state or a change in appearance, otherwise generally known as toggling lessons. Class toggling happens behind the scenes of most live web sites, nevertheless it can be used throughout testing to skip having to fulfill sure person-going through situations.
Class toggling can be utilized to trigger modifications in look (e.g. various themes or states) and even animations, however it may be somewhat fiddly when doing it with developer tools when it’s just for testing causes (i.e. the web site doesn’t really operate that method for customers). Much like the opposite bookmarklets, use this one to quickly toggle courses and save yourself time.
Create the following bookmarklet to focus on all components that match your chosen “SELECTOR”, which, in turn, toggles the “CLASS.”
Coloration widget bookmark
While not technically a “bookmarklet,” this bookmarkable data URI by Scott Jehl opens up an in a new tab:
So hey here’s my new shade picker app! It’s um, just an HTML color enter wrapped in a knowledge URI so I can bookmark it. (Feel free to do so yourself):
knowledge:text/html;charset=utf-8,%3Chtml%3E%3Ctitle%3EColor Picker%3C%2Ftitle%3E%3Cinput type%3D”color”%3E%3C%2Fhtml%3E pic.twitter.com/0QyFqAsUSq
Why is that cool? Effectively, what number of times have you ever wanted to seize a color value off a page, only to end up cracking open DevTools, clicking through a bunch of components, and pouring over CSS properties to seek out the value? Better to run this little man, click on the component, and get a coloration instantly!
What other bookmarklets can you think of?
Are there any overly repetitive web development workflows that require you to use the web browser’s generally-awkward developer tools? If that's the case, it’s super easy to create your individual time-saving bookmarklets. Simply remember to start out the URL with javascript:!
And if you’ve made a bookmarklet to simplify your workflow, I’d love to see it! Share them here in the feedback and let’s get a nice collection going.
1. Activating design mode
2. Applying a background to the whole lot
3. Simulating occasions
4. Setting cookies
5. Toggling ペットサロン ホームページ作成 . Coloration widget bookmark
7. What different bookmarklets can you consider?
Activating design mode
Design mode (styled as designMode since it’s a JavaScript property) is for who wish to experiment with variations of copy on a dwell webpage. For example, copywriters who prefer to observe how content reads within the movement of the website’s design, or, say, designers who want to make sure that text suits comfortably within a certain area at a certain font size.
JavaScript has a mightily simple feature that can render a complete HTML document editable. It works exactly like HTML’s contenteditable="true" identify-worth attribute (or contentEditable="true" in JavaScript) however for the whole doc. If you’d like to see how it works, begin by entering the browser’s console using the related keyboard shortcut:
Chrome: Possibility + ⌘ + J / Shift + CTRL + J
Firefox: Possibility + ⌘ + K / Shift + CTRL + Okay
Safari: Possibility + ⌘ + C / Shift + CTRL + C
Subsequent, kind doc.designMode="on" into the console, hit Return, and then click on any textual content element. You’ll see that this textual content component (and all different textual content components) are now editable simply by clicking on them. This methodology of editing text on a live web site is far faster than having to open DevTools, then proper-clicking and choosing the “Edit Text” choice… and far much less tiresome.
Whereas I’m unsure that “design mode” is probably the most correct description of the feature, it’s tremendous useful nonetheless and it’s actually been around for a very long time, surprisingly.
And what’s even a fair sooner way to enable it? A bookmarklet, in fact! Create a bookmark utilizing javascript: document.designMode="on";void 0; because the URL.
Applying a background to the whole lot
When HTML elements don’t have backgrounds, it can be difficult to visualize their bounds and/or accurately measure the distance between them and other components. Developers may want to raised visualize bounds when dealing with optical imbalance (i.e. when one thing “looks off” regardless that it’s not), margin collapse (when certain margins are ignored), numerous points with display:/float:/place:, and more.
Making use of backgrounds means making use of a semi-clear background to all HTML parts so as to better visualize their bounds and spacings. It’s something many people generally do by opening up DevTools then typing a CSS declaration like selector background: rgb(0 0 0 / 10%); into the “Styles” field. However again, it’s actually tiresome and repetitive - and something we will simplify with a bookmarklet.
Once once more, to create a bookmark, we’re going to make a URL. Here’s what we can use for this one:
We’re using a semi-transparent background as a result of the transparency stacks, which ensures that every nested component is distinguishable and the distances between them may be measured.
Simulating occasions
Have you ever ever had to check an internet event that first requires a collection 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 used to immediately set off particular occasions, making testing a breeze.
Simulating an event means coding a “throwaway” button that triggers a JavaScript occasion, making it a lot simpler to shortly and repeatedly take a look at the event with out having to meet any regular user-going through conditions, like needing to be logged in.
Assuming that you have your JavaScript event listeners arrange, create a bookmark for each event that you’d like to trigger/simulate and submit the following URL:
Replace “SELECTOR” along with your unique selector, substitute “click” with “focus” or “blur” (when obligatory), or lengthen the snippet to make it set off more complex occasions, like scroll.
Setting cookies
Cookies are tokens which are saved on a website visitor’s laptop by the website that they’re visiting. Cookies comprise data that can 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 information itself can store user info.
An example of a situation the place you might need to set a cookie using a bookmarklet is if you want to power a logged-in state throughout web site testing. Websites typically look very totally different for users which can be logged in, however, logging in and out ultimately becomes very tedious, so this bookmarklet can save fairly a little bit of time.
Manually writing expires= dates for cookies is awkward as heck, but fortunately this create-your-own-set-cookie-bookmarklet app can generate a bookmarklet for a selected cookie, if you realize its precise identify.
Toggling classes
You might want so as to add or remove a category from an HTML ingredient in order to trigger a contemporary state or a change in appearance, otherwise generally known as toggling lessons. Class toggling happens behind the scenes of most live web sites, nevertheless it can be used throughout testing to skip having to fulfill sure person-going through situations.
Class toggling can be utilized to trigger modifications in look (e.g. various themes or states) and even animations, however it may be somewhat fiddly when doing it with developer tools when it’s just for testing causes (i.e. the web site doesn’t really operate that method for customers). Much like the opposite bookmarklets, use this one to quickly toggle courses and save yourself time.
Create the following bookmarklet to focus on all components that match your chosen “SELECTOR”, which, in turn, toggles the “CLASS.”
Coloration widget bookmark
While not technically a “bookmarklet,” this bookmarkable data URI by Scott Jehl opens up an in a new tab:
So hey here’s my new shade picker app! It’s um, just an HTML color enter wrapped in a knowledge URI so I can bookmark it. (Feel free to do so yourself):
knowledge:text/html;charset=utf-8,%3Chtml%3E%3Ctitle%3EColor Picker%3C%2Ftitle%3E%3Cinput type%3D”color”%3E%3C%2Fhtml%3E pic.twitter.com/0QyFqAsUSq
Why is that cool? Effectively, what number of times have you ever wanted to seize a color value off a page, only to end up cracking open DevTools, clicking through a bunch of components, and pouring over CSS properties to seek out the value? Better to run this little man, click on the component, and get a coloration instantly!
What other bookmarklets can you think of?
Are there any overly repetitive web development workflows that require you to use the web browser’s generally-awkward developer tools? If that's the case, it’s super easy to create your individual time-saving bookmarklets. Simply remember to start out the URL with javascript:!
And if you’ve made a bookmarklet to simplify your workflow, I’d love to see it! Share them here in the feedback and let’s get a nice collection going.
