newsonaut
Turning inner space into outer space
Tuesday, April 9, 2024
How to include HTML files on web pages the good, old-fashioned way
Server-side includes have been around for as long as I can remember — and that goes back to the days of dial-up. After all these years, I finally feel good about using them.
Let me explain.
First of all, SSIs are an easy way to include one html page in another html page. So, for example, if you have a navigation bar that’s the same on all pages, you can create it once in a separate html file, then include it on all the other html pages.
Here’s what the include code looks like:
<!--#include virtual="/nav.html" -->
That way, if you have to make a change to the navigation, you only have to do it in one place, instead of laboriously going through every page copying and pasting.
But there was always a catch, and I never liked it. You had to change the file extensions of all your pages to shtml. I guess the “s” stands for “server-side”.
Anyway, it’s annoying and looks weird.
So what changed for me at long last? I learned about these directives in the htaccess file!
You can add lines to htaccess that make html and htm files act like shtml files.
AddType text/html .shtml AddHandler server-parsed .shtml Options Indexes FollowSymLinks Includes AddHandler server-parsed .html .htm
Before you do that, though, make sure it’s OK with your hosting service. As far as I can tell, the worst that could happen is that it simply wouldn’t work. But you never know. In my case, the service provided the instructions so I knew it was OK.
While I appreciate all the YouTubers patiently showing how to do includes with JavaScript, I can’t help but feel that something coming straight from the server is going to be a faster, more seamless experience for visitors.
More posts in the Coding category
Tuesday, October 27, 2020
Prettier, prettier good
The thing about code is that computers don't care what it looks like. That's why you can get away with "minifying" it into a single grey line that extends to forever.
That doesn't work for the average human being. We have indentations, syntax colouring and a few other tricks to help us better understand what's going on.
What this formatting looks like is a matter of person preference, but certain conventions have become accepted. You could ignore them, but others would silently judge you as either a heretic or a newbie.
People working on the same team sometimes agree on using the same conventions, making it easier to understand one another's code. Because it can be hard to agree, a convention might even be imposed by management.
A neutrality has grown around a plug-in called Prettier that is available for many code editors. It is, as they say, opinionated — meaning that in the vast majority of cases it refuses to give an inch on how it decides code should be formatted.
That means almost zero customization, which was almost a deal breaker for me.
For example, Prettier forces you do use <br /> instead of the more modern <br>. This is meant to be a compromise for people coding XML, where <br /> is required. For HTML, it is recommended.
There are a few other things that grated on me, such as putting paragraph tags on their own line if the paragraph's content goes over one line. Also, it puts classes and attributed within a tag on their own lines if they get to be long.
As with a lot of things in life, if you use something long enough you get used to it. That means when Prettier doesn't work — which can happen if you make an error — the code looks downright ugly.
It makes me wish Prettier were more forgiving of my mistakes.
More posts in the Coding category
Sunday, October 25, 2020
Classless is getting classy
HTML has a lot more tags than it used to, but you would never know it from looking at typical source code riddled with divs, each with its own class.
Why is it rare to see sections, articles and asides? Wouldn’t it be easier to style tags that exist than to create classes for a bunch of divs? Classes whose names you will undoubtedly forget and have to look up?
On a complex website, there may not be enough tags to cover all the styles you need. But don’t let that stop you from trying. There is a lot you can do.
CSS Bed has proof, with a lost list of classless themes you can click to see how they look. And the looks vary a lot.
More proof comes from Basic.css. It starts off with two responsive rows of three nice looking cards, in a layout typical of Bootstrap. It’s done with flexbox applied to articles in a section. This allows for an infinity grid — any number of elements.
Basic.css doesn’t appear to allow for a main/sidebar layout, but it should be possible if you stick with flexbox — or even grid.
Someone (me?) should try it.
More posts in the Coding category
Sunday, December 18, 2016
Three steps to freedom in web design
One of the coolest things about Resilient Web Design is that it is a web book. Yes, an entire book with chapters and an index, created first and foremost for the web. It looks good and reads great on any device.
But a book is nothing without content, and this one delivers. Mostly, Jeremy Keith presents a history of web design, but along the way we learn about the founding principles of the web and the philosophy they infuse in everything we do today.
It’s taken awhile, but we’re finally reaching the point where it’s considered normal to design a website so that anyone, armed with any device, can use it. Knowing the history of the web, it’s easier to understand past mistakes. It’s also easier to understand why we need no longer repeat them.
Keith’s big takeaway is his three-step approach to web design:
- Identify core functionality.
- Make that functionality available using the simplest possible technology.
- Enhance!
In many cases, the simplest technology might be nothing more than semantic markup. If someone can visit your site and get want they want with no CSS or JavaScript, count that as a victory for the web.
I would be tempted to go one step further. Before you even think about design, create all your content — or at least get it close to what you want. Then mark it up. Then design it.
Following this approach, by the time you reach Keith’s Step 3, you can go nuts.
More posts in the Coding category
Saturday, May 28, 2016
How to be a webmaster in the 21st century
The word “webmaster” seems hopelessly old-fashioned. It brings back memories of under-construction GIFs, visitor counters and “enter” links you had to click on just to get past the home page.
Plus, the idea of one person being master of an entire website is in some cases just plain impossible. Many sites these days are far too big and complicated to be the responsibility of one person alone.
Still, I can’t help but agree with Justin Jackson — it’s great to be a fucking webmaster.
You can write whatever you want whenever you want. You don’t have to worry about Facebook algorithms deciding who gets to see your post. Anyone who comes to your site will see whatever you want them to see.
You can write things that are politically incorrect. You can use salty language. You can write in-depth think pieces. Facebook frowns on all of these, and you can count on them being demoted into obscurity.
The other great thing about being a webmaster is that you can make your site look however you want it to look. Take a bit of time to learn HTML, and you’re no longer dependent on bland WordPress or Tumblr templates. If you want a corny GIF on your home page, you can go ahead and put it there — front and centre.
Becoming a webmaster is actually quite easy.
Apps
Text editor: You need this to type out your HTML code. Your computer comes with one pre-installed. On a PC, it’s called Notepad. On a Mac, it’s called TextEdit.
You can also download free text editors. I currently use Atom, which is designed to be used by the whole family — just watch their video. Back in the 1990s, I started with PageSpinner, which you can use for free if you don’t mind the occasional shareware nag. It’s great for beginners because it helps generate the code for you.
FTP client: You need this to upload your HTML to a server. There’s a free one for Mac and PC called Filezilla. Another one called Cyberduck might be easier for beginners. This was my first. I liked it because of the friendly interface.
HTML
Don’t be afraid of HTML. It’s not programming — it’s just markup you put in your text so that web browsers know what to do with it. Without the markup, you text would display in one giant blob, all the same size. HTML makes sure that it displays with headings and paragraphs.
In fact, you could get away with learning just three HTML tags — the ones for headings, paragraphs and links. Even links are not totally necessary, but links are why the web was invented in the first place.
So how do you learn? Go to W3 Schools, copy and paste their example into one of the afore-mentioned text editors and save it as index.html. Right-click on the resulting file and open it with the web browser of your choice.
What you’ll have is a perfectly good web page that looks good to anyone who sees it. Of course, once you get a taste of the power of publishing, you’ll want to learn more. Just keep going with the W3 Schools lessons.
Web hosting
Your web pages need to be uploaded to a server so everyone on the Internet can see them. This can get complicated because there hundreds of web hosting companies to choose from, and of course you have to pay.
I got my start on a service that came free with my Shaw Internet account. It’s gone through some changes, but apparently still exists. Do a Google search for the name of your Internet service provider plus words like free web space, and you might get lucky.
For me this was the perfect playground in which to hone my web skills. It’s one thing to preview your work in the privacy of your home, but quite another to put it out there for all to see.
If you do wind up having to pay for web hosting, resist the temptation to sign up for one of their pre-built websites. True webmasters build their own fucking websites.
More posts in the Coding category
Tuesday, March 31, 2015
Make images and captions stay together at the same width
I’ve been trying off and on for years to find a way to put captions under the images in newsonaut. It always seemed like it should be easy, but it never was.
The problem is that my pictures move around. They can be at the top, the left or the right. That means the captions have to be able to follow them around and match them in width.
The semantic way of doing it is like this:
<figure>
<img src="#">
<figcaption>
Text for caption.
</figcaption>
</figure>
But what if, say, the image is floated to the right and the caption goes on longer than its width? The caption will keep going as wide as it needs to to stay on one line, and push the image over to one side. It’s not a pretty sight.
I found the solution at Stack Overflow — a place where every imaginable web-related problem is resolved these days. And it made total sense because, well, we’re dealing with a caption here.
First, you display the figure as a table. HTML tables have the wonderful habit of containing whatever is inside of them — including images and captions. Even so, you have to make sure the caption knows that, so give it a display of table-caption. And where does the caption go? In my case it’s caption-side: bottom.
.fig-pic {
display: table;
float: right;
margin: 0;
}
.figcap-pic {
display: table-caption;
caption-side: bottom;
margin: 4px 0 10px 20px;
}
.pic {
margin: 20px 0 10px 20px;
}
Simple and sensible.
More posts in the Coding category
Saturday, August 30, 2014
Basic coding is fast becoming a part of basic literacy
Moms and dads, if you were to advise your children to learn just one skill in order to have a successful career — what would it be?
It’s taken a while, but I’m finally convinced. The kids should learn as much computer programming as they can. Even if it just means figuring out the basics of marking up copy for a website, it’s the one thing they’re all going to need to know if they have any hope of holding on to a well-paying, stable job.
We’ve reached a point where pretty much every business and organization, large or small, has a website and a presence on social media. Many have their own apps.
Currently, it’s common to have someone on staff who specializes in taking care of this kind of stuff. But I predict that in the near future, nearly everyone will be expected to contribute in one way or another. If you’ve got an update for the website, you’ll just have to go ahead and do it. No one will do it for you.
And while many content management systems have evolved to the point where it’s easy to make updates without having to mess with code, there are still times when it helps to know some HTML. Are the paragraphs jammed together instead of having a space between them? Maybe there’s a <p> tag missing.
Knowing HTML will become as common as knowing your ABCs.
If this sounds daunting, it shouldn’t. Take a few lessons in HTML or CSS — the building blocks of web design — and you’ll wonder why you were ever scared of it.
Luckily, encouragement for web literacy abounds on the Internet. Firefox, for example, has modified its start page to show just how easy it is to do a bit of coding. Want an orange background? Just type in the word “orange.”
It’s part of an effort by Mozilla — the open source organization behind Firefox — to promote Maker Party, described as a “global campaign to teach the web.”
It consists of thousands of events taking place in virtually every nook and cranny of the world. An unfortunate exception is our hometown of Kamloops. There is still time to add events to the list, though, and there are many bright people in the city who could organize one.
Even if nothing formal is put together, there is no reason why web savvy people can’t take the time to show friends and family some of the basics. The Webmaker site also has plenty of online training and resources available. You can also check out the free lessons at W3Schools.
It won’t be long before special events like the Maker Party will seem archaic. Children in elementary school will be taught HTML soon after learning the alphabet. And they’ll consider it to be one of their easier subjects.
More posts in the Coding category
Thursday, March 7, 2013
A little bit of code is more than enough for journalists
Why would a journalist need to learn programming? Here are a few answers I’ve come across. First up is Mindy McAdams, who teaches university courses about online journalism, in an article called Get started with Web coding. Part 1: HTML and CSS.
I’m not saying everyone needs to memorize massive quantities of HTML and CSS, or master these to the extent that you could code an entire 10,000-page website. No. I am saying you need to understand how this stuff works, because all the Web uses HTML and CSS.
I’m not convinced. But in the same article she links to a couple of supporting arguments. Miranda Mulligan is the executive director of Northwestern’s Knight News Innovation Lab. The title of her article says it all: Want to produce hirable grads, journalism schools? Teach them to code:
I am not arguing that every single writer/editor/publisher who learns some programming should end up becoming a software engineer or a refined web designer. The end goal here is not programming fluency. However, there’s a lot of value in understanding how browsers read and render our stories. Reporting and writing a story, writing some code (HTML, CSS, Javascript), and programming complex applications and services are all collections of skills.
The phrase “collections of skills” seems suspicious. Reporting and writing are already important skills.
The second reference is to Martin Belam, founder of a digital consultancy, in Do journalists need to learn to be programmers? Yes. And no:
For example, being able to spot the difference between a small technical change that has a big impact on story-telling, and what appears to be a small change but which has a hugely expensive technical impact, is an essential skill for someone setting the requirements for changes to a website or a CMS.
The common thread here is that journalists should learn some HTML, CSS and Javascript so they are at least familiar with its potential. I can see where they’re coming from, but I’m still not persuaded.
I’ve been able to code with HTML and CSS for several years now. I’m familiar enough with Javascript and PHP that I can take other people’s code and use it properly. I’ve built several websites from scratch, including this one. But would I recommend editors and reporters learn it? It might look good on a resumé, but in reality it’s just not practical.
Top priority for a journalist has to be the ability to tell a story. This in itself can be a skill that takes a lifetime to build. It seems strange to even have to say this, but it often seems forgotten in the rush to keep up with the latest and greatest.
Other skills are only helpful if they can be used as tools for storytelling. If technology can be used to do that, then by all means use it. That’s why I get excited by something like Vine — I can see how six-second videos could be used to tell stories in a new and interesting way.
But I’m just not sure how knowing anything about the programming that went into the Vine app could in any way be helpful to a journalist. I know how to take the a snippet of code and embed it into HTML so a Vine video can be displayed on a website, but I’d hardly call that a coding skill.
If you’re a journalist with a passion for learning technology, your best bet might be to learn some HTML. This is the basic code that can be used to build a web page. It might not look great without the styling provided by CSS, but it functions.
The code shown at the top, is the HTML for the first paragraph of this article. You can probably figure out that “p” stands for paragraph and “a” stands for anchor or link. It’s not that hard.
But honestly, unless you’re thinking about starting up your own news site, delving into Javascript and other programming languages is probably a waste of time.
Explore new technologies and how they can be used to augment stories, but don’t get hung up on how they work.
More posts in the Coding category
