My cat

He's a cool cat

@@ -532,7 +532,7 @@ I won't go into as gory details as [here](https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b), but for your basic smartphone, you can copy and paste this block: -```htmlcss +```css @media screen and (max-device-width: 480px) { // override your tags here body { @@ -551,7 +551,7 @@ your CSS attributes, so that size is always defined relative to all the other elements. This makes functions like zoom work a lot better. You can for example put a pixel value like this: -```htmlcss +```css body { font-size: 14px; } diff --git a/tutorials/splunk/how-to-debug-a-splunk-app.html b/tutorials/splunk/how-to-debug-a-splunk-app.html new file mode 100644 index 0000000..4ef1fea --- /dev/null +++ b/tutorials/splunk/how-to-debug-a-splunk-app.html @@ -0,0 +1,30 @@ + + + + + + +how-to-debug-a-splunk-app + + + + + + + diff --git a/tutorials/www/how-to-use-the-internet.html b/tutorials/www/how-to-use-the-internet.html new file mode 100644 index 0000000..daabfe7 --- /dev/null +++ b/tutorials/www/how-to-use-the-internet.html @@ -0,0 +1,155 @@ + + + + + + +how-to-use-the-internet + + + + + +

Why?

Why would anyone want to use the Internet, really?

There is actually purpose to connecting all the computers in the +world with near-instant speed beyond just streaming television, phishing +scams, pornography, punditry, and Fortnight competitions.

Unfortunately, almost none of us use the Internet for it's intended +purpose: finding infomation.

Writing an angry tweet to a celebrity or posting a picture of your +cat seems to be second nature for most people, but converting a picture +from a PDF or looking up a study (or even a word!) you saw in an article +is something else entirely.

While that's in part the fault of our laziness, it's equally the +fault of what the Internet has become.

For one: there's just so much more stuff now; it's hard to +know exactly where to start and who to trust. And so much of that stuff +is now garbage, either in the way it's presented, with +disruptive ads that don't close correctly, or in the way it's written: +vague, misleading, or straight incorrect.

For two: no one really teaches you how to use this thing do they? +There are no courses on "How to use a search engine" or "How to find +good posts on a forum," and definitely not on "How to write +good posts on a forum." But these are exactly the kinds of skills you +really need if you want to navigate the modern world without getting +constantly distracted, misled, or totally lost.

There are of course, countless guides on "netiquette" geared towards +every possible internet subculture you can find. While many of them have +influenced this document and give many helpful tips on writing good +informative posts, none of them really go over what I think is most +important: what to do with the information you're reading.

This will probably be an evolving document as new services and +websites become available (or go down), but much of this material in the +beginning should be pretty generally applicable no matter what services +are available.

How to use a web browser

This is your main vehicle to the information super highway (remember +when they used to call it that?)

Almost everyone knows how to use a web browser to click links and get +to where they need to go, but use only a fraction of the software's +power. Web browsers at this point are as complicated as operating +systems. Aside from basic HTML and javascript rendering, most web +browsers are expected to provide:

A PDF reader
An image display
A history database with tunable settings
Support for hundreds of languages and emojis
A password manager
A video and audio player
A scripting language for extending functionality

And that's only what I can think of...

How to use a search engine

As for which search engine to use: you should use all of them, until +you get the results you need.

In my experience, none of the major search engines are particularly +good and I get inconsistent searches on all of them depending on what +I'm searching. There is a lot of preaching these days about privacy +concerns, but I don't really believe any service is more "private" than +another. These are all privacy nightmares, arguably by design. Your best +bet is just to search often and as many platforms as you can.

Basic search syntax

Searching for specific pieces of information is rather simple.

"Who is the prime minister of England?"

"When did World War 2 start?"

"How many roads must a man walk down?"

"Funky Kong talks you through your divorce"

All of these queries entered as is will get you the result you're +looking for. But how about something we can't boil down to a single +question? Like how to do calculus? Or how to learn Python?

You could try those phrases as a start. But you're not likely to get +a specific answer out of this.

...

What if we wanted to bring up a funny cat meme we saw on a forum +three weeks ago? Searching for "funny cat meme" is not going to get you +very far.

How to read and find +scholarly articles

How to use Wikipedia

A common complaint lodged at me whenever I recommend Wikipedia is +that it's not a source of truth since they found X mistake somewhere, or +made Y edit when they were a teenager that's still there. No one has +ever (or should ever) claim Wikipedia is a source of truth on it's own. +But you can use it to find more sources and maybe get a little +closer.

How to find articles +with Google Scholar

Advanced Topics

How to use tor to browse +anonymously

Many in the advertising world will boast about using a VPN for +anonymity, or using a VPN in conjuction with Tor to "increase privacy." +This is simply a misunderstanding of terms. A VPN provides +privacy of the user's connection since it provides +encryption--only the VPN provider can "see" what is searched. The goal +of Tor is anonymity not privacy. Anonymity means "no one knows +who you are" not "no one knows what you're doing." Technically, traffic +is encrypted between nodes of the Tor service, so some level of privacy +is provided as well, but this is most effective when using hidden +services, not using Tor in general.

+ + + diff --git a/tutorials/www/quick-intro-html-css.html b/tutorials/www/quick-intro-html-css.html index 05302d8..1ea2fbf 100644 --- a/tutorials/www/quick-intro-html-css.html +++ b/tutorials/www/quick-intro-html-css.html @@ -465,18 +465,18 @@ using a CSS file.

For any HTML tag, you can set an attribute that applies everytime it appears in an HTML document that links to the CSS file. A common formatting I use for paragraphs is:

p {
-    margin-top: 1.5%;
-    margin-bottom: 1.5%;
-}

p {
+    margin-top: 1.5%;
+    margin-bottom: 1.5%;
+}

And to highlight code, like you've been seeing, I use:

code {
-    display: inline-block;
-    font-size: 125%;
-    background-color: #d8d8d8;
-    white-space: pre-wrap;
-    word-wrap: break-all;
-}

code {
+    display: inline-block;
+    font-size: 125%;
+    background-color: #d8d8d8;
+    white-space: pre-wrap;
+    word-wrap: break-all;
+}

I get pretty much all the attribute names just by looking them up here. But in order these lines:

Images get more styles in CSS than I can document in detail, but one important bit you'll want to probably add to all images is the following.

img {
-    max-width: 100%;
-    height: auto;
-    width: auto;
-}

img {
+    max-width: 100%;
+    height: auto;
+    width: auto;
+}

This does the following:

constrains the image so it doesn't stretch the page

In addition to this basic stuff, you can style your images heavily using the filter option like so:

img.gray {
-    filter: grayscale(100%)
-}

img.gray {
+    filter: grayscale(100%)
+}

Applied:

You can read lots more options for image formatting here and about @@ -520,19 +520,19 @@ the filter property img { - filter: invert(50%); -} +

img {
+    filter: invert(50%);
+}

For one, that will only dim black-and-white images; anything else will just turn to mush like this:

Instead, I'd like it to just apply to select elements; I can do so by extending the tag with a class. On the CSS side:

img.icon {
-    filter: invert(50%);
-}

img.icon {
+    filter: invert(50%);
+}

And to implement it in HTML:

<img class="icon" src="/static/media/rss.svg" />

<img class="icon" src="/static/media/rss.svg" />

Use the div tag to make sections

.content {
-    text-align: center;
-    max-width: 85%;
-}

.content {
+    text-align: center;
+    max-width: 85%;
+}

Notice, no leading tag. This can be applied to any element, but usually we use a placeholder tag called "div." You can think of "div" like a divider for content of similar style. In the present example, we can use the class we made with a div tag:

<div class="content">
-<h1>My cat</h1>
-<p>He's a cool cat</p>
-<img src="/cat.jpg" />
-</div>

<div class="content">
+<h1>My cat</h1>
+<p>He's a cool cat</p>
+<img src="/cat.jpg" />
+</div>

Mobile Optimization

In early development, reading this site on my phone was a painful experience. Fortunately, in addition to some tricks above like the @@ -563,12 +563,12 @@ allow you to directly manipulate your website based on properties of the user's device or web browser.

I won't go into as gory details as here or here, but for your basic smartphone, you can copy and paste this block:

@media screen and (max-device-width: 480px) {
-    // override your tags here
-    body {
-        font-size: 125%;
-    }
-}

@media screen and (max-device-width: 480px) {
+    // override your tags here
+    body {
+        font-size: 125%;
+    }
+}

This basic example makes the text slightly bigger on smartphone screens, but you can change everything you need to. I typically find I need to adjust the padding or the margins since it seems mobile browsers @@ -577,9 +577,9 @@ add a little more style than a typical desktop web browser.

body {
-    font-size: 14px;
-}

body {
+    font-size: 14px;
+}

But this binds the size to 14 pixels which may look great on desktop, but small on a smart phone.