Undead Articles Archives - The Undead Institute

The Functional Shape of Undead Things: CSS Shape Functions

I recently wrote a series of articles for CSS Trick’s almanac on how to use all of the CSS shape functions. There’s basically three uses for each of them: clip-path (cutting one shape out of another), offset-path (animating an element along a path), and shape-outside (letting text flow around an element in a non-rectangular way).... Read More

Remaking John’s Portfolio Part 4: Why That’s a Horse of a Different Coordinate System

One of the best (and worst) things about SVG is that it has its own coordinate system. It’s the best because it’s not confined by the HTML coordinate system and worst because it doesn’t always play well with its HTML cousin. The biggest issue I had was trying to figure out how to transfer the... Read More

Remaking John’s Portfolio Part 3 (or Why SpaceTime Hates Me)

When I first started working with the laser and finally got them coming together at the same time, I decided to have the letters of the title be shootable. A traditional bounds check (where you draw a rectangle around each letter and check if the point fired at is within the rectangle) would have worked,... Read More

Remaking John’s Portfolio Part 2 (or Trigonometry and I are not Friends, but Failure and I are on a First Name Basis)

The first thing I wanted to do was put some stars in the spacious sky. I could have hand distributed them in a graphics program created a pattern and let them hang out, but I wanted to have the stars move a little when the user moved the mouse, so that it looked like you... Read More

Remaking My Portfolio – Part 1 (or How to Not Update a Site for Nine Years)

My personal portfolio was ancient in web development terms. I built it in the summer of 2016 and kind of left it there. I was proud of some of the animation and design I did, but it hadn’t seen any of the benefits of changes in technology that have happened nor the increases in my... Read More

Avoiding Undead Browsers & Not Yet Alive Code

There are a lot of difficult things in web development, but one of the toughest is keeping up with the insane level of progress that’s happening, particularly in the last few years. I often joke that I’m in an industry that reinvents itself every six months, but that may be too long a time scale.... Read More

Lesser Known Uses of Better Known Attributes – Smashing Magazine

I wrote an article for Smashing Magazine about, well, the title says it all: Lesser Know Uses of Better Known Attributes. It doesn’t have zombies, unless you count wayward, frustrating co-workers (I’m looking at you, Bob). Check it out!... Read More

Why I Use Zombies To Teach Web Development

Seen the Why Zombies? page, but want a little more meat and back story? Here you go: It’s not just a gimmick. The origins of my apocalyptic turn towards teaching web development came, like the zombie contagion, out of the blue while I was working on a conference proposal. I had submitted and gotten approved... Read More

Spelling, Grammar, and Zombie Errors

I came across two interesting pseudo-element selectors: ::spelling-error and ::grammar-error. Both select exactly what they say, a spelling or grammar error that has been flagged by the browser. They also have pretty good browser support working virtually everywhere except in Firefox. Like ::selection (and a Monopoly game a Zombie partially masticated) the exact properties you... Read More

Head vs. Header vs. Headings

It’s fairly common for people new to HTML to confuse the <head>, <header> and headings (<h1> through <h6>) elements. Within the same html document you may (and probably will have) all three and the schema used for why each goes where may not be readily apparent. Also with the human body analogy being present both... Read More

Building, Expanding, Further Expanding, and Even Further Expanding Your First Website

The Your First Website set of books takes you through building a website in four increments. Given that the site evolves quite a bit during the process, let’s look at the different versions of it. In Build Your First Website (available for free as an ebook, a blog series or a video course) you’ll build... Read More

Changes are <tfoot> at the Undead Institute

As I’ve continued writing my zombie themed web development books, I’ve grown as a writer, a teacher, and… zombie fighter. While I’ve made changes along the way, I recently made some larger changes in my books and curriculum that I think are worth enumerating. If you have an old version of one of these books... Read More

Pop(over) the Balloons Article on CSS Tricks

I had an article published in CSS Tricks discussing the new Popover API and using it to build a game. Here’s the article. And here’s the game: See the Pen Pop(over) the Balloon – Final by Undead Institute (@undeadinstitute) on CodePen.... Read More

JavaScript Monetization API: How to Fund your Human Resistance Cell after the Apocalypse – Part 7

Editor’s Note: Since this book was originally written Coil has stopped operations, which has put implementation of this on hold. That said, the content here should be accurate if/when another company takes up Coil’s mantle. Continued from Part 6 Making Apocalyptic Sense There are a couple of ways we can optimize the counting code above. ... Read More

JavaScript Monetization API: How to Fund your Human Resistance Cell after the Apocalypse – Part 6

Editor’s Note: Since this book was originally written Coil has stopped operations, which has put implementation of this on hold. That said, the content here should be accurate if/when another company takes up Coil’s mantle. Continued from Part 5 Removing Ads This one can be tricky, depending on your ad platform and when and how... Read More

JavaScript Monetization API: How to Fund your Human Resistance Cell after the Apocalypse – Part 5

Editor’s Note: Since this book was originally written Coil has stopped operations, which has put implementation of this on hold. That said, the content here should be accurate if/when another company takes up Coil’s mantle. Continued from Part 4 Splitting Payments If you load content from other sites via an iframe, you can let them... Read More

JavaScript Monetization API: How to Fund your Human Resistance Cell after the Apocalypse – Part 4

Editor’s Note: Since this book was originally written Coil has stopped operations, which has put implementation of this on hold. That said, the content here should be accurate if/when another company takes up Coil’s mantle. Continued from Part 3 Monetization States There’s a new object in the Document Object Model (DOM) hanging off document called monetization. (If you’re... Read More

JavaScript Monetization API: How to Fund your Human Resistance Cell after the Apocalypse – Part 3

Editor’s Note: Since this book was originally written Coil has stopped operations, which has put implementation of this on hold. That said, the content here should be accurate if/when another company takes up Coil’s mantle. Continued from Part 2 The Prerequisites for the JavaScript Monetization API Let’s first discuss the parts the user needs to... Read More

JavaScript Monetization API: How to Fund your Human Resistance Cell after the Apocalypse – Part 2

Editor’s Note: Since this book was originally written Coil has stopped operations, which has put implementation of this on hold. That said, the content here should be accurate if/when another company takes up Coil’s mantle. Continued from Part 1 Merchandising requires literal user buy-in—that is, users buying products or services from you. Again, this can be... Read More

JavaScript Monetization API: How to Fund your Human Resistance Cell after the Apocalypse – Part 1

Editor’s Note: Since this book was originally written Coil has stopped operations, which has put implementation of this on hold. That said, the content here should be accurate if/when another company takes up Coil’s mantle. Important Notes Full disclosure: The author received a grant to support the writing of this book, as well as two other... Read More

Undead Domains

When building a new website that you want to be publicly available, you need two things: (1) a domain name (e.g., undead.institute or 8wordstories.com) and (2) a place to host it and put it on the web so people can access it. Domain Names Domain names must be unique and come in all shapes and... Read More

Build Your First Website (And Thwack Zombies with HTML and CSS) – Part 6

Let’s add some space above and below the <nav> to help the site look great. We can do this with the margin-top and margin-bottom properties. While we’re working with the navigation, let’s set the color of nav a elements to orangered, and let’s remove the underline beneath the links by setting text-decoration to none. We... Read More

Build Your First Website (And Thwack Zombies with HTML and CSS) – Part 5

ApocalyptiCSS To add CSS, we need one more HTML element, the <style> element. The <style> element can technically go anywhere on your page, but within the head element is a good choice, since the CSS code is not so much what is being displayed as how it’s being displayed. So, we’ll add a style element... Read More

Build Your First Website (And Thwack Zombies with HTML and CSS) – Part 4

Of Zombies and Page Skeletons Next, let’s add some page-wide structural elements (a page’s skeleton). These won’t initially change how the page looks, but they will provide some semantic information about the types of content we’re using; provide spaces for us to add things the page needs, such as a header and a footer; and... Read More

Build Your First Website (And Thwack Zombies with HTML and CSS) – Part 3

Thwacking That First Zombie Go ahead and open the file content.txt. In it, you’ll find Dr. Boople’s essay, followed by a short bio about him and a list of “Steps to Resisting a Zombie’s Frieeendship.” This is the content you’ll use to build your site. Open index.html. You can do the next part directly in... Read More