The Hypertext Zone

What are the Rules of Acquisition?

Tue, 29 Oct 2019 00:00:00 +0000

I've made a website about the Ferengi Rules of Acquistion, found here: Rules of Acquisition. The goal was to make a fun project which would be filled with Star Trek in-jokes. I think I (mostly) succeeded here.

The Ferengi Rules of Acquisition appear in the TV series "Star Trek: Deep Space Nine" and other iterations of Star Trek. The Ferengi are aliens who are obsessed with profit, viewing greed and the willingness to exploit as virtues. This is exemplified in their "Rules of Acquisition," a book listing principles of Ferengi business practices, including:

Once you have their money, you never give it back.
Every man has his price.
Treat people in your debt like family - exploit them.

Here's a video listing all of the Rules that are considered canon:

Since not every rule exists in canon, I used some non-canon sources and filled the missing space with an explanation that certain rules would require someone to pay, which is something a Ferengi might do.

Redesign!

Sun, 09 Jun 2019 00:00:00 +0000

You may have noticed that the site has been redesigned!

I was already considering redesigning hypertextzone.net, but didn't know how to go forward. Eventually I settled on using a diagonal menu in the design, and a variation on KDE's Breeze color scheme. All I needed to use to create the menu was a transform: skewY(-5%) and an SVG.

The icon at the top of the screen is the icon I usually use on social media. Sometime in the future, I'll put my actual face there. But not now.

The redesign is still in development and I look forward to adding/readding more features.

HTML5 Video Backgrounds

Wed, 06 Mar 2019 00:00:00 +0000

Spain Project

I made a quick website for Spanish class that you can see here: Hola, España. There's not much of a writeup needed here, as a lot of the design aspects were reused from the Geneaology Project. However, there is one interesting new thing: the background video. Using video backgrounds allows one to create advanced animations without using Javascript. They can be found on the websites for Magic: The Gathering and Webflow

Make anything a background

CSS has a very useful property z-index. If you want one element to appear behind the rest, set a negative z-index. If you want one element to appear above the rest, set a positive one. This way, anything with a very low z-index can be effectively in the background.

The `<video>` Tag

The <video> tag was introduced in HTML 5. It's one of the more difficult-to-use tags, as unlike <img>, ansrc attribute won't set the source of the video. You have to include a <source> tag inside the video, and that has the src attribute. Furthermore, you have to explicitly set how the video will play as a series of attributes - <video controls> is a video using the browser's built-in controls, and <video autoplay loop> has the video automatically start and loop.

That may seem unnecessarily difficult, but it does have one key advantage - the user can set multiple sources, so if the browser cannot render the video from one source, then it can switch to another. Furthermore, if the <video> tag is unsupported, the content inside the tag will appear as text, allowing sites to send errors when video, or indeed HTML5 in general, is unsupported.

Videos, like images, can have width and height set as attributes or as CSS properties, and the z-index can be applied, but if you apply width, height, and z-index, you might notice that it's still being sized improperly. The fix for this is the object-fit property. As it turns out the property is very similar to background-size, so setting it to cover will fix the problem.

The story of u/ObviousReplyBot

Sat, 09 Feb 2019 00:00:00 +0000

Hello reddit!

If you're reading this, you probably found a backlink to my site. Furthermore, I'm going to guess it's from somewhere on Reddit. In that case, hello, Redditor! If you've looked on the comments section of anything with more than 1000 upvotes in the last few days, you might have seen my bot, u/obviousreplybot. You probably hated it, or maybe you thought it was funny. Either way, I'm writing this article.

Let it be understood that this bot was not created out of malice towards the subreddits I replied with, nor was it created out of a desire to troll anyone. Mainly, I wanted to see what would happen, and I was not disappointed.

The Beginning

On Reddit, there is a subreddit called r/thirdsub, a subreddit that essentially just replies whenever there is a chain of multiple subreddits. Since its inception, r/thirdsub has become the laughingstock of Reddit. Subreddits like r/ShootingFishInABarrel make fun of how easy it is to reply with r/thirdsub, and popular instances get replies asking them to edit the screenshot when posting it to the actual r/thirdsub.

Now somebody, somewhere, thought: this sub is such an automatic reply, I can make a bot do it! Subreddits usually allow bots to automatically do their work, usually having useful functions like previewing subreddits. Replying to every subreddit chain with r/thirdsub was not that. Nonetheless, the u/thirdsub_bot made a splash.

Another incident that occured: there's a subreddit, making fun of replies like r/thirdsub, called r/everyfuckingthread. Somebody, somewhere, thought it would be funny to link to r/everyfuckingthread in every actual fucking thread. And so, EFTBot was created. It got banned almost immediately from almost everywhere. but it had a good run.

I thought recently that r/thirdsub isn't the only automatic reply. There are also subs like r/TwentyCharacterLimit, which is automatically replied when a fake subreddit name exceeds the 21-character limit on subreddit names. I'd already made a news bot for GNU social/Mastodon (albeit I used someone else's code), so how hard could it be? I decided to make a bot that covered as many of these cases as I could.

Let's make a bot!

To start with, I created the accound u/obviousreplybot and an API account to go along with it. Next, I created the subreddit r/ivanastantest so as to avoid spamming subreddits (until I launched, that is). Last, I programmed the bot, based on the LMGTFY bot's source code. I started with r/TwentyCharacterLimit, then r/SubsYouFellFor, then r/itswooooshwith4os. It worked pretty smoothly so I started testing it on r/memes.

I realised I forgot to inhibit duplicate replies, so I added that feature, thankfully before unleashing it on r/all. The rate limiting on reddit for accounts with only 1 karma was oddly useful in testing since it helped me avoid making too many comments during my test.

Another issue I ran into was that determining when to reply was much harder than I thought. I thought that r/TwentyCharacterLimit would work on any post containing "r/" and more than 23 characters, but then there are subreddits in sentences, subreddit names in links, links to individual posts, and people who use "/r/" rather than "r/".

The final version of the bot also supported r/thirdsub among other things, and it worked by checking randomly sorted comments the top 100 posts of r/all (later the top 200 posts of r/all) and replying to them when certain cases were detected. As I added features, the bot's code became spaghetti code, and I really don't like how it turned out in that respect.

The Fallout

So I released the bot into the wild. For a while there were numerous bugs I had to deal with but I fixed them quickly. I also added later on random descriptions for posts, to make it more interesting. Most people thought it was cool, and upvoted my description post or said "Good bot."

Eventually r/ShootingFishInABarrel and r/EveryFuckingThread users started to catch on, and public opinion turned against the bot. I was mostly able to ignore the negative messages me and my bot received. I got a few feature requests, like adding "Perfectly balanced as all things should be." I was planning on making posts on r/thirdsub when I got "put me in the screenshot" requests for my bot, but the r/thirdsub community had me covered. You can't comment once every 10 minutes on a post on the front page without getting noticed.

I moved the bot from my laptop to my server, where I realized it never emptied its memory. I fixed that bug in the hackiest way possible, by killing the bot every twelve minutes and restarting it, occasionally rebooting the server...

I realized the "Perfectly balanced" feature would spam a person with "As all things should be," and accidentally replied to u/Obsidian2289 four times before I found the bug (if you're reading this, I'm so sorry).

One of the most spectacular moments was when the bot - not my account, the bot account - was invited to moderate r/TitansTV, a DC subreddit, and received full permissions! Yes, that actually happened. Check the moderator list!

The end

r/funny was the first subreddit to ban my bot, followed by r/MurderedByWords. Both at least claimed to not allow bots. The first subreddits to ban me despite allowing bots were r/natureismetal and r/gifs. Furthermore, in subreddits where the bot was not banned, occasionally its posts were removed.

r/SubsYouFellFor requested that it stop linking to them (which I did). This for a time significantly reduced how often the bot replied.

I decided that I'd stop the bot when it started replying at a less-than-hourly frequency. However, some of my bans actually seemed to increase the rate at which my bot replied, probably because it was quicker to process comments if the bot can't reply to them and is forced to reset its loop.

Two days after releasing the bot into the wild, I was getting a bit bored of haing a bot spam my own inbox by linking to my account across Reddit, so I killed the bot program on my server and removed the restart script. It was very fun to watch the reaction of most of Reddit, but all good things must come to an end.

The future

I might make another bot again in the future. It probably won't be a meme bot like this one, since this bot was the ultimate in that.

Maybe I could make an html2text bot - that is, a bot that, when summoned, creates a reddit post from a link. Maybe I could make a bot that, when summoned, plays Colossal Cave Adventure. There's already such a bot on Twitter. It sounds like a fun challenge to make one on Reddit.

Actually, speaking of Twitter, there's a Python library for that too! Maybe I could make a new Twitter bot. I wouldn't be able to do the low-effort memes of Twitter (like "Twitter for Android") since that is against Twitter's rules (not just against etiquette as on Reddit). But Twitter does allow bots, so it's something to think about.

Maybe obviousreplybot will come back if I ever feel like making it come back. That would be fun.

I think, though, that I'll just focus on website design and development and see where that takes me.

If you want to see the source code, please tell me and I might post it on GitLab in the public domain. Fair warning, though, it's a mess and should not be used as a template for your own bot. If you want to make a bot, I recommend starting with the LMGTFY bot instead.

Oh, and check out the two creators I recommended with my bot - C418 and Hbomberguy.

Writeup: Geneaology Project

Wed, 06 Feb 2019 00:00:00 +0000

For the Gifted and Talented program at my school, I was asked to make a project about my family history. My mother recommended that I read my great grandfather's autobiography, so I built my project around that. Originally I was going to make a slideshow, but I figured I needed to develop my skills in web development, so I made a site instead. This article will focus on the design elements - the content of the page will speak for itself. The only thing I will say about the content here is that it was a bit more emotionally taxing to make than most projects, given its personal nature.

The project is here: Ode to William Ray Kastning

Color scheme

I wanted to use alternating colors because I thought that'd look cool. I went for colors #ddd and #bbb at first, but found that scheme a bit too dark, so I used #eee and #ddd instead.

3DFX

I experimented with it before on this website, but this is the first time I've actually used fixed background attachment (better known by the buzzword parallax scrolling). Paired with a drop shadow it creates a nice 3D effect where the content appears above the banner. Implementing this is quite simple:

.class {
  background-image: url('https://picsum.photos/1920/1080?random')
  background-attachment: fixed;
  background-postition: bottom;
}

Making the text stay with the fixed image required a non-intuitive solution. Instead of making the text absolutely positioned within the image, I had to make the text fixed within the body and set the z-index of the whole banner to -1.

To create the box shadow with so many elements I simply wrapped all of the content in a div. It is quite difficult to make a good box shadow. I would simply recommend setting the horizontal and vertical sizes to zero and color to black or dark gray and playing with blur and spread radius for the optimal shadow. Exceptions to this rule are if you want an off-center shadow (vary horizontal and vertical size) or if you want to use the box shadow to make a glow effect (change shadow color).

Testing

I tested this on every browser engine apart from Microsoft Edge and NetSurf. It worked pretty well, though I noticed the browsers had different font preferences, so I set the default to Cantarell. I then found after reloading that weights below 400 were being ignored. I ultimately switched to Open Sans Light to fix the issue.

Navbar

I added a navbar as a result of Mom's insistence that I include multiple pages. It was rather difficult to get just right - specifically, I found that either the links were unclickable or the header continued to pop over the text. I won't go into all of the paramaters I had to tweak to get it to work, because there were so many and I seriously doubt my solution will be helpful to those with the same problems.

The brand "Stories by Ivan Stanton" was just something I thought of as an umbrella term for other simple projects like this one. I don't plan on trademarking it or selling it (yet), but I do plan on using it for future projects, and maybe if I make enough of them it could be a whole site.

Conclusion

The last thing I added was a page describing William's family history. Because I couldn't keep up the alternating images thing, I had to add a special class to add padding so I could create an article with this theme.

Modding Minecraft with Datapacks

Tue, 29 Jan 2019 00:00:00 +0000

Minecraft is either the first or second best-selling game of all time, depending on whether Tetris is one game or not. I played it quite some time ago, and have since decided to return to playing the game. I discovered that there were some new updates that were quite interesting.

In update 1.13, Minecraft released a new feature called datapacks. These allowed players to customize the following:

Console commands
Commands to run every "tick" and when the level is loaded
Generated structures
Crafting recipes
Achievements
Mobs have been announced

A long time ago, Mojang AB announced the development of a "Minecraft API" which would allow players to modify the game, and this is basically it. Until now, modifying crafting recipes would have been impossible normally.

Of course, you can't make an API without programming, so let's look into that.

JSON

JSON (Javascript Object Notation) is a data-interchange format designed to be easy to parse, generate, read, and write. Minecraft also uses JSON for metadata about its versions and resource packs, so it is natural that JSON would be used for data notation in mods. A JSON file for a recipe might look something like this:

   {
       "type": "crafting_shaped",
       "pattern": [
           "TTT",
           "#X#",
           "#R#"
       ],
       "key": {
           "R": {
               "item": "minecraft:redstone"
           },
           "#": {
               "item": "minecraft:cobblestone"
           },
           "T": {
               "tag": "minecraft:planks"
           },
           "X": {
               "item": "minecraft:iron_ingot"
           }
       },
       "result": {
           "item": "minecraft:piston"
       }
   }

This says the following:

I want to make a shaped crafting recipe
The pattern should be "TTT#X##R#"
T is wood, # is cobblestone, X is iron, and R is redstone
The crafting recipe is to make a piston.

Where's the programming?

Minecraft has had an in-game console for some time that allows players to interact with the in-game world in numerous ways, so in essence, all of the programming is done in scripting a sequence of commands. Prior to the 1.13 update, someone had gone as far as to make an Atari emulator using commands, so it's fair to say they're versatile enough. I still wish there was more to do with them, though.

So those are datapacks, in a nutshell. I hope this feature evolves into a full plugin API. In the meantime, check out something I created with datapacks.

Learn CSS 2.6: The Box Model

Wed, 09 Jan 2019 00:00:00 +0000

Learn CSS 2.6: The Box Metaphor

It's been a while since I last did a Learn CSS article or any article at all, so I'm well overdue to make one.

If you've been reading Learn CSS up to this point, you will have learned to resize and recolor objects. But if you try to create a website this way, you likely won't be satisfied with the nearly-wall-to-wall text or the fact that objects with 100% width don't actually take up 100%. Both of these issues can be resolved with a set of properties which add space outside of the edge of an element's content.

In CSS, elements are squares with a defined height and width (circles, etc. can be made by rounding corners and other tweaks). This is why the space an element takes up is called its box. The components of a box are illustrated in this image (via Wikimedia Commons):

The CSS padding: attribute specifies the size of the "padding" area of the box in terms of the width/height of each side, in the order "top, left, bottom, right." For example:

div {
    padding: 20px 40px 20px 40px
}

That code would add whitespace 20px tall on the top and bottom, and 40px wide on the sides. The same syntax is used for the margin: property, except that property is used to set the size of the margin, which is outside of the border.

To set the contents of the border area, you can use the border:, border-left:, border-right:, and border-top, border-bottom: properties to set the color and size of the border. border sets all borders, whereas the others set the border for one side. All of these use the format size type color, and the following types are available:

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden

For example - if you want anything with "class=example" to have a red 4px border which is dotted at the top, dashed at the left, and solid everywhere else, the code would look like this:

.example {
    border: 4px solid red;
    border-left: 4px dashed red;
    border-top: 4px dotted red;
}

You can also add a round border if you use border-radius: to set the "roundness" of the border as a size.

A look at -webkit-text-stroke

Thu, 20 Dec 2018 00:00:00 +0000

In a previous article, I talked about a gradient wipe with CSS. Turns out that isn't the only cool graphical feature available in Safari CSS. In fact, there appears to be a whole suite of these features. One of these is text-stroke.

The -webkit-text-stroke: and -moz-text-stroke: properties draw a border around text. This is the same property seen in the Traditional Meme Format, which uses the white Impact or Anton font and adds a text stroke.

Unfortunately, as the names might suggest, cross-browser support for this feature is very limited. Most browser engines, including WebKit and Chrome, only have support for a center-aligned stroke, which can look quite ugly, as Chris Coyier of CSS Tricks explained. TL;DR - most characters vary their width and spacing, but strokes don't, and they end up ruining that spacing.

In Firefox and Safari (Webkit) only, you can use the paint-order: property for this. By setting paint-order: stroke fill you can make the text appear "above" the stroke, thus creating what looks like an outside-aligned stroke. But an inside-aligned stroke is still impossible.

But hey, at least you can make memes in which the text is actually text! (linked here, shown below)

Raspberry Pi Emulator-Console Tutorial

Tue, 11 Dec 2018 00:00:00 +0000

RetroArch is AWESOME!

RetroArch is a program that basically exists to manage emulators in one interface. It is the official front-end of Libretro, a library that allows emulators to be packaged as libraries. It isn't the only front-end to Libretro; also available are EmulationStation and GNOME Games. However, Retroarch provides more features than either of them.

For example, RetroArch can manage an endless number of controllers and shaders, and has its own set of content made specifically for Libretro, which can be downloaded from the interface. Retroarch has nearly every feature an emulator needs, and some emulators don't need, set up for a number of emulators.

Not only does RetroArch have its own games, it has an operating system which uses RetroArch to turn a small computer into a gaming console. This is Lakka, and you'll be using it to create your own game console.

Requirements

You'll need these items, many of which can be found in kits like the Canakit:

Raspberry Pi 3 or above: The ideal computer for Lakka is the Raspberry Pi, which is not only small but cheap (only $15-35) and easy-to-use. Older versions of the Pi will not be able to emulate games for the Playstation or N64, which are more resource-intensive.
16GB+ microSD card: The "hard disk" of the Raspberry Pi.
A USB keyboard: A backup if controllers don't work.
A USB controller (PS4, X360, Nintendo Switch, some others; optional), a microUSB power adapter, an HDMI cable, and a, HDMI display.

Setting up

Install Etcher on your computer, then download Lakka. Open Etcher, select the Lakka image, and plug in your microSD card (you may need to use an adapter). You should now be able to click "Flash!"

Once Etcher is done flashing the SD card, eject/unmount it and plug it in to the Raspberry Pi. Plug the Raspberry Pi into a display using HDMI and into a wall outlet using the power adapter.

You should see a rainbow screen, followed by the logo. If it stays at the rainbow screen for over a minute you have used a corrupted disk image.

Once Lakka boots up, plug in a keyboard or controller, and use arrow keys/D-pad to scroll to "Restart" so that it can perform some important actions.

Once it reboots, go to Settings -> Wi-Fi and choose your WiFi network, then enter the password to log in to WiFi. You may wish to go to Content Downloader -> NXEngine and select the first item to download the indie classic Cave Story, then add it to the menu by going to the "+" menu, selecting Scan Directory -> Downloads -> Scan This Directory. Also, if you want to transfer files to the Pi, read these instructions.

You might have issues with the controller; I personally recommend getting a USB keyboard as backup for this reason. If your controller's D-Pad is moving through the menu too fast or the buttons are set improperly, unplug it, then plug in your USB keyboard and navigate to Settings -> Input -> Input User 1 Binds. Then move to User 1 Bind All without pressing enter. Plug in your controller now and press enter. You can now set the controller properly.

Making a Forum with FlatBoard

Mon, 03 Dec 2018 00:00:00 +0000

So you might have noticed that I have a forum now for website comments. I'm using Flatboard, a rather obscure forum software, for the forum, mainly because my incompetence with SQL prevents me from using things like phpBB or NodeBB. In addition to being forum software, Flatboard can be a community blog as well. If you're in the same situation, here's how to install Flatboard. Because like Pico, the documentation is quite incomplete.

Installation

First, you'll need to download Flatboard. Extract the two files flatboard.zip and index.php somewhere in the folder where your HTTP documents are stored (usually /var/www/html). Make sure you have the following configured on your webserver:

PHP 5.3+ with PHP-ZIP and PHP-MBString modules
Apache mod_rewrite with AllowOverride All (I don't think this is needed but just in case)

Change the ownership of both files and the folder containing them to www-data:www-data. Then, open the place where you installed Flatboard in a browser and click Unpack. Then enter appropriate content into the username, password, and email fields.

Is Flatboard Good?

Flatboard is a very easy-to-set-up bulletin board, with configurable folders and theming, that can also be used as community blog. It has all the features that are necessary and not many that are unnecessary. It is for those reasons that I use it.

On the other hand, I can imagine it getting slow with time (though I can't be sure). Theming is difficult, as theme files are very splintered and use pure PHP. The community is small and documentation is scattered. CAPTCHAS are used, but they can easily be bypassed by advanced bots. For those reasons, I would not recommend Flatboard if you are able to use SQL or NodeJS.

A brief history of GNU/Linux

Mon, 03 Dec 2018 00:00:00 +0000

Unix

The Unix operating system was created by Ken Thompson and Dennis Ritchie at AT&T Bell Laboratories in 1969 and 1970, along with C, one of the first programming languages. It was one of the first operating systems that could be used on multiple different computers.

The Computer Systems Research Group at the University of California at Berkeley developed an operating system based on Unix 6 called BSD, though AT&T sued to stop development in the early 1990s.

In 1983, a programmer named Richard Stallman decided to quit his job at MIT and start the GNU project, a project with the goal of creating a clone of Unix whose source code would be available under a permissive license, called GNU (for GNU is Not UNIX). The announcement was posted on the Unix Wizard board on the Usenet forum:

Free Unix!
Starting this Thanksgiving I am going to write a complete
Unix-compatible software system called GNU (for Gnu's Not Unix), and
give it away free to everyone who can use it.  Contributions of time,
money, programs and equipment are greatly needed.

To begin with, GNU will be a kernel plus all the utilities needed to
write and run C programs: editor, shell, C compiler, linker,
assembler, and a few other things.  After this we will add a text
formatter, a YACC, an Empire game, a spreadsheet, and hundreds of
other things.  We hope to supply, eventually, everything useful that
normally comes with a Unix system, and anything else useful, including
on-line and hardcopy documentation.

GNU will be able to run Unix programs, but will not be identical
to Unix.  We will make all improvements that are convenient, based
on our experience with other operating systems.  In particular,
we plan to have longer filenames, file version numbers, a crashproof
file system, filename completion perhaps, terminal-independent
display support, and eventually a Lisp-based window system through
which several Lisp programs and ordinary Unix programs can share a screen.
Both C and Lisp will be available as system programming languages.
We will have network software based on MIT's chaosnet protocol,
far superior to UUCP.  We may also have something compatible
with UUCP.

Who Am I?

I am Richard Stallman, inventor of the original much-imitated EMACS
editor, now at the Artificial Intelligence Lab at MIT.  I have worked
extensively on compilers, editors, debuggers, command interpreters, the
Incompatible Timesharing System and the Lisp Machine operating system.
I pioneered terminal-independent display support in ITS.  In addition I
have implemented one crashproof file system and two window systems for
Lisp machines.

Why I Must Write GNU

I consider that the golden rule requires that if I like a program I
must share it with other people who like it.  I cannot in good
conscience sign a nondisclosure agreement or a software license
agreement.

So that I can continue to use computers without violating my principles,
I have decided to put together a sufficient body of free software so that
I will be able to get along without any software that is not free.

How You Can Contribute

I am asking computer manufacturers for donations of machines and money.
I'm asking individuals for donations of programs and work.

One computer manufacturer has already offered to provide a machine.  But
we could use more.  One consequence you can expect if you donate
machines is that GNU will run on them at an early date.  The machine had
better be able to operate in a residential area, and not require
sophisticated cooling or power.

Individual programmers can contribute by writing a compatible duplicate
of some Unix utility and giving it to me.  For most projects, such
part-time distributed work would be very hard to coordinate; the
independently-written parts would not work together.  But for the
particular task of replacing Unix, this problem is absent.  Most
interface specifications are fixed by Unix compatibility.  If each
contribution works with the rest of Unix, it will probably work
with the rest of GNU.

If I get donations of money, I may be able to hire a few people full or
part time.  The salary won't be high, but I'm looking for people for
whom knowing they are helping humanity is as important as money.  I view
this as a way of enabling dedicated people to devote their full energies to
working on GNU by sparing them the need to make a living in another way.

Development started in 1984. He used the TRIX kernel (a kernel is a program that coordinates between hardware and software) which had previously been developed by MIT. In 1985, the Free Software Foundation was started to fund GNU development.

By 1990, GNU had a functional operating system, but TRIX was rather buggy, so it was necessary to replace it. The FSF began negotiations to create an open-source version of the Mach kernel, created by Professor Rashid at Carnegie Mellon University. These negotiations never finished.

Linux

In 1987, Andrew S, Tannenbaum released his own Unix clone called MINIX, which was made specifically for educational use. THe source code was made available, but redistribution was restricted and it was designed for 16-bit computers rather than the increasingly popular Intel 386's 32-bit architecture.

In 1991, Linus Torvalds, a student at the University of Helsinki, started developing another free Unix clone called Freax as a hobby project, which he announced on the Internet forum Usenet, in a section dedicated to Minix:

Hello everybody out there using minix -

I'm doing a (free) operating system (just a hobby, won't be big and
professional like gnu) for 386(486) AT clones.  This has been brewing
since april, and is starting to get ready.  I'd like any feedback on
things people like/dislike in minix, as my OS resembles it somewhat
(same physical layout of the file-system (due to practical reasons)
among other things). 

I've currently ported bash(1.08) and gcc(1.40), and things seem to work. 
This implies that I'll get something practical within a few months, and
I'd like to know what features most people would want.  Any suggestions
are welcome, but I won't promise I'll implement them :-)

        Linus (torv...@kruuna.helsinki.fi)

PS.  Yes - it's free of any minix code, and it has a multi-threaded fs. 
It is NOT protable (uses 386 task switching etc), and it probably never
will support anything other than AT-harddisks, as that's all I have :-(.

Linus Torvalds created what we now know as the Linux kernel and ported several GNU utilities to create the operating system. He published it on FUNET FTP in September, under a non-commercial license.

Server administrator Ari Lemmke hated the name Freax and thought a better name for the OS would be Linux (after Linus Torvalds), so on the FTP server he renamed the files to Linux. Though Ari did so without Torvalds' consent, Torvalds also liked the name, so he kept it.

In 1992, Linus Torvalds changed Linux's licensing terms to use GNU's license, the GPL, which promoted commercial usage. The first Linux distributions, Yggdrasil LGX, MCC Linux, and Softlanding Linux were released, using the Linux name rather than the GNU name because it was simpler. Parts of Unix and BSD were also open-sourced. The GNU project was now successful in a way, even though they didn't get their choice of the name.

By 1993, over 100 developers were now working on Linux, many of whom were from the GNU project, and who needed a kernel for GNU. The Linux kernel was adapted to GNU's environment and updated to work with one another. Softlanding Linux became Slackware Linux, the oldest surviving Linux distribution, and Debian GNU/Linux was created as another replacement for Softlanding Linux.

Microsoft Loves Linux, Microsoft Hates Linux

Throughout 1994 and 1995, many people noticed that nobody had trademark rights to Linux and tried to register the trademark. Linus Torvalds eventually successfully sued for the rights and gave them to the Linux Mark Institute, which was dedicated to protecting the trademark. In 2000, the Open Source Development Lab was created as a group optimising Linux for server use. Linus Torvalds got a job there after losing his previous job to the company's bankruptcy.

In 1998, IBM, Compaq, Oracle, and Netscape all began supporting Linux, with IBM even creating an ad campaign targeted at server owners. Red Hat, a company created specifically for Linux, achieved widespread success.

Microsoft saw Linux as a threat to Windows's marketshare, so in 1998 they discussed the potential of creating proprietary software for Linux that users couldn't live without, then removing support for said software to get those users to move to Windows, in a strategy called "Embrace, Extend, Extinguish." In 2004, Microsoft and Linux distributors released conflicting studies regarding the reliability and security of Linux.

The need emerged to protect Linux from Microsoft competition, so the OSDL merged with the Linux Mark Institute and Free Standards Group to create the Linux Foundation for that purpose in 2007. Later, though, starting in 2009 Microsoft started contributing to the Linux kernel in order to gain leverage over its developers, and even became a major contributor to the Linux Foundation.

Linux on the desktop

Most Linux distributions used the X Window System, which was created in 1984, along with a window manager which added window controls and a virtual terminal, to create the user interface. In 1996, developer Matthias Ettrich was concerned about the inconsistencies in the user interfaces of Linux's applications and proposed that an advanced, Windows-like desktop be created in a post on Usenet's German Linux board:

             -------------------------------------------
             New Project: Kool Desktop Environment (KDE)
             -------------------------------------------

                         Programmers wanted!

Motivation
----------
Unix popularity grows thanks to the free variants, mostly Linux. But still a
consistant, nice looking free desktop-environment is missing. There are
several nice either free or low-priced applications available, so that
Linux/X11 would almost fit everybody needs if we could offer a real GUI.

Of course there are GUI's. There is the Commond Desktop Environment (much
too exansive), Looking Glas (not too expensive but not really the solution),
and several free X-Filemanagers that are almost GUI's. Moxfm for example is
very well done, but unfortunately it is based on Motif.  Anyway, the
question is: What is a GUI? What should a GUI be?

First of all, since there are a lot of missunderstandings on this topic,
what is NOT a GUI:

- the X-Window-System is NOT a GUI. It's what its name says: A Window system

- Motif is NOT a GUI. They tried to create a GUI when they made Motif, but
  unfortunately they couldn't really agree, so they released Motif as
  Widget-Library with a Window-Manager. Much later they completed Motif with
  the CDE, but too late, since Windows already runs on the majority of
  desktops.

- Window-managers are NOT GUI's. They are (better: should be) small programs
  that handle the windows. It's not really the idea to hack a lot of stuff
  into them.

IMHO a GUI should offer a complete, graphical environment. It should allow a
users to do his everyday tasks with it, like starting applications, reading
mail, configuring his desktop, editing some files, delete some files, look
at some pictures, etc.  All parts must fit together and work together. A
nice button with a nice "Editor"-icon isn't not at all a graphical user
environment if it invokes "xterm -e vi". Maybe you have been disappointed
long time ago too, when you installed X with a nice window manager, clicked
on that beautiful "Help"-Icon ... chrk chrk (the hard disk)...an ugly,
unsuable, weird xman appeared on the desktop :-(

So KDE was created. The first few versions were criticized because they used Qt, which had a restriction on modification, so the GNOME desktop environment and Harmony toolkit were created by GNU to either replace KDE or Qt. GNOME adapted code from and image editor called GIMP into a replacement for Qt, called GTK, and the Harmony project was cancelled. In 1998, Qt was made open source.

In 2011, GNOME released a new version (GNOME 3) whose interface was designed primarily for tablets. This led GNOME 2 to be forked into the MATE project.

X quickly became obsolete, so in 2008 the Wayland project was started to replace it. Wayland has now superseded X in GNOME, and is planned to in KDE.

Furthermore

Google uses the Linux kernel (but not any of GNU) in their Chrome OS and Android operating systems.

Sources

https://www.gnu.org/gnu/gnu-history.en.html

https://www.gnu.org/software/hurd/history.html

https://en.wikipedia.org/wiki/History_of_Linux

https://groups.google.com/forum/#!original/comp.os.minix/dlNtH7RRrGA/SwRavCzVE7gJ

https://groups.google.com/forum/#!msg/net.unix-wizards/8twfRPM79u0/1xlglzrWrU0J

https://groups.google.com/forum/#!msg/de.comp.os.linux.misc/SDbiV3Iat_s/zv_D_2ctS8sJ

https://en.wikipedia.org/wiki/History_of_free_and_open-source_software

Linus Torvalds' autobiography, "Just For Fun"

General Guidelines for Mobile Site Building

Fri, 30 Nov 2018 00:00:00 +0000

Tip Number 1: Meta Viewport

Make sure to include this tag in your <head>. It will automatically change the size of the text on your site depending on the size of the screen. Otherwise, your text will look really small:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

Tip Number 2: Optional sidebars

Sidebars take up vertical space on the screen. Generally you don't want the website to scroll in both directions, and you want there to be enough space for the text on mobile. So don't include a sidebar on your website. If you must include a sidebar, make sure that it can be shown or hidden using a button. This code can be very useful:

<script>
if (document.getElementById("sidebar").style.display == "none") {
 document.getElementById("sidebar").style.display == "block"
}
else {
 if (document.getElementById("sidebar").style.display == "block") {
  document.getElementById("sidebar").style.display == "none"
 }
}
</script>

If you are padding your text areas to add whitespace, I recommend changing the padding scheme using a @media query when your site is smaller/larger:

.textcontainer {

    padding: 30px 30px 30px 30px;   
}
@media screen and (min-width: 1000px) {
    padding: 25% 60px 60px 25%;
}

In general, anything large and vertical should be either optional or removed on mobile.

Tip 3: Mobile first

Design your website for vertical smartphones first, then add special features to make it better on mobile. This helps your site load faster because smartphones will load slower than desktops, especially if they have to load the special "exceptions" made for mobile devices.

Learn CSS 2.5: Classes and IDs

Thu, 29 Nov 2018 00:00:00 +0000

Last time

Last time we learned:

How to change the font, size, and alignment of text

Very useful features.

Professional web developers usually end up using a lot of <div>s, since they are the simplest tag whose only default rule is display: block; (what does that mean? We'll learn later.) So how do they make them all look different?

Enter classes and IDs. Classes allow a developer to categorize elements and style each category. Meanwhile, IDs give each element a unique name which can be referenced in a stylesheet. Giving an element a class or id is as simple as adding a class= or id= attribute. Classes are referred to as .classname and IDs as #id

Take for example, the following code:

<div class=myfirstclass></div>
<div class=myfirstclass id=myfirstid></div>
<div class=mysecondclass id=mysecondid></div>
<div class=mysecondclass id=mythirdid></div>
<div></div>

There are five tags here. A CSS rule for .myfirstclass would affect the first two. #myfirstid would affect only the second tag. Meanwhile, div would affect all of them. So, with:

<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=device-width, initial-scale=1" />
<style>
.myfirstclass {
    color: red;
}
.mysecondclass {
    color: blue;
}
#myfirstid {
    background-color: green;
}
#mysecondid {
    background-color: orange;
}
#mythirdid {
    background-color: purple;
}
</style>
</head>
<body>
<div class=myfirstclass>I used to find Slashdot delightful,</div>
<div class=myfirstclass id=myfirstid>But my feelings of late are more spiteful,</div>
<div class=mysecondclass id=mysecondid>My comments sarcastic</div>
<div class=mysecondclass id=mythirdid>The iconoclastic</div>
<div>Keep modding to plus five (insightful).</div>
</body>
</html>

The first two lines will have red text, the second two will have blue text, and the lines in order will have white, green, orange, purple, and white backgrounds, despite all of them being DIVs. Limerick credit: XKCD

Learn CSS 2.3: Sizing

Wed, 28 Nov 2018 00:00:00 +0000

Last Time

Last time, we learned:

Seven ways to change colors and when to use each

Starting anew

Let's start again with a basic CSS template, but this time, we're going to be using a <div>:

<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta charset=utf-8>
<style>
</style>
</head>
<body>
<div></div>
</body>
</html>

We're going to give the <div> a background color of black. Add this to the <style> tag:

div {
  background-color: #000;
}

Remember that #000 is black in 3-digit hexadecimal RGB notation.

Now, we're going to resize it to see how much of the screen is black. At the moment, opening your file in the browser should show that nothing is black.

To resize an item, you use the height and width properties of an element. You can also use max- and min- versions of these.

Pixel units

div {
  background-color: #000;
  height: 50px;
  width: 100px;
}

You can define how tall and wide an element is in pixels or px for short. Pixels are usually 1/96 of an inch. The above code should result in the div being a small rectangle.

Point units

div {
  background-color: #000;
  height: 50pt;
  width: 100pt;
}

Points , or pt for short, are 1/72 of an inch on the screen. For elements you want to scale to the screen, they can be useful. The above code should resuly in a slightly larger rectangle than the last example.

Em Units

div {
  background-color: #000;
  height: 50em;
  width: 100em;
}

An em is one times the font size of the document (usually 12pt). Ems are useful for creating sites that scale to the screen. The above code should create a very large rectangle.

Rem Units

div {
  background-color: #000;
  height: 50rem;
  width: 100rem;
}

A rem is one times the font size set to the <html> tag containing the document. It is useful for situations in which you want to use ems, but the text size of the containing element is set to a size other than 12pt.

Centimeters, millimeters, inches

div {
background-color: #000;
height: 50mm;
width: 50mm;

You can also size items in centimeters (cm), millimeters (mm), or inches (in) of the screen.

Picas

div {
  background-color: #000;
  height: 50pc;
  width: 100pc;
}

Here's an obscure one. One pica (pc) is always equal to 12pt.

Character Height

div {
  background-color: #000;
  height: 50ch;
  width: 100ch;
}

One ch is equal to the width of the letter 0 in the current font.

"x" height

div {
  background-color: #000;
  height: 50ex;
  width: 100ex;
}

One ex is equal to the height of the lowercase X in the current font.

Other ways to size things.

Also available are percent of the screen (%), percent of the screen height (vh), and percent of the screen width (vw), and percent of the screen's smaller/larger dimension (vmin/vmax), but I was unable to get them to work properly for this demonstration.

In conclusion, CSS offers many ways (at least six) to change an element's size. Next article - fonts and text sizing

Learn CSS 2.4: Typography

Wed, 28 Nov 2018 00:00:00 +0000

Last Time

Last time we learned:

Many ways to size an element in CSS
The background-color property

Now we'll see how to work with fonts.

Starting anew, once again!

This time we'll be dealing with an <h1> element. Start with this:

<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta charset=utf-8>
<style>
</style>
</head>
<body>
<h1>Some beautiful text</h1>
</body>
</html>

px, pt, em, rem, ex, ch

Pixels, points, ems, rems, and most other units (the units previously discussed) work pretty much the same for fonts. 1px is one pixel, 1pt is 1/72 inch, 1em is one times the previous font size, and 1rem is one times the font size of <html>.

To set the size of one rem, add this to <style>:

html {
    font-size: 12pt;
}

%, vw, vh, vmin, vmax

For fonts, there are more ways to resize the text. As an alternative to ems, you can size text in percent:

h1 {
    font-size: 200%;
}

100% is equal to 1em, so 200% is equal to 2em or 2x the font size, which in this case is 24pt.

You can also use VW and VH (stands for viewport width/height) to specifically refer to the width or height of the screen when sizing text. Example: for text that is 3% of the screen width:

h1 {
    font-size: 3vw;
}

Or 3% of the screen height:

h1 {
    font-size: 3vh;
}

You can also size an element in terms of percent of its larger or smaller dimension, using vmax units for percent of the larger dimension and vmin units for percent of the smaller dimension.

All of these percentage units are useful for text that changes its size between mobile and desktop screens.

Fonts!

Now fonts are where it can get complicated. We talked about fonts in Learn HTML 1.4 previously.

Fonts are added using the font-family property:

h1 {
    font-size: 1rem;
    font-family: sans-serif;
}

CSS has five built-in font types, which browsers assign to different fonts installed on the system. These are serif (Times New Roman), sans-serif (Arial), monospace (Courier New), cursive (Comic Sans), and fantasy (Impact). For most purposes you will want to use sans-serif.

In addition to those, you can also use any font that will be installed on the system viewing the item. Be careful, because not everyone has the same fonts!

h1 {
    font-size: 1rem;
    font-family: "Segoe UI";
}

If you really want to use a certain font badly, you can add it to your page. For now, I won't talk about how to do so. Instead, I recommend using Google Fonts for beginners as it can generate simple embed links for a selection of fonts. This way, you can ensure that the font will be available on almost all systems that access your site, not just those that happen to have your font.

Even then, it's generally recommended to have a fallback font which is one of CSS's built-in font types. You can do that by adding a comma after your preferred font, then add your fallback font. For example: font-family: "Segoe UI", sans-serif;.

Addendum: Text Alignment

h1 {
    font-size: 1rem;
    font-family: "Segoe UI";
    text-align: center;
}

The CSS text-align property is useful to properly align text to the "left", "right", or "center". You can also use "justify" to space the text so that every line is the same width; this makes text less readable so I recommend NOT using it.

Next article, on CSS classes

Fixing TLS Connection Issues in Debian 10

Tue, 27 Nov 2018 00:00:00 +0000

With Debian 10's release fast approaching, you might not know about a change that could affect functionality.

OpenSSL maintainer Kurt Roeckx modified OpenSSL's default configuration such that by default, only TLSv1.2 is used, due to security issues with TLS 1.0. This could break certain networks that use EAP-PEAP for authentication and do not support TLSv1.2. He did add a news item in the Debian documentation warning about this change, but I'm not sure many people will read it.

If you are administrator of your computer and have issues connecting to networks that use EAP-PEAP or certain old websites, do the following:

Open a terminal.
Enter sudo nano /etc/ssl/openssl.cnf (NOT .conf!) and enter your user password.
A text editor will open. Go to the bottom of the file and you will see the line: MinProtocol: TLSv1.2
Change it to MinProtocol: None.
Reboot.

Your system should now work with older sites and networks. Keep in mind that this setting shouldn't be applied to a production server, as it can lead to security risks.

Learn CSS 2.2: Color Notation

Tue, 27 Nov 2018 00:00:00 +0000

Last time

Last time we learned:

The <div> and <span> tags as generic tags to aid styling
The <style> tag to enclose a CSS stylesheet
A basic CSS stylesheet

We made a CSS stylesheet which was as follows:

p {
    color: orange;
}

But what if you want more than simple colors? What if you want a precise shade of green, or purple, or blue?

Luckily, there are actually seven-ish ways to denote colors in CSS. Let's look at them, one by one, shall we?

Built-in colors

p {
    color: orange;
}

CSS has 140 built-in colors (listed here) for you to use. These include the primary and secondary colors, several grays, and several variations.

The HSL (HSV) color model

p {
 color: hsl(32, 90%, 60%);
}

A lot of drawing apps use the HSL color model, which uses values for "hue", the exact color you want, "saturation", the amount of color or greyness of the color, and "lightness" or how bright the color should be.

In CSS, hue is expressed as a quantity between 0 and 360 (corresponding to degrees from red on the color wheel) while saturation and lightness are expressed in percent. All is formatted as hsl(0-360, 0%-100%, 0%-100%)

The HSLA color model

p {
 color: hsla(32, 90%, 60%, 0.7);
}

To make HSL colors transparent, change to HSLA and add the opacity value (a decimal) to the end.

The RGB color model

p {
    color: rgb(255,128,0);
}

Computer screens work by displaying tiny red, green, and blue lights at just the right intensities to create the illusion of color. Red, green, and blue are used instead of red, yellow, and blue because of how the eye works; we have red, green, and blue photoreceptors in our eyes.

Because computers work in a binary system, it is most convenient to express the amount of red, green, and blue in a program as amounts between 0-255, since 255 is 2⁸-1. You'll need three of these numbers: the first is red, then green. then blue. Enclose them in parentheses preceded by "rgb" for rgb(0-255,0-255,0-255).

The RGBA color model

p {
    color: rgba(255,128,0,0.7)
}

If you want to make something transparent while using RGB, make it RGBA and add the opacity value (as a decimal) afterwards.

24-bit Hexadecimal RGB

p {
    color: #ff8000;
}

Binary is hard to read; it's just a bunch of ones and zeros, and it takes a long time to write. To solve this, a lot of things use hexadecimal, which is base 16. Hexadecimal uses all of the decimal digits and then A through F.

Instead of noting a color with three numbers between 0-255, you can define them as hexadecimal numbers with two digits, since in hexadecimal, 100-1=FF, which is 255 in hexadecimal.

Because computers know that the color will have exactly two digits, they do not need commas anymore. All the need is a number symbol (#) to tell them it's a color in this format.

12-bit Hexadecimal RGB

p {
    color: #f80;
}

CSS will also accept three hexadecimal digits, with each being either red, green, or blue. This is arguably the most compact way to write any color (unless it's red, in which case there's a one-character improvement).

Conclusion

There are many ways to write a color in CSS. Which one to use depends on what computers and browsers you want your site to work on, whether you want to make your text transparent, and personal preference.

Read the next article about sizing!

Learn CSS 2.1: Useful HTML and My First Style

Fri, 23 Nov 2018 00:00:00 +0000

I recommend reading Learn HTML first. Or alternatively, you may want to see the previous Learn HTML.

Why learn CSS?

CSS is a stylesheet language, i.e. a programming language used to determine the look and feel of an HTML or XML file. If you know HTML already, CSS can improve your websites significantly.
Good CSS can make your website look modern, like all of the fancy websites of today.
Without CSS, a site is just a document; CSS is what makes it great.

This course will mainly teach you the basic syntax of CSS, since a lot of CSS's features can be searched for on the fly.

The `<div>` and `<span>` tags

The <div> and <span> tags are special HTML tags that are very useful when styling text with CSS. The <div> tag is like a paragraph without any spacing, used as a catch-all tag in web design.

Meanwhile, <span> is a special tag that takes the smallest width reasonable, just wrapping around other elements. It can be useful for getting sizes right.

Starting out

To start out, use this template for each page on which you want to style.

<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta charset=utf-8>
<style>
</style>
</head>
<body>
<p>Hello world!</p>
</body>
</html>

The <style> tag encloses a CSS stylesheet, so you'd put your styling options there.

CSS syntax

CSS uses a curly brace {} to determine when the style for a specific tags begins or ends. Additionally, individual rules are listed as property: value;.

One example of a property is color, which changes the color of the text inside the element. To make some text orange, for example, you would use color: orange;

Now let's create a basic stylesheet to make paragraphs orange. To do that, simply place this within the <style> tag of your HTML file.

p {
    color: orange;
}

The "Hello world!" text in the template should now appear orange.

Read the next article

Learn HTML 1.4: Addendum

Fri, 23 Nov 2018 00:00:00 +0000

Addendum: Tables

Tables are useful for placing things side-to-side, or just for use as a table.

To create a table, use the <table> tag. Each row is defined with <tr>, and within rows, columns are defined with <td>.

An example of a table:

<table>
    <tr>
        <td>Row 1 Column 1</td>
        <td>Row 1 Column 2</td>
    </tr>
    <tr>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
    </tr>
</table>

The table should look like this:

Row 1 Column 1	Row 1 Column 2
Row 2 Column 1	Row 2 Column 2

Addendum: Centering and Fonts

The following two attributes are deprecated because of the advent of CSS, but you may still find them useful.

Centering text is as easy as putting it in a <center> tag. For example:

<center><h1>Centered Header</h1></center>

Changing text fonts is done with a <font> tag. The font tag has the size, color, and face (font) attributes. size is the font size relative to the default; color is the text color; face is the font.

For example, to make a green heading using the "Segoe UI" font:

<font face="Segoe UI" color=green size=2>Green Segoe Header</font>

Code Snippet: Rendering Markdown pages as HTML

Thu, 22 Nov 2018 00:00:00 +0000

I haven't done any Javascript on this site yet. That's because I'm not very experienced with Javascript. Still, I know my way around it.

I put together a quick code snippet to render a page formatted in Markdown as HTML. There's a library called Marked.js which is usually used with Node.js, but can also be used entirely clientside. It includes a function called marked(string) which takes a Markdown-formatted string and outputs an HTML-formatted string.

We'll use it along with the (usually built in) XMLHttpRequest function to create a useful utlity, which prompts for a Markdown-formatted page and displays it as HTML.

The result (plus my website's style) is here. I hope it is useful to you.

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Markdown page viewer</title>
</head>
<body>
<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Markdown page viewer</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
    function loadpage(url)
    {
        if (window.XMLHttpRequest)
        {
            request=new XMLHttpRequest();
        }
        else
        {
            request=new ActiveXObject("Microsoft.XMLHTTP");
        }
        request.onreadystatechange=function()
        {
            if (request.readyState==4 && request.status==200)
            {
                document.write(marked(request.responseText));
            }
        }
        request.open("GET", url, false);
        request.send();
    }
    loadpage(prompt("Location of Markdown"))
  </script>
</body>
</html>  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
    function pageload(theURL)
    {
        if (window.XMLHttpRequest)
        {// Using XMLHttpRequest
            response=new XMLHttpRequest();
        }
        else
        { // Using ActiveXObject
            response=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.write(marked(response.responseText));
            }
        }
        response.open("GET", theURL, false);
        xmlhttp.send();
    }
    loadXMLDoc(prompt("Location of Markdown"))
  </script>
</body>
</html>

App Review: Mark Text

Wed, 21 Nov 2018 00:00:00 +0000

Markdown is cool!

Markdown is a markup language created by John Gruber and the late Aaron Schwartz. Its design allows a user to write advanced pages using only a text editor, using number symbols to denote headings. You can also add links, images, line breaks, <hr>-like separators, preformatted areas, and code blocks - essentially, (almost) everything you need to make a website. And if that isn't enough, you can add HTML in the middle, provided that you are going to export it to HTML.

You might have used Markdown without even knowing it. It's used on Reddit, StackOverflow, and a number of other sites for formatting comments because it's so simple to implement and simple for users to use. PicoCMS, the content management system I use for this website, uses Markdown.

The only issue is that in an HTML editor or a document editor, you will never find a "save as Markdown" option. What if you want an editor that is both WYSIWYG and Markdown?

The answer to that question is Mark Text.

Using Mark Text

Mark Text is available for Windows, OSX, and Linux, and on Linux, it's available as Flatpak, AppImage, and portable, which makes it easy to obtain. It's open source (and supposedly, it will be forever), which is also great.

Mark Text uses a "virtual DOM" to render text. That means that as soon as you've typed in your MarkDown code, you can see what it will look like. The image above isn't a page. It's the actual Mark Text editor in action. This is one of the most useful features for me, because I can see what I am writing and it will still export to Markdown.

Too many features can make an application less versatile. Take for example a visual HTML/CSS editor which is also a CMS and a web server. It might be easier to use, but what if you want to publish to your own CMS or web server?

Fear not, because Mark Text won't limit you. Mark Text has three visual modes: Typewriter, Focus, and Source Code. Typewriter is default, Focus darkens certain elements so you may "focus" on the current paragraph, and source code. Source Code Mode lets you edit the Markdown directly in case the default syntax feels limiting. Since a text editor covers all of Markdown's capabilities (in both the CommonMark and GitHub standards), Mark Text is improved by, and not limited by, its features. It's also, thankfully, not a CMS or a web server.

Support for embedded HTML and YAML in Mark Text is limited, but it's definitely there. You can't customize the look and feel all that much, but you can choose between light and dark theme and change the fonts.

Should I use it?

Yes, you should use Mark Text if you are regularly editing Markdown. There are a few use cases for which it might not be optimal, and obviously if you aren't regularly editing Markdown, you should just use a text editor (it's really easy). If there's a better MarkDown editor for your use case, then you should use it.

Additionally, though Mark Text has syntax highlighting, it is definitely NOT an IDE, so it shouldn't be used as one.

Software Projects to Watch

Wed, 21 Nov 2018 00:00:00 +0000

I thought I'd list some projects that are great, but that don't quite have the features I need, so I'd really like them to be better. These are also projects I'd like to review in the future. I'm mainly talking about web software, but anything goes here.

List of projects I'm watching

CMS.js: Looking to become a strong blogging platform, possibly even better than Pico due to its static design, but it is missing search and pagination features. It's also somewhat difficult to set up and has some properties that are bad for UX. Still, it's blog-aware! And static! It almost draws me away from PicoCMS even without pagination and search! I previously heard about MDWiki, which is a wiki generator that runs client side and even more easily than CMS.js, but MDWiki is no longer developed and still depends on old versions of Bootstrap and JQuery.
WonderCMS: A good CMS with a built-in admin plugin, but it lacks any sort of blogging capability, and would be much better if Markdown were available for page editing.
Bolt CMS: Another great CMS, Bolt has an alluring array of features, including blogging support, an admin backend, and a larger community.
Grav: As you can see I did a great deal of research into content management systems. Most of it was before I made this website; I wanted to use a flat-file CMS, and had to choose which flat-file CMS to use, Grav is the most widely used flat-file CMS, and look at that list of features! The only reasons I didn't use it myself was because it required a newer version of PHP than I had access to at the time, it seemed more difficult to theme, and my tests on newer versions of PHP found it riddled with bugs.
Mosh: Promises to be a way better alternative to SSH, but there isn't much external support available for it.
Browsh: A command-line-based browser that uses headless firefox. It can ruin your Firefox configuration if you try to use it and doesn't play well with animations, also keyboard control is limited, but it somehow supports images and video, putting it far above other command-line browsers like Lynx. I reviewed Browsh here.
Falkon: First there was KDE Konqueror, but no one updated it anymore, so KDE needed a new browser. Then there was QupZIlla, and for its 3.0 version it joined the KDE project. And it was renamed to KDE Falkon. QupZilla was a great browser, and Falkon continues to live up to its name. If it can get past a few bugs, Falkon could become my new favorite browser.
Node.js: An up-and-coming alternative to PHP. Javascript isn't my strong suit, though, and most of the best web software are either static (like CMS.js) or PHP-based.
NixOS: I'm an avid Linux user, so when a distribution comes around that's as technically exciting as NixOS or its GNU-developed cousin GuixSD, I am very interested. Sadly, both remain hard to install.
Pico Content Editor; Could be a very useful content editor for PicoCMS, making good use of the other Users plugin, but currently lacks the ability to add new posts and is very difficult to implement. It's last here because there don't seem to be any plans to resolve my issues.

App Review: PicoCMS

Tue, 20 Nov 2018 00:00:00 +0000

PicoCMS is the content management system I use for this website. It purports to be blazingly fast and stupidly simple. So is this description accurate?

I discussed Pico in a previous article. This article will go a bit more in depth, providing a basic explanation of the application's features.

Installing PicoCMS

Installing PicoCMS starts with some relatively simple Apache and PHP setup. Apache and PHP must both be installed, along with Apache's mod_rewrite and the standard PHP modules.

Additionally, Apache must be configured to run PHP files with the appropriate PHP runtime and must have AllowOverride All for the HTAccess file to work. (I went into more detail in my first article).

Once everything is in place, installing Pico should be as easy as extracting its files to your httpdocs folder (usually /var/www/html) and changing the file ownership to www-data:www-data. Pico is a flat-file CMS, i.e. it has no database, other than the one that is already available.

Developing for PicoCMS

PicoCMS uses Twig for templating, so it's rather easy to create your own website template. Everything you need to know is in the official documentation. PicoCMS can use either YAML or PHP for configuration; YAML is very easy to use, and in fact is almost natural. Plugins can be writtin in PHP. Lastly, Markdown is used for content, which makes it possible to edit posts in a text editor intuitively.

The choice of languages makes it extremely easy to develop a PicoCMS website.

Secure by design or inconvenient by design?

PicoCMS has no admin backend. There are extensions that add one, but most of them are outdated. Some would argue that this is very inconvenient. Traditional CMS software like Grav and Wordpress include a comprehensive admin backend including at least a configuration editor and a content editor, and usually include multi-user support.

Indeed, having no admin backend is very limiting to PicoCMS; it means that it can only be used in settings where a chosen few webmasters have total control over the site's content. This also, however, makes it secure by design, as the only way to edit the site's content or settings is to have filesystem access.

I use SSHFS as an effective replacement for an "admin backend." I can simply edit the themes, plugins, and content from my desktop. It's not much less convenient than a traditional admin backend.

Extensibility

As Pico's own documentation states, it is not a blogging platform. However, I wanted to use it as one, and to do that is rather simple.

I installed the "pagination" and "search" plugins for Pico, and added a template called "post" which references "image", "title", "date" and "description" variables attached to each post in their YAML headers. The Pagination plugin allowed me to separate the main page into multiple pages and the Search plugin would allow users to search for pages on my website. Neither of these are default Pico functions, but they are added via plugins.

While it might be better to include these functions by default, an extensible CMS is a universal one, so I like that.

Conclusion

Pico is a great CMS, but it should only be used if ALL content is controlled by experienced webmasters. That means no comments and no social networks.

In cases where reader engagement is absolutely necessary, something like Wordpress should be used. If you want to build a forum, use something like phpBB. If you want to build a social network, use something like Mastodon. Inexperienced webmasters might benefit more from something like WonderCMS or Grav, which are easier to administrate and just as easy to install.

Star Trek Discovery Season 1 Was Actually Good

Mon, 19 Nov 2018 00:00:00 +0000

COPYRIGHT WARNING: Star Trek Discovery, the featured image, and all images in this article are not public domain. They are used under fair use law.

Also, MAJOR SPOILER WARNING for Star Trek: Discovery.

This post will be a bit of a departure from my previous technical articles. Sadly, I only have one domain, so anything I want to blog about has to go here. Maybe if I can amass the budget I'll start a separate blog about media.

I believe that what really matters in a fictional production is twofold: how much you enjoy it and what you learn from it. How much a story fits into the established "canon" of previous stories is irrelevant unless it affects one's overall enjoyment of the story. In fact, it might be best to ignore canon when it is better for enjoyment of the show,

That being said, as a fan of Star Trek, I enjoyed Star Trek: Discovery. There were a few things I didn't like, but they didn't ruin the show for me. A lot of other people, though, disliked it,

Why people hated Discovery

When the first trailer for Star Trek: Discovery dropped, it was bombarded by negative comments online. Some people didn't like the fact that the trailer focused on the action, where Star Trek was known for focusing on moral dilemmas. Some people didn't like the change of appearance to make the show look more modern, as it broke the established appearance. Other, possibly racist fans simply decried the diversity of the show.

But no mention was made of the fact that a trailer scarcely reflects the quality of the show, that Star Trek has changed many times before, and that Star Trek has been very diverse since Deep Space Nine and has tried to do so even before that.

So, no one could tell how good Discovery was going to be until it came out. And for many in the Americas, including myself, they wouldn't be able to tell until afterwards, because it was a CBS All Access exclusive in the United States. Ultimately, I got to watch the first two episodes on a trip to Switzerland (where it was available on Netflix) and the other thirteen on DVD just recently.

Most people expected it to fail, and believing that a production will be terrible before you watch it negatively affects your perception of the show. So people thought it would fail, and then they saw it, and then they hated it.

On the other hand, I didn't expect Discovery to fail. In fact, I didn't know about it until a trip to Switizerland, where I saw it on Netflix, and my only preconception was that Star Trek, a very good show in the past, was back. I ended up enjoying it.

What actually happened?

I will now describe, to the best of my ability, the main plot threads of this season and my thoughts on them; plot descriptions might be innacurate, as they are based on my memory. Spoilers begin here.

The Vulcan Hello/Battle at the Binary Stars.

From the start, it was apparent that Star Trek: Discovery was going to be much different from previous shows. The premiere episode "The Vulcan Hello" reminded me somewhat of the Voyager premiere, "Caretaker", in that it established that the show would be different. In the episode, the crew of the U. S. S. Shenzhou discovers a mysterious artifact in space which is impervious to their sensors. Commander Michael Burnham discovers that the artifact is in fact a Klingon monument. She is then attacked by a Klingon warrior, whom she kills in self-defense. Meanwhile, a Klingon, T'Kuvma, attempts to unite the Klingon Houses in an alliance against the Federation, and meets an albino Klingon named Voq, who he names Torchbearer.

Returning to the Shenzhou, Burnham consults with her foster father, Sarek (the very same Sarek who was Spock's father). Burnham learns that the Vulcans fire on Klingon ships whenever they make contact, as a show of honor in battle, believing that Klingons will fire first if they don't. Burnham tries to convince Captain Georgiou to fire, but she scoffs at the idea, so Burnham attempts a mutiny. When she is stopped, several Klingon ships decloak, including the Klingon Ship-of-the-Dead which becomes important later on.

That's when the episode ends. It's a cliffhanger, leading into the next episode. I'm not sure if I like that. On one hand, it established the format of this new show - where, at least in the first season, the entire season is one long story, with lots of twists, and focuses on a science officer rather than a ship's captain. It also established that the visuals of the new series would be more impressive than any previous production, possibly even the J. J, Abrams movies. On the other hand, I feel like the next episode, "Battle at the Binary Stars" wasn't very independent as an episode, and in fact was more of "The Vulcan Hello, Part 2". As series premieres go, though, it's pretty good.

In the aforementioned next episode, the Shenzhou fights a futile battle against the Klingon armada, and Michael Burnham is released from the brig for her own safety. Returning to the Shenzhou's bridge, she convinces Captain Georgiou to capture T'Kuvma so that he may become a symbol of defeat rather than a saint or a martyr. They fail, however, and Burnham kills T'Kuvma in self-defense after Georgiou is killed. Burnham pleads guilty for mutiny and is sentenced to prison for life, ending the opening arc.

The Spore Drive Arc

Six months later, Burnham is aboard a shuttle being transferred out of prison. When that shuttle is attacked by power-draining creatures, the shuttle's captain dies trying to remove them, but then the shuttle is picked up by a tractor beam belonging to the titular Discovery.

Apparently, Captain Gabriel Lorca wanted Burnham as a science officer the whole time. Burnham doesn't want to accept the role, believing that she should complete her time in prison. She is also suspicious of Lorca, following a series of top-secret Black Alert tests involving Proximates stellavatori spores. When she confronts Lorca, he reveals that Starfleet is testing spore drive, a new propulsion technology by Chief Engineer Paul Stamets that could hypothetically take the ship anywhere in the universe.

Soon afterwards, the Discovery's sister ship is found floating in space. The entire crew is dead, but they find a "tardigrade" inside the ship, which they capture, and discover that they can use it to gain increased control over the spore drive.

Eventually, though, the crew discovers that the spore drive is hurting the tardigrade, and that it will die if Discovery continues to use it. The only way to pilot it is to inject a human with the animal's DNA, which is impossible because genetic modification is illegal in the Federation. Chief Engineer Stamets secretly injects himself with the DNA, adversely affecting his health, but allowing him to pilot the spore drive.

The spore drive could have turned out like the enhanced dilithium seen in Voyager's much-maligned' "Threshold", with a lack of meaningful continuity. It didn't, and that's great. I liked the way the drive was used in Discovery. On the other hand, sometimes the uses of the spore drive felt cheesy, especially later in the series when mirror universe Stamets was discovered to be depleting the plane which the spores are native to.

The Mirror Universe Arc

In episode 9, "Into The Forest I Go," Stamets falls into a coma after piloting the spore drive into the Mirror Universe, an alternate reality first seen in the original Star Trek. The Mirror Universe is ruled by the evil Terran Empire, created by human fascists who believed that the only way to protect the human race from alien invasions was to conquer. They were ultimately defeated in the 24th century by a defensive alliance between Klingons and Cardassians.

Discovery is a prequel, so we get to see more of the Terran Empire before its defeat. In the mirror universe, Cadet Sylvia Tilly (one of the series' best characters, by the way) is actually Captain of the Discovery, and Captain Lorca is a fugitive wanted for Burnham's disappearance an attempted coup against the Terran empress, who is actually the Shenzhou's Captian Georgiou.

The Discovery crew disguises as their mirror universe counterparts, and Burnham takes command of the ISS Shenzhou (which she was apparently Captain of prior to disappearance). There, she is instructed to wipe out a group of rebels which includes the counterparts of Sarek and the Klingon torchbearer Voq. Instead, she warns them and asks them to evacuate before the Terrans attack, but Empress Georgiou appears in order to wipe them out, and calls Burnham to the palace ship Charon, where Georgiou reveals that the difference between Mirror Universe humans and other humans was that they were more light sensitive, which she suddenly realizes is also true of Captain Lorca. Captain Lorca rescues several allies from their torture chambers and prepares to kill the Empress.

Meanwhile, Stamets' soul is trapped on the Mycelial Plane, the native universe of Proximates stellavatori. He meets his mirror-universe self and an echo of Hugh, the now-dead medical officer of Discovery, who warns him than mirror Stamets has spread a disease into the plane. Apparently, if the plane is destroyed, all life in all universes will cease to exist (this isn't quite fully explained). Discovery subsequently prepares to attack the place ship Charon, where mirror Stamets' experiments have been occuring.

Burnham is ordered by Discovery to disable the containment field surrounding the Charon's spore drive, so she takes Empress Georgiou into the throne room and pretends to be an ally of Lorca's. She causes a battle between Georgiou's and Lorca's forces and uses the distraction to disable the containment field. Lorca is thrown into the spore drive and mirror Georgiou is transported to Discovery along with Burnham. Stamets pilots the spore drive back into the prime universe, only to realize that he's also travelled nine months into the future, and the Klingons are closing in on Earth, having taken over all of the Federation's starbases.

This plotline is good, but I feel that it's a bit weaker than the other elements of the story. The twist about Lorca is weakened because another twist about Lieutenant Ash Tyler was presented simultaneously, and it's hard to be excited about both. Additionally, the plot about the Charon's spore drive being a threat to all life in all universes felt rather cheesy.

The Klingon Arc

The Federation-Klingon War is the main element of this season. Apparently the events of "Battle at the Binary Stars" led to a full-scale war against the Klingons. After T'Kuvma's death and the disappearance of his successor Voq, a Klingon named Kol leads the armada, and has no intention of keeping the Klingons unified.

Discovery uses its spore drive to defeat the Klingons at an important dilithium mining planet. Subsequently, Lorca finds himself captured along with con man Harry Mudd and Shenzhou lieutenant Ash Tyler. They escape and beam to Discovery, but Mudd is left behind. He later returns to attempt revenge on the crew. Ash Tyler is integrated into the Discovery crew.

Meanwhile, the Federation's continued attempts at dialogue are futile, and only result in the death of more officers. Admiral Cornwell, Captain Lorca's superior, is captured.

Saru, Burnham, and Ash Tyler form a landing party which attempts to use a powerful transmitter on the planet Pahvo to discover cloaked ships. The Pahvans mind-control Saru to convince them to stay, but Burnham manages to reach the transmitter alone. The mission ends with the Pahvans calling the Klingons to them, not realizing that doing so would create another confrontation with the Klingons. Burnham and Tyler beam to the Klingon Ship-of-the-Dead to plant sensors on it and rescue Admiral Cornwell. Simultaneously, Stamets completes 133 small jumps with the spore drive in order to expose the Klingon ship.

Burnham attempts a dialogue with Kol using her communicator's universal translator, eventually leading to a batleth duel which is cut short by a transport to the DIscovery. Ash Tyler's torturer, L'Rell, is also in the transport. Afterwards, in an attempt to go to a starbase, Discovery instead ends up in the mirror universe.

While in the mirror universe, L'Rell performs a Klingon prayer with Ash Tyler, and he begins to have unusual flashbacks. Chief Medical Officer Hugh discovers that his body has been altered, and then Ash instinctively kills him. When he meets the Klingon torchbearer Voq from the mirror universe, he realizes that he, in fact, is Voq, having transformed himself into a human spy. L'Rell decides to allow him to continue as Ash Tyler rather than turn him back into the Klingon.

When the crew finally returns from the mirror universe, they end up nine months in the future. Without the intelligence on the Klingons' cloaking device, the Federation has suffered repeated losses to the Klingons, who are no longer unified and are closing in on Earth. Admiral Cornwell places mirror universe Georgiou at the helm of a mission to the Klingon home planet Qo'noS in a desperate attempt to turn the tide of war. Discovery makes a jump to a cave beneath the surface of the planet. Cadet Tilly, Specialist Burnham, and Georgiou go to the surface and attempt to find a shrine at which a probe will be dropped. Georgiou's backhanded tactics are the most successful, getting her to the shrine. Tilly is lost and realizes she's inhaled volcanic fumes, and also that the probe being sent below the surface is in fact a bomb which would render the planet uninhabitable. Burnham and Tilly stop "Captain" Georgiou from detonating the bomb, instead giving it to L'Rell so that she may unify the Klingon tribes and end the war.

This plot thread was very well-executed. Like Deep Space Nine before it, Star Trek: Discovery deals with war rather well; rather than glorifying it, it tries to deal with the moral issues involved. It's hard to beat Deep Space Nine, though.

Everything else

I haven't yet mentioned the great acting and characterization throughout the show. I particularly liked the characters of Paul Stamets and Sylvia Tilly, who had some depth of character despite not having a large role in the main story.

Though Discovery might have seemed at first like an action piece failing to imitate the likes of Star Wars and the Avengers, it actually continued to do what Star Trek does best. It is a decent exploration of war and its consequences, supported by a large but (mostly) well-developed cast of characters. It has a number of problems, as most first seasons do, but for a first season it holds up quite well. It's different, but different in a good way. I am excited to see Season 2 when it becomes available on DVD.

Making a Perfectly Colorized Header

Sun, 18 Nov 2018 00:00:00 +0000

The CSS filter: property

While much of CSS's features are for positioning, a few of them exist to improve CSS's graphic design capabilities. One such feature is the filter: attribute. It does almost exactly what you'd expect - it applies a graphical filter to an element.

I've found filter: very useful to blur images, but be forewarned: if the image is set with the background-image attribute, then anything above the background image will also be blurred. It's as simple as adding filter: blur(5px); to the image's CSS.

What we'll do today is a bit more complicated. I want to colorize an image with only CSS. An example of this effect can be found on the template Forty Sadly, CSS doesn't have a filter: colorize yet, so we'll have to get creative.

We'll do this with a class called "myImage", used on <img> tags:

.myImage {

}

Making an image grayscale

The first step in making a perfectly colorized header is making the image grayscale.

Within the myImage class, we'll start constructing a filter property.

This will make the image grayscale:

.myImage {
    filter: grayscale(100%);
}

More filter options

Now that we have a grayscale image, we must add color using a somewhat dodgy method. Sepia seems to be the only available filter that can add color to a grayscale image.

.myImage {
    filter: grayscale(100%) sepia(100%);
}

Sepia makes the image beige, or very unsaturated orange. Of course, you might not want to make the image orange, so use the hue-rotate filter.

The hue-rotate filter is odd; it won't take a color, but rather it will take a rotation of the RGB color wheel (different from the one you learned in art class) in degrees or radians. Here are the primary and secondary colors in rotations from orange:

Yellow: 15deg
Green: 90deg
Blue: 180deg
Violet: 225deg
Red: 315deg
A better orange: 350deg

In this case, I'd like to make the image violet, but you can add any of these rotations, so I'll add a 225 degree rotation.

.myImage {
    filter: grayscale(100%) sepia(100%) hue-rotate(225deg);
}

So the image now looks much different, but it doesn't look violet enough - it looks gray with a violet tint. This is the final step; you need to turn up the saturation. Choose how much wisely, though. I've found that 600% is too high and 200% is too low, but otherwise it's your choice of how much to saturate. Use the saturate option:

.myImage {
    filter: grayscale(100%) sepia(100%) hue-rotate(225deg) saturate(500%);
}

Apply this CSS, then create an <img> tag with class=myImage. See the result here.

CSS Gradient Wipe Animation

Thu, 15 Nov 2018 00:00:00 +0000

Inspired by this codepen.

Revisiting @keyframes

It occurs to me that in the previous article on animation I didn't go into much depth about what @keyframes actually did. Well, no longer, time to explain.

Keyframes in an animation are basically prefined points in an animation that have certain variables attached and thus allow a computer to calculate what's in between. In CSS, keyframes are determined in terms of how much of the animation has completed, in percent, and placed the keyframes in an @keyframes query with the name of the animation. You can also use "from" for 0% and "to" for 100% if those are your only keyframes. For example:

@keyframes animation-name {
    from {
        color: #bada55;
    }
    to {
        color: #0ff1ce;
    }
}

A WebKit-only feature

The feature we're going to use is exclusive to WebKit (Safari) and Blink (Chrome).

There are two CSS properties here - background-clip and text-fill-color.

Let's make a class:

.animated {
font-family: Raleway, sans-serif;
font-weight: bold;
font-size: 4em;
background: radial-gradient(circle farthest-corner, yellow, red);  text-align: center;
background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
}

This class has text whose color is a radial gradient from yellow to red. Both -webkit- and non--webkit- versions are essential here as a future-proofing measure.

Just one keyframe!

Luckily, you'll only need one keyframe here:

@keyframes colorfultext {
to {
background-position: 200% center;
}
}

In order to enable the animation, add the following lines to your CSS class:

    background-size: 200% auto;
    animation: colorfultext 2s linear infinite;

The resulting code will be something like this and the result is here.

@keyframes colorfultext {
to {
background-position: 200% center;
}
}
.animated {
font-family: Raleway, sans-serif;
font-weight: bold;
font-size: 4em;
animation: colorfultext 2s linear infinite;
background: radial-gradient(circle farthest-corner, yellow, red);  text-align: center;
background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
background-size: 200% auto;
color: #000;
}

CSS Animation - Spinning Newspaper

Wed, 14 Nov 2018 00:00:00 +0000

What are CSS Animations?

CSS Animations are a feature of CSS3 allowing developers to animate an object becoming visible.

To define a CSS animation, one needs to define keyframes in terms of percent, then add the appropriate "animation" attribute to an object. In this article I will make a spinning newspaper animation using this image from The Simpsons (copyright warning):

The transform: property

Much of what you would want to do with animations is available with the Transform property.

In this case, we'll be causing the image to spin and get larger, acheived through transform: scale and transform: rotate. Rotate takes a rotation in degrees. Let's start by making it spin twice.

@keyframes spinny {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(720deg);
    }
}

(Be forewarned: this animation won't work in WebKit-based browsers, though it will work in Chromium-based ones.)

Scale takes an argument in size relative to 1 for some reason, and transformations are space- rather than comma-separated, so the way to scale the newspaper would be as follows:

@keyframes spinny {
 0% {
 transform: rotate(0deg) scale(0.1,0.1);
 }
 50% {
 transform: rotate(720deg) scale(2,2);
 }
}

Filter and Opacity are also commonly used with animations, and we'll use them for a nice fade-out:

@keyframes spinny {
 0% {
 transform: rotate(0deg) scale(0.1,0.1);
 opacity: 1;
 }
 50% {
 transform: rotate(720deg) scale(2,2);
 }
70% {
filter: none;
opacity: 1;
}
100% {
filter: blur(100px);
opacity: 0;
}
}

Now let's create a CSS class with this animation enabled:

.spinner {
text-align: center;
position: absolute;
top: 40%;
left: 40%;
animation: spinny 8s linear 0s 1 normal;
opacity: 0;
transform: scale(2,2);
}

Make sure to include all of the final settings or else the animation will end improperly by transitioning into its default state.

The animation: property used here is a "combo property" that goes as follows:

spinny: Name of the animation
8s: speed of the animation in total length
linear: progression of the animation
0s: delay before showing animation
1: number of times to play animation
normal: direction of the animation

Now add the appropriate content to <body>:

<div class=spinner> <img src=spinning_paper.jpg></div>

Here's what the result should be in the end.

App Review: Browsh

Tue, 13 Nov 2018 00:00:00 +0000

Browsh: Review

Browsh is an app I discovered when doing research for a previous article. When most people think of text-based browsers, they think of w3m or Lynx:

Browsh is a lot different from those browsers. It uses Firefox to load the page, then pixelates the background using UTF-8 half-blocks and converts all of the text to monospaced paragraphs.

It therefore requires Firefox and a true-color terminal (which is a lot for a text browser) but what it does with that is very cool.

Here's my website as seen in Browsh:

Main page	An article

Browsh can, inexplicably, render videos and WebGL, albeit they're pixelated and audio only sometimes works.

The intended use is for people who have low bandwidth, but who have access to a Linux server in a higher-bandwidth area. Browsh provides a great browsing experience at higher speeds by simply sending a pre-rendered page fetched over a faster network.

Personally, I just think it's fun to use. Go get it for Linux or Mac at Brow.sh.

Moving away from Google Fonts

Mon, 12 Nov 2018 00:00:00 +0000

What's Google Fonts

Google Fonts is a service that provides several SIL-licensed fonts to add to websites as a stylesheet. It makes it very easy to add fonts to a site.

However, Firefox Focus blocks it as a tracker, as do other browser that don't like third-party additions, so I've decided to move away from it.

What to use instead

Google Fonts allows you to download its fonts, so take advantage of that. Download the fonts from Google, then write your own @font-face queries. Here are mine;

@font-face {
    font-family: Raleway;
    font-style: normal;
    font-weight: normal;
    src: url(Raleway-Regular.ttf);
}
@font-face {
    font-family: Raleway;
    font-style: italic;
    font-weight: normal;
    src: url(Raleway-Italic.ttf);
}
@font-face {
    font-family: Raleway;
    font-style: normal;
    font-weight: bold;
    src: url(Raleway-Bold.ttf);
}
@font-face {
    font-family: Cinzel;
    font-style: normal;
    font-weight: normal;
    src: url(Cinzel-Regular.ttf);
}

Media Queries in CSS

Mon, 12 Nov 2018 00:00:00 +0000

Responsiveness

Responsiveness in web design is the set of features designed to give the website a unified look on mobile, tablet, and desktop platforms. A responsive website will look good on every device.

Because smartphones and tablets are increasingly used to access websites, responsiveness is absolutely essential to website building, and the simplest way to implement it is via media queries.

Useful media queries

CSS @media queries are a simple way of making a site responsive, usually taking the format of:

@media only screen and (condition: value){
    property: value;
}

It's recommended to make your website for mobile and make @media queries specific to desktop; this is the "mobile-first" philosophy. Useful media queries to detect a desktop are only screen and orientation: landscape and only screen and (min-width: 1000px). Always place queries at the end of the document, or else they could be overridden by other properties.

Within those queries, another property which is very useful is the text-size-adjust property, which takes a percentage of the standard text size as the size text will be rendered at. Not all browsers support it, but most mobile browsers will. For example:

body {
    text-size-adjust: 250%;
    -webkit-text-size-adjust: 250%;
}
@media only screen and (min-width: 1000px){
    body {
        text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }
}

Make sure to include both text-size-adjust and -webkit-text-size-adjust in order to support iThings and the Librem 5.

Conclusion

CSS's @media query is a godsend for web developers. It makes responsiveness much easier than otherwise. On the other hand it isn't quite universally supported, though both Android and iOS support them in the latest version.

Browsers I Test On

Mon, 12 Nov 2018 00:00:00 +0000

The following is a list of browsers that I test on.

Chromium (latest): This one is obvious. Half of Internet users use Chrome, so having some variant available is very useful.
Firefox ESR: This is the Firefox (Gecko) version most readily available to me since I use Debian.
Epiphany/GNOME Web: I use this as a representative of Webkit, which is used in Safari and many other browsers.
Microsoft Edge: Uses a unique web engine and thus necessitates testing on it. Since I use Linux I don't usually have this available.
Palemoon: Uses a fork of Gecko called Goanna, thus making it differ from Firefox in some ways.
Chrome on Android: The default browser for Android, used to test mobile. This is my primary browser when testing on mobile devices,
Firefox Focus: Blocks external sources, demonstrating how websites look when external sources are blocked. Also shows Gecko on mobile.
Safari on iOS: The default iOS browser. Used to test mobile on iThings.

Current browsers I don't test on:

Internet Explorer: Internet Explorer has been in LTS for years, very few people use it, and it's lagging behind is very well-known, so I take test results there with a grain of salt (as should you).
NetSurf: Netsurf is designed to be lightweight. It lacks many modern standards, and thus won't render well.
Links: Also designed to be lightweight and thus only supports partial HTML4.
Browsh: This text-based browser is basically a pixelated Firefox, and is the same except for appearance differences.
Anything not listed: Browsers like Vivaldi don't require testing because they use the same web engine as another browser.
Old-style text-based browsers like w3m, EWW, and Emacs/W3: Only one text-based browser needs to work, since others implement similar functionality. All that really matters is that the document is organized.

Basically, I want to test supported versions of the Blink, Gecko, WebKit, EdgeHTML, and Goanna on desktop, tablet, and mobile devices. Responsive mode is rarely enough to test this, since responsive mode doesn't emulate the quirks that mobile devices have.

Six resources for learning HTML

Mon, 12 Nov 2018 00:00:00 +0000

W3Schools

W3Schools is a good encyclopedic reference for tutorials on HTML/CSS/Javascript. I don't know if I can recommend their actual courses, though, since I haven't tried any of them beyond the first lesson. The general impression I have is that the course software is buggy and limited,

CSS Tricks

CSS Tricks is a blog that posts short technical articles telling you how to do certain things in CSS and Javascript. I've found it rather useful in building this site.

Code.org

This is a very popular resource for courses on programming in general, and its course on Web Development is very helpful to people who don't know HTML. However, I have found that it lacks in terms of education in web design norms, so learn those elsewhere (or by eye, as I did).

Repl.it

ReplIt not only serves as an example of great web design, it also has an IDE with the very useful feature of making your site a subdomain of repl.co, allowing you to test your HTML very quickly. Repl.it should not be used as hosting, though, because it does not allow you to choose your own subdomain. I would instead recommend Neocities for free hosting.

Neocities

Neocities is the only website creator I know of that actually lets you write your own CSS. It also has some in-depth HTML tutorials to get your website started, and a community that gives it an audience. I even have a site there..

Your Local Bookstore

There are quite a few books on HTML and on other related topics that go much further in depth than my articles, from publishers like O'Reilly. Go to your local bookstore to find them.

Learn HTML Part 1.3: Code, Links, and Images

Fri, 09 Nov 2018 00:00:00 +0000

Review

Previously, we learned about:

How to add paragraphs and headings
HTML's cascading nature

You should have by now a page like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf=8">
</head>
<body>
<h1>Hello, world!</h1>
<p>Oi, spaceman!</p>
<h2>And this is a sub heading!</h2>
</body>
</html>

Code and Other Styles

So you can write an article now, but what if you want to write an article about code? What if you want to display a text file?

Use the code and pre tags. <code> and </code> represent the beginning and end of a monospaced segment.

So try adding this inside the paragraph from last lesson:

Oi spaceman! <code>Some code goes here.</code>

The result should be something like:

Oi, spaceman! Some code goes here.

Trying to copy text files?

If you're writing some code, or using a text editor, you might find that trying to copy it into your website turns it from this:

|------------------------|
|Neatly                  |
|  spaced                |
| as all things should be|
|------------------------|

to this:

|------------------------| |Neatly | | spaced | | as all things should be| |------------------------|

That's because in HTML, lines break between certain tags, but not with a new line. Luckily, there's a solution: the <pre> tag.

Try adding this to your page now:

<pre>
|------------------------|
|Neatly                  |
|  spaced                |
| as all things should be|
|------------------------|
</pre>

It should appear properly!

Line Breaks

So, what if you aren't copying a text file, but maybe you're writing a poem and the spacing between paragraphs is too big? Simply add <br> to the end of the line you wish to partially break.

Or maybe you want to draw a line through the page. Use <hr>.

Images

The last thing needed for a decent document is an image. HTML's tag for images is the <img> tag.

Opening tags can have additional "attributes" - things about how to display the tag. An example is the charset="utf-8" part of <meta charset="utf-8"> from the necessary piece of HTML.

The <img> tag is uses the src= attribute to determine which image to display. The SRC property takes a URL or a path to file, relative to the folder the HTML file is in.

The URL: https://picsum.photos/300/200?random provides a random image that is 300x200, so let's use that as an example. Add this to your page:

<img src=https://picsum.photos/300/200?random>

There should now be a small image on the page.

Links

Another type of tag that uses attributes is <a> tag - a link, The href= attribute of this tag defines where the link points - a URL, or a path to another HTML file, relative to the folder the document is in. Inside the tag is the text of the link.

Let's try this with https://example.com:

<a href=https://example.com>Example</a>

Conclusion

If everything works, you can move on to Learn CSS or read the addendum.

Subscribe to me with RSS!

Why popularity actually matters in web design

Thu, 08 Nov 2018 00:00:00 +0000

Web Design Is Marketing

On most web development blogs (except for mine) you will find that marketing terms like conversion are used. This is because the primary purpose of web design, at least for many, is digital marketing.

If you are doing web design as a form of digital marketing, then it is necessary to make your website look good in the way "a good-looking website" is popularly defined. Otherwise, users will think your website is old, unmaintained, and low-effort, which leaves a bad impression on your business. The popular definition of "a good-looking website" generally corresponds to flat design, possibly with images and color-to-color gradients.

Web Design is about User Experience

In every case, a primary purpose of web design should be to make it easy to access the content of a website. In order to access the content, you need to have a way of navigating to the content that users will understand.

It's advantageous to have a navigation experience that users know about, i.e. one that is popular. This way, your users already know how to navigate your website, having used other ones.

Didn't every idea start out as unpopular?

Sure, and I definitely advocate for innovation in web design. But an unpopular design can make your site look unprofessional and make it hard to navigate. Sticking with design norms is generally a good idea. If you have a new concept that isn't popular, then you may implement it; it might actually be good for user experience and marketing.

On the other hand, if you liked the old design seen in sites like Old Reddit and most sites made with Old Google Sites, and prefer it to modern design, you still shouldn't implement it because it makes your website appear unmaintained or low-effort to users, and it draws people away.

Learn HTML Part 1.2: Headings

Thu, 08 Nov 2018 00:00:00 +0000

Review

Last time we learned:

The essential tags <html>, <head>, <meta charset=utf-8>, and <body>
The meaning of tags in HTML

We left off with the following page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>
      Hello, world!
    </p>
  </body>
</html>

Trying headings

A heading is a bit of text that tells the viewer what section this is. For example, the heading just above@

In HTML, there are six types of headings: <h1>, <h2>, <h3>, <h4>...

Load the file from the previous lession. Let's make our "Hello, world" a heading.

<h1>
  Hello, world!
</h1>

Save the file and open it in your web browser. You should now see "Hello, world" in big text.

Let's try a smaller heading. Below your "Hello, world" message, add:

<h2>
  And this is a sub-heading!
</h2>

You should now have "Hello world" in large text and "And this is a subheading" in slightly smaller text.

It's about time I showcased a common mistake. Try adding this to the Hello World!

<h1>
  Hello World!
  <p>
    Oi, spaceman!
  </p>

You'll notice that "Oi, spaceman!" is also a heading. Remember to end with </h1> every time.

Learn HTML is continued here.

Bottom-bar navigation

Wed, 07 Nov 2018 00:00:00 +0000

An experiment with bottom-bar navigation

I experimented with bottom-bar navigation in this template. Download the template here.. As you can see, there's a navigation menu at the bottom on both desktop and mobile versions.

Bottom navigation, especially with icons, is familiar to mobile users, since a lot of major apps use it, including YouTube, Facebook, and Twitter. In these cases, the functions correspond to the most important pages. In Twitter's case, these are Home (Recommended and followed tweets), Search, Notifications, and Messages. So does it have merit in web design?

Advantages and disadvantages

Bottom navigation is easier to use for mobile users, since it is easiest for the left thumb to reach the screen's bottom left, and the right thumb to reach the screens bottom right.

Since it's at the bottom, people will see it last. This is advantageous for sites where content is a focus, since it gets out of the user's way. On the other hand, for online shopping sites or other sites where people should be looking at the navigation first, it's a disadvantage.

Furthermore, putting navigation at the bottom moves it away from the main content, adding to the difficulty of usage on desktop.

Bottom navigation should not be used for more than five important pages, since adding more can lead to problems.

Issues could also arise because people will be visiting your site in apps that have their own bottom bar, so you could be facing the Android buttons bar stacked with a browser's bottom bar and your website's bottom bar, and that's not a good look.

So... should I use a bottom nav?

I'd recommend using a bottom bar for navigation if your site has five or fewer important pages and its focus is on the main content. In other situations it can be a detriment to UX.

What should I use instead?

Use a sidebar for navigation on desktop, then convert it into a bottom bar.
Use a tab bar at the top and set overflow-x to auto. If you do this in combination with a header, make sure that only one is fixed.
There are tons of other options, so look around

Learn HTML part 1.1: Hello World

Wed, 07 Nov 2018 00:00:00 +0000

Why learn HTML?

There are many reasons to learn how to use HTML and how to create a website.

It's a marketable skill. The BLS predicts an increase in job outlook much faster than the average. Web developers earned around $68,000/year, lower than the average for computer science occupations, but nearly twice the average income for all occupations.
It's fun. Or at least, it can be. Web design is like video-gaming; in both, the fun comes from the satisfaction of overcoming a challenge.
It's useful. Some of the target audience for this article may want a website on which they can display information about themselves or blog about a hobby (as I do on this website). In this case, learning HTML can be useful

Scope of this series

This series will include specifically what I know. I am particularly unskilled in Javascript (I know enough to get by, but I should learn more). Instead, I am specifically talking about HTML and CSS here.

Getting started

HTML is a markup language. That means it's a way to store documents. Compared to other markup languages (like those used by Microsoft Word), HTML has support for stylesheets(sets of rules used to determine the document's look) and scripts(like macros, but way better), and it's designed to be edited in a text editor. HTML is the official markup language of the Web.

HTML is made up of tags which consist of an opening tag, enclosed with < and >, and a closing tag enclosed with </ and >.

Every HTML document must include the following:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
  </body>
</html>

Let's break this down, shall we?

<!DOCTYPE html> tells the browser that this is an HTML file. It also enables the compatibility options in most browsers.

<html> and </html> determine where the document starts and ends.

<head> and </head> are the start and end of some information for web browsers about the page.

<meta charset="utf-8"> tells the browser what to do with special characters like emojis and the copyright symbol.

<body> and </body> determine the start and end of what's visible on the page. This is the most important section of a page.

Your first webpage

HTML consists of different tags determining the start and end of certain types of content. Let's start with the traditional first project, which begins with the template mentioned earlier:

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
  </body>
</html>

Now, add the following between the <body> tags:
<p>Hello, world!</p>

The <p> and </p> determine where a paragraph starts and ends. Paragraphs are automatically spaced. You can place any text within the paragraph.

Save your file and open it in a browser. You should see "Hello, world!".

I hope this article has been useful! Read the next one.

My web development workflow

Tue, 06 Nov 2018 00:00:00 +0000

Get started

I made this site with PicoCMS. Setting it up is more difficult than you might think. First, you need to download it (of course). Next, install and enable PHP and mod_rewrite on your Apache server (how that works differs by Linux distro). After installation, you have to add the following to /etc/apache2/sites-enabled/000-default.conf(or whatever your site conf is), below where it says DocumentRoot /var/www/html:

<Directory /var/www/html>
AllowOverride All
</Directory>

You also have to edit your apache2.conf (or httpd.conf); add this at the end.

LoadModule php7_module modules/libphp7.so
<FilesMatch \.php$>
    SetHandler application/x-httpd-php
</FilesMatch>

Installing PicoCMS is as simple as downloading it and extracting the archive into /var/www/html.

Managing Content

Pico is a pretty good flat file CMS once set up.

I like to mount my site as a directory with SSHFS:

sshfs -o IdentityFile=~/your/cryptographic/id root@example.org:/var/www/html /convenient-mountpoint

This way I can easily modify content on the site using my own software.

Content is in mixed Markdown and YAML, found in the content folder. I like to use Mark Text as my editor.

Themes are Twig templates found in themes/theme-name with Pico's variables, all of which can be found in the official docs. I just use an HTML editor for Twig.

Config is a mix of YAML and PHP.

Conclusion

To be honest, I'm actually starting to prefer Pico to major solutions like Wordpress. It's more convenient to install (being flat-file), and is secure by design.

I also like to do things myself, and Pico gives me a lot of control over things. I get to use a desktop editor instead of a webapp.

Vertically Centering Text

Tue, 06 Nov 2018 00:00:00 +0000

Vertically centering text in CSS

Vertically centering text is very difficult to pull off. CSS has no official support, except in flexbox.

So here's how I do it on my website.

.parent {
    position: relative;
}
.child {
    position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

The old translateY trick is not without issues, but it works for most use cases. Others can play around with Flexbox.

The Hypertext Zone

What are the Rules of Acquisition?

Redesign!

HTML5 Video Backgrounds

Spain Project

Make anything a background

The <video> Tag

The story of u/ObviousReplyBot

Hello reddit!

The Beginning

Let's make a bot!

The Fallout

The end

The future

Writeup: Geneaology Project

Color scheme

3DFX

Testing

Navbar

Conclusion

Modding Minecraft with Datapacks

JSON

Where's the programming?

Learn CSS 2.6: The Box Model

Learn CSS 2.6: The Box Metaphor

A look at -webkit-text-stroke

Raspberry Pi Emulator-Console Tutorial

RetroArch is AWESOME!

Requirements

Setting up

Making a Forum with FlatBoard

Installation

Is Flatboard Good?

A brief history of GNU/Linux

Unix

Linux

Microsoft Loves Linux, Microsoft Hates Linux

Linux on the desktop

Furthermore

Sources

General Guidelines for Mobile Site Building

Tip Number 1: Meta Viewport

Tip Number 2: Optional sidebars

Tip 3: Mobile first

Learn CSS 2.5: Classes and IDs

Very useful features.

Learn CSS 2.3: Sizing

Starting anew

Pixel units

Point units

Em Units

Rem Units

Centimeters, millimeters, inches

Picas

Character Height

"x" height

Other ways to size things.

Learn CSS 2.4: Typography

Starting anew, once again!

px, pt, em, rem, ex, ch

%, vw, vh, vmin, vmax

Fonts!

Addendum: Text Alignment

Fixing TLS Connection Issues in Debian 10

Learn CSS 2.2: Color Notation

Built-in colors

The HSL (HSV) color model

The HSLA color model

The RGB color model

The RGBA color model

24-bit Hexadecimal RGB

12-bit Hexadecimal RGB

Conclusion

Learn CSS 2.1: Useful HTML and My First Style

Why learn CSS?

The <div> and <span> tags

Starting out

CSS syntax

Learn HTML 1.4: Addendum

Addendum: Tables

The `<video>` Tag

The `<div>` and `<span>` tags