DEV Community: ARG

5 Tasks You Didn't Know Could be Done from the Developer Console

ARG — Sat, 01 Jun 2019 09:56:32 +0000

Note: The original/canonical version of this post includes a few of these demos built into the webpage['s console] via script tags.

As they say, no one uses more than ten percent of any piece of software’s features, but everyone uses a different ten percent.

Similarly to HTML and CSS, as well as Google Sheets, the browser’s developer console has a number of tricks that can be used that you probably didn’t know about.

Intro

For those of you new to the console, it is a debugging tool built into various browsers' development tools. Here’s a crash course:

Right Click -> Inspect Element
From the window that’s just opened, find the tab labeled "console"; the layout varies between browsers
Type this into the console and press enter:
- console.log("Some Text");

Congratulations. You are a hacker and can follow along with the rest of this article.

Custom CSS for console.log()

A standard console.log() statement looks like this:

console.log("asdf")

Starting a console.log() command with %c allows for arbitrary CSS to be injected as a second parameter, such as what is done here with this command:

console.log("%c adsf", "color:blue;font-size:600%;")

// This command also works (space not required):
console.log("%cadsf", "color:blue;font-size:600%;")

// Which allows you to do shit like:
console.log("%cGOOD JOB OPENING THE CONSOLE", "color:brown;font-weight:bold;font-size:600%;");

Edit Any Content on a Webpage

Sometimes, you have to edit webpages for debugging purposes or to make fake screenshots. While you can do this fairly easily from the developer console, the contenteditable property, which can be used to make content editable, makes this even easier to do. Enter the following line of code to the developer console to make the entire page editable:

document.body.contentEditable=true

console.table()

Similarly to console.log(), the console.table() function can be used to display arbitrary data in the developer console. The function, which takes in arrays, objects, JSON, and other values, can be used to display tables of data. For example, this:

console.table({"Idaho":1751000, "Texas":28700000, "Maine":1338000})

Will display a table of the key-value pairs passed into the function as JSON data.

Similarly, console.group(), console.groupEnd(), and console.groupCollaposed() can be used for better organization of debugging messages output to the console.

Data Extraction

For example, if you want to extract all of the URLs from a webpage, you can use the following command:

var t = document.querySelectorAll("a");
var output = {};
for (var iii = 0; iii < t.length; ++iii) {
output[ iii ] = t[iii].getAttribute('href');
} console.table(output);

Or if you want to get slightly more advanced, you can use this command to get a table with innerHTML and rel data as well:

var t = document.querySelectorAll("a");
var output = {};
for (var iii = 0; iii < t.length; ++iii) {
output[iii] = {"href":t[iii].getAttribute('href'), "rel":t[iii].getAttribute('rel'), "innerHTML":t[iii].innerHTML};
} console.table(output);

Shorthand Data Extraction

Since there are basically limitless possibilities as to what you can scrape from the console, it’s useful to know that there are shorthands for the querySelector and querySelectorAll methods. Specifically:

$('a') is the same as document.querySelector('a')
$$('a') is the same as document.querySelectorAll('a'), with the exception that $$ returns an array instead of a NodeList

Remove CSS and Other Headers

The head tag can be used to include various helpful pieces of information, or it can be used to inject garbage. If you’re on some other website and you want to remove their stylesheets, JavaScript, and other headers, you can do this by executing the following command from the console:

document.head.parentNode.removeChild(document.head);

Among other things, this can be used to prevent those "pls pay us $1 per month to read D-tier fluff stories" messages from loading in a few seconds after the initial pageload on various tabloids.

Honorable Mentions

Similarly to console.log(), console.info(), console.warn(), and console.error() can be used to display data to the console at various levels of importance.
Stupid shit, like autoclicking in Cookie Clicker.
console.time() and console.timeEnd() can be used to time performance.
Refer to the last input’s result with $_. Ex:
- Enter "10*12" into the console
- Then enter $_ after submitting that command as a shortcut to refer to that result.
You can (at least in FireFox and Chrome) use a dark theme instead of a light theme through the settings menu. HA HA LMAO DAE USE THE DARK THEME?!

In Conclusion

Congratulations. You now know some debugging tricks that you didn’t know previously, unless you did. Now you can ignore them to continue to use alert("asdfjla").

Feel free to comment below with additional tricks and/or complaints about muh Safari.

6 Open-Source Alternatives to Proprietary Software: Self-Hosted Applications

ARG — Fri, 31 May 2019 07:46:51 +0000

Using FOSS software is a great way of getting free access to valuable services and retaining your privacy and independence when you do it. Whether you’re running your own business on a tight budget or just want to use social media without fear of corporations stockpiling your personal info, there are tons of free and open source alternatives to the mainstream proprietary software that you’re probably used to.

FOSS software also fosters communities and the sharing of knowledge. For those that have the hardware and time, there are tons of benefits to self-hosting sites built on open-source software. Here are 6 of the best open-source, self-hosted applications and how they compare to their proprietary counterparts.

For Part 2 of this article (FOSS Desktop Apps), click here.

6 Open-Source Alternatives to Proprietary Software

Matomo (vs Google Analytics)

Formerly known as Piwik, Matomo is a web analytics application that, as of June 2018, was used by over 1,455,000 websites to track online visits and generate analytical reports. Although the standard version of Google Analytics is free, using it entails that your data is shared with Google, which you may or may not have an issue with. Meanwhile, if you want to spring for Google Analytics 360 (which, let’s be honest, is unnecessary), the price jumps up to an astounding $150,000 per year.

With Matomo, you have the option to download the program for free and self-host or pay for the hosted version. Matomo has many of the same features as Google Analytics, such as metrics on the number of people visiting your websites, what pages visitors are coming from, their geographic location, bounce pages, and more. Matomo also integrates with over 100 content management systems, forum platforms, and e-commerce shops, including things like WordPress and Magento. With Matomo you don’t risk having your data shared with third parties.

https://www.youtube.com/watch?v=yA2NUur0770

For more info, see this thread discussing site analytics software.

Mastodon (vs Twitter)

Mastodon is a free and open-source social media network with an interface very much like Twitter. Users can post “Toots” (not Tweets) of text, images, or videos and reply to or boost (re-Tweet) other Toots.

Although Tweets have a restrictive 140 character limit, Mastodon users can include up to 500 characters in a Toot, as well as include a content warning or special privacy settings if needed.

Aside from being open-source, Mastodon is also decentralized, meaning that the network is comprised of independent Mastodon instances. Servers can be kept private for more focused communities, and users can choose to sort their timelines by either their local server or the federated view of all Toots coming onto your server from other instances.

https://www.youtube.com/watch?v=IPSbNdBmWKE

There are plenty of cool things about Mastodon, and it seems to be steadily growing in popularity. More info about Mastodon can be found in this thread.

PeerTube (vs YouTube)

PeerTube is a platform that offers an alternative to proprietary video sharing platforms such as YouTube, Vimeo, and Dailymotion.

Just like Mastodon, PeerTube is decentralized. Anyone can make their own PeerTube instance with its specific moderation policies and guidelines. These can then come together to form federations with other federations that agree on the same policies.

https://www.youtube.com/watch?v=PJIsiuSdpq8

You can download PeerTube here and read more about the platform in this article.

Commento (vs Disqus)

Like Disqus and other commenting platforms, the open-source software Commento can be embedded right into your blog or website for your readers to use and includes other standard features such as nesting threads, upvotes/downvotes, and moderation tools.

Compared to similar platforms, Commento is absurdly fast and lightweight. It is also privacy-focused and can be downloaded and hosted for free. There is also a paid option if you want to use Commento but not host it yourself, but even this has very reasonable payment options.

Please refer to this article for more information about Commento.

Mattermost (vs Slack)

If you’re worried about losing your old Slack messages and don’t want to upgrade to the paid plan, Mattermost is a nice alternative that offers all of the important team chat features you would ever need. It even allows you to import current Slack channels and archives, making the transition to Mattermost very seamless.

Mattermost includes all of the major features that Slack does: private and public chat channels, the ability to nest threads, and more. Mattermost is very customizable and features good support for archived threads.

https://www.youtube.com/watch?v=FuDvrkrqRzg

Here is a download link for Mattermost. As a couple of honorable mentions, other popular FOSS team chat applications include Rocket.Chat and Riot.im.

osTicket (vs Zendesk Chat)

There are many alternatives, both free and paid for, for the Zendesk Chat (formerly known as Zopim) ticketing system software. One that stands out is osTicket, which is easy-to-use and lightweight while still providing all the features needed from a ticket system.

osTicket is completely free and can be configured to meet your needs. It provides statistics on your help-desk activity, the ability to customize help desk topics, and a ticket filtering system. The full features can be read about here.

Is Self-Hosting Best for You?

There are some potential drawbacks to self-hosting these platforms. For one, you’ll need dedicated hardware to host them and the time to maintain it. Additionally, some of these open source platforms must be configured and are not necessarily read to go right out of the box.

The upside of having to configure your own platforms, of course, is that they are much more customizable, and you can make them whatever you want them to be. They may be a bit more work to set up and maintain, but this can be well worth it for the budgetary benefits and increased independence.

Follow Up Article on 256KB

7 MORE Open-Source Alternatives to Proprietary Software: Desktop Applications