Is it a bad idea to hand code a website in 2018?

March 3, 2018 10:39 AM

I’d like to make a small (10 to 20 pages) website, and I’d like to do it by hand-coding in a text editor. I want to make sure it displays reasonably correctly across modern browsers without any security concerns.

In the short term I’d like the following:
* HTML and CSS only, with no JavaScript and no frameworks
* Static pages
* Responsive resizing
* Support for Retina/high-resolution screens

Is this stuff all doable? I’m open to a few hacks to get things working consistently across browsers, but I’m also assuming, perhaps naively, that the cross-browser incompatibilities of 15 years ago are largely gone. I would like to avoid doing extensive testing. It’s also important to me that the site be secure. I may put this up and forget about it, so I don’t want to leave myself open to vulnerabilities.

In the long term, I may introduce:
* Google Analytics (or is there a simpler alternative?)
* A field for email address entry, like a mailing list subscription
* Custom fonts
* A shopping cart, though it’s unlikely, and I’m open to having that on a separately hosted site

I realize these might require JavaScript. Where would this leave me, in terms of browser compatibility and security?

Finally, I know the reasonable response to my questions is to use Squarespace. I’m not trying to shut those answers down, but I’d say my desire to have a website is 60% to actually have a website and 40% to do the coding. I’d also like to develop the site locally before uploading to my host, which last I checked wasn’t possible with Squarespace.

posted by Pork-Chop Express to Computers & Internet (12 answers total)

Best answer: You say 'no frameworks' and 'responsive resizing'. Would you also object to using a responsive CSS framework? I'd use something like Skeleton to get me started with a project like this. And even if you insist on hand-coding absolutely every aspect of the site, you ought to at least start with a CSS file that resets/normalises presentation as much as possible across browsers.

Security concerns aren't much of a thing with a static site that doesn't process any form data. Javascript on a static site is no danger to you, as there's no way to trick users into submitting data (because you're not setting the site up to process any). Once you move on to a contact form or shopping cart, that's when you might start to think about that stuff.

Custom fonts are nothing to be scared of. Just link in a stylesheet containing (for example) a Google font, and start using it in your CSS. Again, it's all client-side, so there are no security worries there, really.
posted by pipeski at 11:05 AM on March 3, 2018 [2 favorites]

Best answer: So it sounds like your site will be static, that is that all the content is contained in the HTML files you upload, and not generated from a database. It also sounds like you won't have user accounts or similar. Given that, your only security concerns should be the security of your host, as long as you use a secure method to upload your files (e.g., sftp). There shouldn't be anything a site visitor could do to disrupt your site.

It is definitely doable, just a lot more work then starting with something like Bootstrap and maybe a static site generator (like Jekyll or Hexo).

(on preview, I second pipe ski's recommendation for a CSS reset file at a minimum.)

I would also recommend at least taking a look at Bootstrap. If not to use, at least to get an idea of how to handle the responsive css.
posted by Tabitha Someday at 11:16 AM on March 3, 2018 [1 favorite]

Best answer: Is this stuff all doable? I’m open to a few hacks to get things working consistently across browsers, but I’m also assuming, perhaps naively, that the cross-browser incompatibilities of 15 years ago are largely gone. I would like to avoid doing extensive testing.

All that stuff is absolutely doable. There are still some cross-browser incompatibilities especially when you consider all the different browsers on all the different operating systems, including mobile. The bigger challenge now-a-days is getting everything looking good on all screen sizes with responsive design. If you want to avoid extensive testing across screens and devices, I STRONGLY suggest (as the other posters have) that you use a CSS framework. Bootstrap is excellent and is still hand-coding in a text editor. You don't have to learn SASS or use the package managers. I just download the CSS and use the helpful classes like "row" and "column" to create a responsive site. I hand-code all my static websites in Atom (free text editor), upload the files to my host (Dreamhost) with Fetch over SFTP. Very simple and secure.

When you get to adding mailing lists and shopping carts, I would use third party companies to keep that stuff secure. Like Mailchimp and Shopify for instance.
posted by 2ghouls at 11:31 AM on March 3, 2018 [3 favorites]

Yeah, a CSS system like Bootstrap (mentioned above) or whatever the kids are using these days isn't a framework in the massively-complex-and-constantly-updating-database-driven-CMS sense, it just establishes a bunch of pre-set layout and styling rules you can use to lay out your pages. They're so much more pleasant to use than trying to develop your own cross-platform responsive CSS layout by yourself; you just include a link to the CSS library in your HTML header, and then you can use all of those classes in your own custom CSS file.

For managing your content, you could probably get away with managing 10-20 100% pure static HTML pages on your own, but the moment you decide you want to add or re-order a menu link you'll be reminded of why most sites are built with CMSes these days.

Tabitha Sunday also mentioned Jekyll, which is a "best of both worlds" solution; you can still build your site using static files, but Jekyll takes care of merging your content into your template(s) to make all of the plain-jane HTML files for your site... which you can then upload via SFTP. That way if you want to change a menu or your layout, you only have to change one template and re-generate your site, as opposed to the 1997 practice of editing 20 different files to make one change.
posted by Funeral march of an old jawbone at 11:39 AM on March 3, 2018 [1 favorite]

I do my small sites like this, by hand in BBEdit. It's fine.

The easiest way I know to do retina support though is with javascript. Maybe there is now a compatible way to do this without Javascript?

I surrently use a 5 year old version of retina.js where you just define images like
<img src="logo.png" data-at2x="[e-mail]">,
and then at some point in the HTML you need a script tag to pull in the local copy of the retina.js file which looks for all the images in the page and changes the src attribute if needed.
I now see that the current version of retina.js on github has ballooned into a bloated mess, so I'm sticking with the 5 year old, one page of code version, which works fine.
posted by w0mbat at 12:58 PM on March 3, 2018

Best answer: Retina support doesn't require Javascript or fancy attributes in your img tag, just make sure your images are 2x the dimensions you want them to appear at, and then use CSS to scale them to the size you want. Use SVG or an icon font for icons and you're set for retina.

I'd advise against Bootstrap, unless you want your site to look like Bootstrap. It's incredibly opinionated and requires a lot of overriding. All you really need for a responsive website is CSS media queries and a fluid design.

With the exception of the shopping cart and Google Analytics, you can totally do what you want with plain old HTML and CSS. The form submission can be handled by a good old-fashioned POST to a script in a server-side langauge if you want to avoid using Javascript at all.

For both the cart and analytics, you will have to include some Javascript on your page. In the case of analytics you'll be including Google's JS; in the case of a shopping cart, I'd recommend finding a third party that can handle it, unless you want to just send your users to PayPal, in which case that's just a link to your PayPal page and can be done without JS.

Custom fonts can be included with a CSS link - as with Google fonts; again, no JS required.
posted by eustacescrubb at 1:44 PM on March 3, 2018 [3 favorites]

You actually can develop locally with squarespace, but it freezes the theme at whatever version you start with, so no theme upgrades when new versions come out. It's fine though, it works well, I've done it. It's just very squarespacey, and it's not 100% local (you still need an internet connection, to pull down content to the local webserver).

If you think anyone other than yourself might want to manage this website in the future, then you might regret not using a content management system like wordpress. I built a totally custom website a while ago using a wordpress starter-theme called Bones, and that was a nice balance between using a framework and doing it all myself.

I also agree that Jekyll is really cool and worth looking into.
posted by mammal at 4:49 PM on March 3, 2018

Best answer: If you actually want to know HTML and CSS, this is a totally fine idea and I would recommend that you learn how to do stuff like responsiveness yourself before using anything else to do it for you. As you get more comfortable with it, you can do fancier stuff, but you don't need to start off with any of that. I'm a web developer now, and this is how I started at the very beginning when I started learning--it's not only not a bad idea, it's a step that I think that if your goal is to learn, skipping this kind of stuff is not a great plan even if there are "easier" solutions later. You can do more with Bootstrap and the like if you already understand how the CSS and HTML work properly.
posted by Sequence at 5:57 PM on March 3, 2018

I agree it is possible. Depending on what you have in mind, you might want to consider a CSS framework (Bootstrap was mentioned above; it’s pretty heavy, but there are lighter ones), and you should definitely use server-side includes for boilerplate headers and footers.

There are also a host of static-site renderers out there. You could develop a theme for one and make it your own.
posted by adamrice at 7:09 PM on March 3, 2018

Best answer: Browser compatibility is improving all the time; most incompatibilities these days are with new features, not the fundamentals. There's never been a better time to hand-code a website!
posted by panic at 4:13 AM on March 4, 2018

HTML5up is awesome.

Jekyll is also very cool.
posted by aspersioncast at 2:09 PM on March 5, 2018 [2 favorites]

Response by poster: Thank you all very much. Every one of these answers is helpful. I’ve marked the ones most pertinent to me.
posted by Pork-Chop Express at 7:18 PM on March 9, 2018