How to Make a Web Site & App Part 1

Getting a Host

Two pieces of strong advice

  • Don’t use free hosting
  • Don’t overpay

With free hosting, you’ll have ads on your page and you won’t have essential things you need. I’m showing two outstanding hosts — neither of which pays me — that are super cheap and give you tons. Do not use GoDaddy (too much money for too little product), FourSquare, Wippet, Blobbix, or whatever those things are called.

Arvixe is the place I use. I came within a single breath of switching to A2 recently but didn’t.

Things they have in common that you must demand from any host:

  • Unlimited storage
  • Multiple/unlimited websites
  • cPanel (there are other control panels but I think cPanel is, hands-down, the best)
  • Unlimited subdomains, FTP accounts, email addresses (there are actually places that charge you to have any and some who charge for more than a few). Never, ever pay for these things. Ever.
  • PHPMyAdmin

Other things these guys have or support that others don’t:

  • Python
  • Node (definitely A2 and, I think, Arvixe)
  • Ruby on Rails
  • Reasonably up-to-date PHP, etc.

You are, after all, trying to become a developer.

About Arvixe

THE GOOD

Cheap at $3.20/month (if you pay annually — a couple bucks more if you pay month-to-month) for multiple websites and … AND … a free domain for life with purchase of any hosting plan. I think that’s pretty darn cool. So you can get started with your little web business for under $6 right now.

They had PDFtk — the cornerstone of my new product — installed already. I almost switched to A2 because Arvixe’s support people said they didn’t have node and I thought that if they didn’t have a huge thing like node, there’s no way they’re going to have PDFtk.

As it turns out, they have both available for shared hosting.

Unlimited databases even with their cheapest plan.

arvixe.png

THE BAD

  • They don’t have phone support like my old host did.
  • Their documentation is far from the best and their replies to comments aren’t helpful.
  • Their chat-based support staff take forever between Q&A … like they take walks afk while chatting with you
  • They’re support appears to be based overseas. Okay, fine, they’re hard to communicate with, okay? English is obviously not their first language … geez, you gotta make me say that shizzle?

About A2

A2 is what we from Ann Arbor, Michigan call Ann Arbor, Michigan. I remember thinking, “How cool would it be if A2 stood for Ann Arbor?” and, as it turns out …

a2_03.png

Their cheapest plan is a few cents more than Arvixe’s cheapest plan but their next level up is a few cents cheaper than Arvixe’s next level up.

THE GOOD

  • Node — rare and cheap considering it’s rarity
  • Pick your version of Python and/or PHP — trust me, that’s cool
  • Support # right there at the top of the home page
  • Chat support – quick to answer and they’re in Michigan, USA
  • 24/7 support

THE BAD

  • Limiting subdomains based on price is skeezy
  • So is limiting databases but not as skeezy as limiting subdomains
  • Maybe I’m spoiled and entitled but limiting email addresses is kinda skeezy
  • They wouldn’t install PDFtk if I switched to them. Maybe I’m being petty but typing “sudo apt-get install pdftk” (less than the most concise tweet) to get someone’s business for life seems like a small thing to ask. Sales told me that if I could find three other hosts that included it, they’d consider including it. I responded that I could only find three (this was before I found out Arvixe did) but, more importantly, I found oodles of people looking for hosts that included it. Regardless, like the Wizard who gave Dorothy & Company a bait-and-switch, they responded to my three hosts with the answer, “No.”

THE IMPORTANT

  • Their support staff — I had many long conversations with them while only thinking about becoming a customer and they were always patient and helpful.
  • If you’re getting their Swift plan (cheap!) the stuff you wouldn’t get with Lite is irrelevant.

Conclusion and Summary

Whoever you choose, make sure it’s someplace with a control panel, file manager, etc. — you don’t want to use templates or some “website builder.” You can get everything you want and need for fun, learning, and profit for the price of a latte a month.

Advertisements

How to Make a Web Site & App

Introduction

The only thing worse than a poorly written tutorial is one that inserts libraries, languages, products, plug-ins, etc. that you don’t really need. When you’re learning, you just want to know what’s required. That’s this series. We’ll start simple, I’ll explain things as we go along, and later — when it’s working — we’ll start to add things. Is security important? Yes. Can it wait a few minutes so you can learn one thing at a time? Yes.

Should you learn React and Angular? Sure. Do you need to learn it right now? No. Will those be easier once you learn the basics? Absolutely.

In this series:

  1. Getting a host
  2. Introduction to Administering a Website
  3. Building the site locally
  4. Uploading your files
  5. HTML
  6. CSS
  7. JavaScript
  8. MySQL
  9. PHP

Generate Multiple Certificates Using a PDF Template and JavaScript

Just did something at work I thought was pretty cool so I whipped out this crude tutorial.

TL;DR

Using JavaScript in a PDF to quickly and easily generate multiple (20-30) course completion certificates each class.

Pre-Requisites

You know how to create form fields in Acrobat.

The Problem:

I designed a certificate template for a teacher to distribute to her students. She loved it but then, basically, asked, “So do I just have you make a bunch of these and type their names in them so I can send them to the printer each time I have a class?”

No. The answer was most definitely no. That wasn’t going to happen. I didn’t want to simply tell her no, however, and seem like an uncooperative team player (which is the only possible outcome of me stating that was her job, problem, circus, monkeys, etc.).

Initial Idea:

Fortunately, I know Acrobat has a good relationship with Javascript. My first idea was to tell her she could import a text file containing a list of recipients and click a button to generate the required certs with their names and an automatically generated date—I would create the dynamic form fields, button, and Javascript.

First Obstacle:

That method requires the text file to be tab-delimited requiring her to know enough Excel for that. Thus, importing the list is unacceptable because that means telling her she has to do something and learn something. Customers don’t like doing and learning things.

Second Idea:

Creating an Acrobat form in which she could type or paste a list of names—theoretically, I thought, the button she’d then click would convert that list into an array and puke out a bunch of certificates. This required some thought and research on my part but I figured

  • the idea of typing/pasting a list in a single field would be much faster and more reasonable to ask for than separate fields for each name
  • One field is prettier than a bunch of fields
  • Number of students vary so there would either be too few fields or I’d have to figure out an elegant way to dynamically create more as needed and, oh geez, it’s already a pain in the butt.

Final Idea:

While I mulled over how to do that in a way that didn’t suck, I put together a prototype for a single name so I could hammer out the process and code. As it turns out, the prototype worked far faster and better than the other solutions. Check it out…

Step #1: Create the Certificate

Basic “background” created in Photoshop. I had the Director write his signature large on a blank sheet of copier paper with a sharpie, scanned it, and changed that layer’s Blend Mode to Multiply. You’re welcome.

forTute_01.png

Saved the PSD as a PDF named GreatCertGenerator.pdf and, in Acrobat, added two text fields that would populate dynamically: recipientName and date.

Step #2: Create the Form

Just laid this out quickly in Photoshop.

forTute_02.png

I also created button, which you’ll see in a moment, in a separate file. I’ll explain why the button is separate very soon. Saved it as CertForm.pdf and imported it into GreatCertGenerator.pdf  using the following lame, convoluted method (Acrobat, like MS Office, becomes more of a pain in the ass every single version):

  1. Click the Tools tab (Grr … it makes me angry even just writing it).
  2. Click Organize Pages (another step that didn’t used to be there!).
  3. Choose Insert > From File and navigate to CertForm.pdf, select Before Page 1 and click OK.
  4. Added two standard input text fields: singleName and myDate.

Originally, the form had only the Name field—the date was generated automatically on the certificate using the following code on page 1 (so it would happen as soon as the document opened):

var x = this.getField(“date”); x.value = util.printd (“mmmm dd, yyyy”, new Date())

However, I wanted to give the user the option to type in their own date if they’re reprinting an old cert or if they’re not creating these the day of the class so I created the myDate field in the form to “receive” the above code instead and, in the first line, changed date to myDate. The final version of the code in page 1’s Page Properties > Actions > Run a JavaScript looks like this:

var x = this.getField(“myDate”); x.value = util.printd (“mmmm dd, yyyy”, new Date())

inContext.png
Both pages visible–before making page 2 a template and hiding it–and the green AddGrad button created in Step #4.

Step #3: Make the Certificate a Template

  1. On the certificate page (page 2 for me), click the Tools tab.
  2. Click Organize Pages.
  3. Choose More > Page Templates.
  4. Type a Name for the template (mine is “EmptyCert”).
  5. Click Add and click Yes when asked to confirm using the current page. EmptyCert is now listed among the Page Templates.
  6. Poke EmptyCert in the eye to toggle visibility. The page disappears from Organize Pages as well as the Page Thumbnails panel. This makes the process all magic and mystery for the users.

AddPageTemplate.png

Step #4 Create the Magic Button

Because I’m assuming you already know how to create forms in Acrobat and I don’t want to type the lame, convoluted way you have to do it now because I’ll start ranting, I’ll just show you how I made my button prettier than the average button and added the JavaScript that generates each certificate with the name and date. First, I created the button in Photoshop and saved it as a PDF (see Step #2).

For_Butt.png

In Button Properties, under the Options tab (not the Appearance tab):

  1. I made the text in Photoshop, so I chose Icon Only for Layout.
  2. I chose Push for Behavior. You could, instead, choose None and, instead use separate images for each State in the Icon and Label section.
  3. Click Choose Icon and navigate to your button (which must be saved as a PDF).
  4. Under the Actions tab, the Trigger is Mouse Up and the Action is Run a JavaScript (see code below).
  5. Click Close.

Here’s the code and explanations a piece at a time:

Identify the template.

var a = this.getTemplate (“EmptyCert”);

On the template, we’ve got a couple form fields waiting as placeholders.

Fill recipientName on the template with the contents of singleName in the form.

getField(“recipientName”).value = getField(“singleName”).valueAsString;

Fill date on the template with the contents of myDate in the form.

getField(“date”).value = getField(“myDate”).valueAsString;

Create (“spawn”) a new page based on that template.

a.spawn();

Step #5 Creating the Over-the-Top Awesomeness

New Problem: When the user clicks Add Grad, they’re jumped to the new page/certificate. I hated the fact that the user must then stop, grab the mouse, click the first page in the Thumbnails panel to return to the form, click the Name filed, then move their hands back to the keyboard to type the next name. Life is way, way to freakin’ short for that nonsense.

One page 2 (the cert), I created an invisible button called Return. It’s invisible because the user never needs to click it so they don’t need to even know where it is. On MouseUp, the Action is Go to Page 1. Behold this line of JavaScript in Page 1’s Page Properties is:

getField(“singleName”).setFocus();

So the PDF works like this at ludicrous speed: When the user opens the doc—the Name field is autofocused and ready.

  1. User types the Name, presses Tab and Enter to generate the cert
  2. New cert opens—user presses Tab and Enter to return to the form (GoTo step 1)

Lather, rinse, repeat (really, really fast).

GloriousCerts.png

After creating all the certs they need, the user saves the PDF and emails it to their printer.