https://wiki.mcneel.com/zoo/window7firewall

Drupalcon Nashville has now come and gone. The growing lineup of different tracks in conference sessions has presented me a unique problem: too many interesting sessions! Given my role as a web developer at our organization, rather than a content manager or creator, I focused on the development side of things with my session attendance, and it was a pretty good sampling to choose from.

For me, this conference was the Configcon, where I attended multiple sessions about the Drupal config system and general developer tools. All in all, I would call it a success.

For future reference for myself, here are videos of sessions that I attended:

1. Monday: Theming Drupal 8 from Drupalize.me staff
2. Composer 101
3. Journey to the Drupal Heart – Symfony 3 basics and a bit beyond (audio only)
4. Top Drupal 8 Modules
5. Advanced Configuration Management in Drupal 8
6. Drupal and Libraries birds of a feather (one of my favorite events at Drupalcon)
7. OOP the Pokemon Journey
8. Configuration Management for Humans
9. Seniors and UX Designing for Baby Boomers and Beyond
10. Defense in Depth: Lessons Learned from Securing 200,000 Websites
11. What’s Possible with WordPress 5.0

Here are some other sessions I wish I attended and which I am saving here for later viewing:

1. Crazy Tricks with Views
2. Building a Great User Experience for Content Editors
3. Usability Testing is Super Important and Easier than You Think
4. A Farewell to Twig
5. Javascript and Accessibility: Don’t Blame the Language
6. A Smarter Way to Test Accessibility
7. Media Module in Core: Setting Up a Drupal 8 Media Library

Lots more to discover on the conference site and Youtube page!

A year ago, one of my professional goals was to become much more proficient with Drupal. Heck, to have a modest comfort level with Drupal. I’ve been doing the web development thing for a while, starting from basic page development in the late 90s with Dreamweaver to CSS work around 2010 or so (a bit late to the game), and lately, back-end PHP work to go along with it in this new responsive era. But the main website at my place of work is a Drupal site, and it was past time for me to get my footing with Drupal and take part in the maintenance of that site. On top of that, we were about to undergo a massive website update from Drupal 6 to Drupal 8, and it was expected that I would have a greater role in that site. So I needed to learn Drupal. I set my sights on the Acquia Drupal 8 Site Builder Certification as my benchmark.

The Acquia certifications represent a genuine industry standard for Drupal knowledge and expertise, so this seemed like the most appropriate target. I needed a broad understanding of Drupal, so this seemed like a good way to push myself into it and learn a lot. So I sought out training to make this happen, participated in the construction of another Drupal site or two at work, and prepped for the exam at Drupalcon … but I fell just a little short. It was a great benchmark to learn all manner of Drupal things. So this year, I will try again. And here are some of the resources I am using to prep for that training:

Acquia Academy

This is a top-notch set of training tutorials to step you through all of the basics of working with Drupal, creating a site, and developing your Drupal skills. The videos come with file downloads to walk you through each process. the training is from OSTraining, and it’s just fantastic and free. Can’t beat it as a starting point. However, once you have completed the courses, it’s not the most convenience tool to brush up on specific topics or push a little further in areas that the certification may test but aren’t as deeply covered here. It works, but sometimes other resources work a bit better.

Acquia Site Builder Study Guide

This is your bible through the prep process, outlining the topics that will be covered in the exam, and how many questions for each topic. After you are done with general training or brushing up on areas of Drupal that are less familiar based on your own past experience, come back to this document for great information.

D8 Site Builder Self Assessment

This is even more condensed, with all of the objectives that you can expect to be tested in the exam. Perfect preparation tool!

Configuration Management

Sync and Config. This was an area that the Acquia Academy tutorials didn’t really prepare me for. Granted, I went through the D7 tutorials first, because the immediate project at hand was a D7 project, and then I looked over the D8 tutorials to find differences. But Config is still something that really tripped me up. This presentation from 2014 Drupalcon in Austin really lays it out there for you, spells out what is in config and what isn’t, how things work, and a bit of the history of config since the release of D8. This is a little bit old, but it offers a great overview.

Contact Forms

Contact forms are pretty straight forward. And then you work in a site that pretty much exclusively uses the Webform module, and it’s all a jumbled mess. This presentation from WebWash (it’s great; he does an excellent job of going over the basics without taking forever) outlines what each does and doesn’t do, starting with Contact forms. So if you need a refresher, just in case you really don’t use Contact Forms in practice, this presentation will help you brush up on that information.

Multilingual …

Personally, I’m yet again brushing up on multilingual for this exam. We don’t use it for our site, so the content fades from my memory. Here are a couple good articles on the topic:

• OSTraining: 5 Steps to Build a Drupal 8 Multi-Lingual Site
• Acquia: How to Make Your Drupal Site Multi-Lingual

So here we go … Drupalcon is in two weeks, I’m prepping up on the Site Builder certification exam again. Wish me luck!

Update 1: More Resources & Tips

Crack your Acquia Drupal site building certification

Jim Frenette: Acquia Certified Site Builder – Drupal 8

TIP: Review the topics in the study guide or either of the blog posts listed above, and pay particular attention to how you navigate through the admin navigation on Drupal’s back end. What are you clicking on to complete each task? How is it labelled? Remembering the names of admin management links will help a lot.

Update 2: I passed! Hooray!

Maybe it will be time to look at the Drupal developer or the front end certification for next year …

Taking the leap into SASS CSS management can be a bit daunting, particularly in a Windows environment, rather than Mac or Linux. This jump can happen one of two ways:

1. Starting on your own, developing your own SASS files for a project.
2. Jumping into the deep end updating CSS on an existing project through SASS.

I’m hopping in with option #2. Since many developers swim in a Mac or Linux world, the tools to manage these environs can feel a bit foreign on a Windows PC or the most common tools used by colleagues just aren’t available. So how do you go about it?

First, you may need an installation of Ruby to get things going. SASS is originally a Ruby application, so this may be necessary. Another option is to install node.js and go with more recent versions of SASS. Scout is a good, free option for SASS development.

So if you are clawing at this on your own, you can use the Scout app to start setting up SASS files and outputting your CSS. And for option #2? Gulp should be able to help you get into things mid-stream.

There are some great tutorials and guides on the web for using Gulp. Because of the many uses of Gulp, distilling it down to this one component can be challenging, but these guides should help out:

• CSS-tricks gives a great overview of Gulp, what it does, how to start using it, and it’s place in a SASS toolkit.
• Sitepoint also offers a great overview of Gulp, but it is a bit less specific for CSS work and gives a broader overview. That broader overview can also help understand the rest of what it does and how it fits into a web developer’s toolkit.

UPDATE: Important information for installing on Windows 10. This video is a God send to get Gulp up and running in a Windows environment. With a pre-existing Gulp package.json and gulpfile.js, use the following steps:

1. Download file set from repository.
2. Open Powershell terminal and node.js client (assuming node.js installed).
3. cd to appropriate folder location with gulpfile.js and package.json.
4. Command to start gulp: npm install gulp-cli -g
5. Verify Gulp with command: gulp -v
6. Install node-SASS: npm install node-sass -g
7. Install Windows tools: npm install -g windows-build-tools
8. Again run Gulp-SASS install: npm install gulp-sass –save-dev
9. Run Gulp copmmands as specified in gulpfile.js! Hooray!

In a variety of ways, HTML5 marks a new way of approaching the webpage and HTML documents, but it does so while remaining consistent with the past. Much of the interest in HTML5 revolves around interactivity and video, but that discussion is for another time. This post will simply address the basic structural changes for an HTML5 webpage. I assume a functional knowledge of HTML prior to HTML5 implementation and efforts to migrate to HTML5 or build from scratch in HTML5.

I think the best place to start is with sample code, so let’s just jump right in. Here is the basic shell of a page in HTML5:

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>TwigTown Homepage</title>
<link rel=”stylesheet” href=”css/twigtown.css?v=1.0″>
<!–[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
</head>
<body>
<header>
<nav>
<img src=”twigtown1.png”>
</nav>
</header>
<div id=”main”>
<article>
<h1>Welcome to Twigtown!</h1>
<p>This website is a showcase of web development projects and a place to share ideas. Feel free to have a look around.</p>
</article>
<article>
<h2>Planted Freshwater Aquaria</h2>
<p>Fish and shrimp are wonderfully interesting creatures, and a freshwater planted aquarium is a great way to keep fish for personal enjoyment and to experience the balance of nature at home. <a href=”http://nubs.twigtown.com/aquaria”>Visit my blog</a> to follow developments with my aquaria, read about topics in freshwater planted aquaria, and share your own ideas and experiences.</p>
</article>
<article>
<h2>Web Development</h2>
<p>If you’d rather keep an electronic garden, delve into my <a href”http://nubs.twigtown.com/web”>blog about web development</a>. It’s my way of sharing what I’ve learned with others, and it also serves as a record of sources, projects, and ideas as I work through web development projects.</p>
</article>
<aside id=”main-photo”>
<img src=”fullbody-photo.jpg”>
</aside>
</div><!– #main –>
<footer>
</footer>
</body>
</html>

So let’s look at the new or important things here:

1. New, clean doctype declaration (and other header stuff)
2. Link to an HTML5 javascript shiv
3. New elements: <header>, <footer>, and <nav>
4. More new elements: <article>, <aside>, and <section>

Now we can take these one at a time.

1. Doctype declaration

This is about as simple as it gets for a doctype declaration. Within HTML4, doctype declarations could carry a bit of importance. This indicated to the browser how to interpret the page, with a few rather common variations, including strict, transitional (or loose or quirksmode), and XHTML. Here are some example doctype declarations:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

Some of these needed to be written as well-formed XML, and would only be interpreted and rendered it the page could be properly validated. Allowing for variability, human error, and accessibility to all manner of people who may wish to post webpages, most browsers are very forgiving when it comes to reading and displaying webpages.

The very simple doctype declaration steps aside from the strict version control so well represented by the lengthy (and sometimes confusing) doctype declarations listed above. Worth noting is the fact that this isn’t <!doctype html5>, but simply <!doctype html>. The assumption is that future versions of HTML would roll out, not with a specific version identified in the doctype, but rather simply as broad updates to how HTML is read.

The HTML5 update also simplifies the declaration for character encoding. It had been this:

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

It is now this:

<meta charset=”utf-8″>

For more information, about character encoding, see the W3C’s website.

2. HTML5 Javascript shiv

Thank Internet Explorer for this one. This code calls a Javascript shiv from Google to ease earlier versions of Internet Explorer along and help them interpret the page as desired by the developer. This is not the only javascript shiv available, and this is not the only way of dealing with this issue, but it is a relatively painless way to avoid a page exploding on an earlier version of Internet Explorer.

<!–[if lt IE 9]>

<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>

<![endif]–>

If you would like backstory on the shiv, take a detour to The Story of the HTML5 Shiv. Suffice it to say, these three lines of code should help avoid hours and hours of headaches trying to support older browsers on a webpage written for today’s browsers.

3. <header>, <footer>, and <nav>

Here’s some real meat and potatoes for you, and a really nice addition to help people read the code and understand what is intended for the various components. These nice little tags provide a way to define portions that are a header, a footer, or a piece of the navigation. Rather than the old <div id=”header”> approach, there is now a specific <header> tag within HTML, along with <footer> and <nav> because these elements are just so ubiquitous.

Note that the difference between <head> and <header>. The <head> is information preceding the body of the page to tell the browser what’s coming and how to read it. The <header> is within body of the page to identify components that are a header. It could be the header for the whole webpage, or it could be a header for a section of the page.

Important: You can have more than one <header>, <footer>, or <nav> on a page. An article or story on your webpage could have a header section designated with a <header> tag, and a <header tag> present at the beginning for the webpage as a whole.

4. More new tags

And that’s not all, folks! Beyond the tags for <header>, <footer>, and <nav>, there are other semantic tags that have been added. These include: <section>, <article>, and <aside>. These should be pretty clear, and they function in much the same way as the others, so I won’t dwell on it here.

And not everyone is happy about these developments. Some, like Luke Stevens, are downright miffed.

The article “The Truth About Multiple H1 Tags in the HTML5 Era” gives an excellent overview, from an SEO perspective, about how to appropriately use the new semantic tags and h tags, and how that will likely be read by search engines to interpret the important parts of the page.

Now there are other important changes present within HTML5, such as <video>, but I count those as more down-the-chain elements. These changes reflect root changes that would need to be rewritten for any transition to HTML5 (unless you don’t like the semantic tags, and then you can just forget them; there is backward compatibility, and you can continue to use the old standbys).