How to create a Hugo website without a theme

2023-02-14T00:00:00+00:00

Since converting this website to the Hugo static site generator a couple of years ago, I’ve used Hugo for lots of other projects. It’s blazing fast, simple, and makes small website projects much easier.

One of the sites I’ve built with Hugo is a simple site to keep notes for my university classes. Hugo’s documentation tends to assume you’re using a theme, but for such a basic site using a theme would add unnecessary complexity I didn’t want to deal with. So, in this article I’ll show you how to create a site without a theme.

Creating a site

First, install Hugo.

If you want to use SCSS, as I do in the example below, make sure to install the “extended” version of Hugo.

Then, run the following command to create a Hugo site:

$ hugo new site notes

Get into the new notes directory, and let’s edit the config file:

baseURL = "http://example.org/"
languageCode = "en-us"
title = "Notes"
pluralizelisttitles = false

Other than the title, the only thing I changed here is disabling pluralizelisttitles. Hugo expects you to name your sections something singular (e.g., put your blog posts in a post directory), then automatically pluralizes the title when listing content in that section (Posts). I prefer the singular for my university class names (Math 112 instead of Math 112s and so on).

Layout

For a site as simple as ours, we only need a few layout files. Create a directory called _default in the layout directory, to put three files in: baseof.html, list.html, and single.html. We’ll go through each of these files and what it does.

If you need to add different templates for different sections, or if you’re curious about why we use _default here, see Hugo’s lookup order docs.

baseof.html

Every page on the site looks for a base template, which we provide in baseof.html. We’ll use it for the HTML boilerplate — <!doctype html>, the <html> tag, the <head> tag with some logic for what to load, and the <body> tag with a block template for the page content.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ or .Title .Site.Title }}{{ if ne .Kind "home" }} | {{ .CurrentSection.Title }}{{ end }}</title>
    {{ $style := resources.Get "scss/style.scss" | toCSS | minify }}
    <link rel="stylesheet" href="{{ $style.RelPermalink }}">
  </head>
  <body>
    {{ block "page" . }}{{ end }}
  </body>
</html>

list.html

The list template defines the layout for section list pages. Sections are defined by directories in the content folder.

Read more about Sections in the Hugo docs.

{{ define "page" }}
<article class="container">
  {{ if ne .Kind "home" }}
  <a href="{{ .Site.Home.RelPermalink }}">Home</a>
  {{ end }}
  <h1>{{ .Title }}</h1>
  {{ range .Sections }}
  <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
  <ul>
    {{ range .Pages }}
      <li>
        <a href="{{ .RelPermalink }}">{{ or .Title .RelPermalink }}</a>
      </li>
    {{ end }}
  </ul>
  {{ end }}
  <h2>Other</h2>
  <ul>
    {{ range .RegularPages }}
      <li>
        <a href="{{ .RelPermalink }}">{{ or .Title .RelPermalink }}</a>
      </li>
    {{ end }}
  </ul>
</article>
{{ end }}

Here’s a breakdown of what’s going on:

We define the page block we saw in the base template.
If we’re not on a home page, we show a link to home.
We range through every subsection of the current Section, listing all the pages for each.

Note that in Hugo, everything is a Page, of varying types (like Section). A Section can have multiple subsections as well as Regular Pages, which are just Markdown files with some front matter. This allows us to list direct subsections alongside the Regular Pages for each section, while listing non-section Pages in our “Other” section. You can read about all the available Pages variables in Hugo’s docs.
Then, we list the Regular Pages of the current section.

single.html

{{ define "page" }}
<article class="container">
  <a href="{{ .CurrentSection.RelPermalink }}">Back to {{ .CurrentSection.Title }}</a>
  <h1>{{ .Title }}</h1>
  {{ .Content }}
</article>
{{ end }}

This one’s simple:

Define the same page block — remember, the list and single templates both extend from the same baseof template.
Provide a link back to the current Section’s list page.
Get the title from the page’s front matter.
Show the content (here that means everything except the front matter) run through a Markdown parser.

Styling

I prefer to style with SCSS, which Hugo supports with Pipes.

Because I’m using SCSS, I’ll put my styling in the assets/scss directory (you’ll need to create it). If you want to use plain CSS, you could put it in a static/css folder — everything in static is copied to the build folder, preserving the existing structure. Then, you can link to it normally, without the Hugo Pipe I use for SCSS parsing.

To keep it simple, my style.scss is less than 100 lines long. Here’s part of it:

$paradise-pink: #EA1F4B;
$paradise-pink-light: #EF5778;

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  line-height: 1.3;
}

h2, h3, h4, h5, h6 {
  margin: 3.8rem 0 .6rem;
}

h1 {
  font-size: 3.2rem;
}

h2 {
  font-size: 2.5rem;
}

p, ul, ol {
  font-size: 1.8rem;
  margin: 0 0 .8em;
}

a {
  text-decoration: none;
  color: $paradise-pink;

  &:hover {
    color: $paradise-pink-light;
  }
}

article {
  padding: 2rem 1rem;
  max-width: calc(44em + 2rem);
  margin: 0 auto;
}

See Aleksandr Hovhannisyan’s article for a good explanation of setting the html font size to 62.5%.

Content

As I mentioned earlier, Hugo’s sections are defined by directories in the content directory. Here’s what my notes look like after I organize them by university semester:

└── content
    ├── _index.md
    ├── winter-2022
    │   ├── _index.md
    │   ├── cs-235
    │   │   ├── _index.md
    │   │   ├── lecture-9.md
    │   │   ├── lecture-10.md
    │   │   └── quicksort-getting-started.md
    └── winter-2023
        ├── _index.md
        └── ec-en-240
            ├── _index.md
            └── lecture-01-09.md

The _index.md files are used to add frontmatter and content to list pages. In this site, I just use them to name my sections. If you don’t specify anything, it’ll use the directory name.

---
title: Electrical and Computer Engineering 240
---

And here’s one of those Markdown files; I’ll use lecture-9.md as an example:

---
title: "Lecture 9"
date: 2022-02-01T09:39:28-07:00
katex: true
---

`sumto()` function: \\(\sum_1^i i\\)

Can be done recursively: `sumto(5) = 5 + sumto(4)`

Recursive function rules:

1. have a base case (a case to stop the recursion)
2. the recursive function must progress toward the base case (otherwise it will recurse infinitely)
3. trust the induction
4. Make sure that it won't make too many recursive calls
5. Never run the same arguments of the recursive function twice. Caching may help

You may notice a katex: true key & value in the front matter. That’s an optional extra goody I’ve added, which we’ll go over soon!

Building and using the development server

To deploy the site to the build directory, run:

$ hugo

Or to use Hugo’s development server (one of its strongest features, in my opinion), go to the base site directory and start it:

$ cd notes
$ hugo serve

It will give you a localhost address with a port (1313 unless it’s taken by another service) that you can open in your browser of choice.

Now you should have a shiny new Hugo site to work with, no theme required!

Here’s the list page template in action:

And the single page template, plus our content file:

Adding KaTeX support

KaTeX is a lightweight JavaScript TeX implementation. I use enough math in my notes as an engineering student that I wanted an easy way to show math notation.

Although I use math notation pretty often, I wanted to only load the JavaScript when necessary. For this, I set a front matter variable (katex), and render a katex.html partial in the site’s <head> if it’s there.

Add the following to baseof.html, in the <head> tag:

{{ if .Params.katex }}{{ partial "partials/katex.html" . }}{{ end }}

The partial function takes a path relative to layouts, so partials/katex.html finds the file in layouts/partials/katex.html.

Put the following in layouts/partials/katex.html:

<link rel="stylesheet" href="/katex/katex.min.css">
<script defer src="/katex/katex.min.js"></script>
<script defer src="/katex/contrib/auto-render.min.js" onload="renderMathInElement(document.body);"></script>

I downloaded KaTeX myself, which is nice for serving your own content while offline. But you could easily modify this partial to use CDN-hosted files.

If you host the files yourself, just download and move the necessary files to static/katex. You only need to keep a few files out of the ones KaTeX ships with:

└── static
    └── katex
        ├── contrib
        │   └── auto-render.min.js
        ├── fonts
        │   ├── KaTeX_AMS-Regular.ttf
        │   ├── KaTeX_AMS-Regular.woff
        │   ├── KaTeX_AMS-Regular.woff2
        │   ├── KaTeX_Caligraphic-Bold.ttf
        │   ├── KaTeX_Caligraphic-Bold.woff
        │   ├── KaTeX_Caligraphic-Bold.woff2
        │   ├── KaTeX_Caligraphic-Regular.ttf
        │   └── … (more fonts here, not shown to save space)
        ├── katex.min.css
        └── katex.min.js

Remember that the contents of static are directly copied to the build directory, so you don’t need to include static/ when referencing them in your templates.

Now we can turn on the katex switch and use math notation! The auto-render extension will, by default, look for blocks denoted by \$ \$, or $$ $$ for bigger symbols and centered.

Let’s make a new file in content called katex-test.md:

---
title: "Some math notes"
katex: true
---

\\(
\text{A system of } m \text{ equations in } n \text{ variables:}\\newline
a_{1,1}x_1 + a_{1,2}x_2 + ... + a_{1,n}x_n = b_1\\newline
a_{2,1}x_1 + a_{2,2}x_2 + ... + a_{2,n}x_n = b_2\\newline
\vdots\\newline
a_{m,1}x_1 + a_{m,2}x_2 + ... + a_{m,n}x_n = b_m
\\)

This one's in "display mode" — centered, with larger symbols:

$$
\begin{bmatrix}
a_{1,1} & a_{1,2} & ... & a_{1,n} & \mid b_1\\\\
a_{2,1} & a_{2,2} & ... & a_{2,n} & \mid b_2\\\\
\vdots\\\\
a_{m,1} & 1_{m,2} & ... & a_{m,n} & \mid b_m
\end{bmatrix}
$$

The highlighting here works fine, but it doesn’t work exactly how I’d expect. Markdown should always render first, then KaTeX should search for delimiters in the generated HTML, but the backslash behavior doesn’t seem consistent — I have to escape the backslash in \newline or Markdown catches the \n, but \\( collapses to \( and works fine, even with KaTeX looking for \\( (which looks like \\\\( when properly escaped in Markdown). Exploring that may be a topic for another blog post…

Now you should be able to include math notation in your notes to your heart’s content!

Converting to Hugo

2021-08-23T00:00:00+00:00

We recently converted the End Point website from Middleman to Hugo. I’ll go into more detail shortly, but the general result has been much better build times with less configuration and better support for local development.

Background

In 2017 we converted this website from a Ruby on Rails app to a static site. With tons of high-quality static site generator options, we could implement the shiny features used by our Rails site in 2009 with less overhead and quicker load times.

We also wanted to move away from Blogger to self-hosting our blog, using GitHub issues for comments. We ended up switching to Middleman, a static site generator written in Ruby, and had a mostly positive experience. Ruby was a good fit switching from Rails, and (if I remember correctly) Middleman had pretty competitive performance.

With over 1000 blog posts at the time, as well as lots of other pages, our site was quite slow to build—3.5 minutes when building with the full blog.

Middleman had a nice development server, but due to some server-side rewrites, we couldn’t use it. Instead, we got around the build times by writing a simple Ruby script to generate an HTML preview, letting our blog authors see what their post would look like, more or less. This worked okay, but was not 100% accurate and made copy-editing and formatting slower than it needed to be for us “Keepers of the Blog”.

We started hiding most of the blog from Middleman while building to save time, but build times were still 40 seconds or more. With our patience for long build times waning, as well as Middleman losing most of its support in the development and user community, we decided to get in the market for a new site generator.

Shopping around

Before we (🚨 spoiler alert 🚨) settled on Hugo, we tried using Zola, a site generator written in Rust and boasting tiny build times. Zola is a small project, and would have worked fairly well for us, but it had several downsides.

Initial build times were very promising, but slowed down more than expected after adding our now more than 1500 blog posts. We still ended up with very respectable build times of less than 15 seconds.
As far as I could tell, Zola would have required an _index.md file in every section and subsection, to hold section settings or to make it a transparent section, passing its files to the parent section. I didn’t like the sound of having a couple hundred extra Markdown files, one for every blog year and month.
At the time of writing, Zola doesn’t support custom taxonomy paths. That means we would have our blog tags at www.endpointdev.com/tags/, instead of our existing (and preferred) www.endpointdev.com/blog/tags/. This has been discussed on Zola forums, but seems to have stalled. This wasn’t a complete dealbreaker, but it was disappointing.

Making the switch to Hugo

We wanted to see if there was another option which solved our issues with Zola. I decided to try Hugo. It’s written in Go and is currently one of the most popular static site generators.

I partially converted the site and blog, and found that Hugo solved our main concerns with Zola:

Build times were close to twice as fast as Zola.
You can dump as many subdirectories as you want in each section, and they’ll still belong to the section but retain the original directory structure.
Hugo supports custom taxonomy paths through its permalinks.

We were also able to shave off a lot of build time by analyzing our template metrics—this is one of my favorite features in Hugo.

Local development

So far, we’ve had extremely smooth local development. Hugo (like Zola) comes as a standalone single executable, so it’s extremely easy to get started or update. This was a huge improvement over Middleman, which required a heap of Ruby gems and plugins. Now every blog author can easily clone our repo, run the development server, and edit their post directly, with the full site building in anywhere from ~10 seconds all the way down to ~2 seconds, depending on the author’s machine.

For blog authors, we were using a fork of an abandoned Middleman plugin. With Hugo, we’re using their taxonomies, which have been fairly easy to set up. We were also able to use Hugo’s built-in Chroma highlighter, instead of loading and running highlight.js on every blog page.

Some drawbacks

July 2025 Update: Hugo has seen a lot of development since this post was written in 2021. I’ve added Wayback Machine links so the references are historical, but these examples are out of date now. From my usage in the past few years, the documentation has improved quite a bit.

We’re loving the wonderfully fast build times and easy local development. I like the templating fairly well, and the simple configuration is wonderful. But Hugo does have several issues and missing features I’d like to see.

One place Zola wins over Hugo is the ability to easily print the entire context in a big JSON object. It’s a bit hard to navigate, but in my experience much easier and clearer than Hugo, where I have to either try using printf to display the context’s variables, or search through the documentation. This was one of my favorite ways to quickly debug and learn about the inner workings of Zola, and would be very welcome in Hugo as well, without needing to know Go formatting width and the full shape of Hugo’s context object beforehand.

Joe Mooring, a Hugo developer, mentioned that you can print some things with debug.Dump. I tried passing the context with {{ debug.Dump . }}, which worked well for seeing what context variables are available/set.

Documentation is another area where Hugo struggles sometimes. Pages often don’t feel interconnected and examples are often lacking. Here are a few examples I encountered:

The Hugo Pipes page SASS/SCSS shows how to transform Sass files to CSS, but did not link to the very useful Page Resources page. It turned out I just needed to link to {{ $style.RelPermalink }}, but as a new user it wasn’t clear that the CSS file was considered a Resource. Having more links to related pages or more examples could save a lot of headaches for newbies.
Lookup Order says under the Layout section that it “can be set in page front matter,” but I had to look under Front Matter to see that layout is the key name. A small change, and didn’t take long to experiment and find out, but especially since YAML is case sensitive, having a link to the actual front matter key would be better.
Enabling custom outputs on a per-taxonomy basis does not seem to be possible. We want to generate Atom feeds for our blog tags, but not for our blog authors, both of which are taxonomies. As far as I can tell, we have to enable them both and live with the cruft of unnecessary blog author feeds being generated.
Joe also provided a solution to this problem: cascade the outputs front matter field down from the taxonomy page (e.g., content/tags/_index.md) or from your site configuration.
- https://gohugo.io/configuration/cascade/
- https://gohugo.io/content-management/front-matter/#cascade-1
I tested this and it works like a charm.

Onward and upward!

It may look (mostly) the same, but on our end it’s never been easier to write blog posts or update the website, thanks to Hugo and all its contributors!

Jamstack Conf Virtual 2020: Thoughts & Highlights

2020-06-16T00:00:00+00:00

Welcome to Jamstack Conf Virtual 2020

Last week I attended Jamstack Conf Virtual 2020. It had originally been slated to take place in London, UK but was later transformed into a virtual event in light of the COVID-19 pandemic. The conference began at 2pm London time (thankfully I double-checked this the night before!)—6am for those of us in the Pacific Time Zone.

Up early for #jamstackconf 😎☕️ pic.twitter.com/ydjvrHWCZH
— Greg Davidson (@syncopated) May 27, 2020

Before getting too much further I wanted to mention that if you are not familiar with the Jamstack, You can read more about it at jamstack.org.

To virtually participate in the conference we used an app called Hopin. I had not heard of it before but was impressed with how well it worked. There were over 3000 attendees from 130+ countries one of the times I checked. Phil Hawksworth was the Host/MC for the event and did a great job. There were virtual spaces for the stage, sessions, expo (vendors), and networking. If you opted to, the networking feature paired you with a random attendee for a video chat. I’m not sure what I expected going into it but I thought it was fun. I met a fellow developer from the Dominican Republic. The experience was very similar though more serendipitous than the hallway track or lunch line at an in-person conference.

Keynote

Matt Biilmann opened the conference with a keynote address about the challenges we face as a developer community trying to improve access to accurate, timely and locally relevant information to a global audience. Many billions of users with all kinds of devices and varying levels of connectivity. He moved on to share how Netlify is trying to enable developers to “build websites instead of infrastructure” and “ensure all the best practices become common practices” through features like git-based deployments, build plugins, and edge handlers (more on those later).

State of the Jamstack Survey results

Laurie Voss walked us through the results of the Jamstack Survey 2020. There were some interesting findings and surprises. Later on I read Laurie’s post (which Matt had mentioned in his talk) and found that very interesting as well.

Fireside chat with Harper Reed

Frances Berriman chatted with Harper Reed and asked him about his application of Jamstack principles from years ago when he led the technology team for Barack Obama’s election campaign. He described the need to “get far with very limited resources” and spoke about experimenting with serving HTML from Google App Engine and Amazon S3. Using pre-built HTML allowed them to scale very efficiently and he opted to use message queues rather than interacting with the database to keep things very quick for users.

Another benefit Harper noted was how quickly and easily new team members could be onboarded. Folks who knew HTML, CSS and JavaScript would be up to speed and productive in no time. He admitted it’s more complicated today 😀. Speed is another benefit—he just loves when he comes across a super-fast web site (often mostly static).

Lightning Launch: Netlify ⚡

David Calavera gave a demo of Netlify’s new Edge Handlers feature which lets developers add logic to their code at the edge (e.g. the CDN servers geographically closest to the user). He demonstrated how Edge Handlers make it possible to examine the headers of the request to tailor the response to that unique request. Check out the video of his talk to watch him live code an example. I believe Cloudflare Workers and Fastly’s Edge Compute are operating in a similar problem space. I plan to look into each of these offerings more thoroughly in future.

Lightning Launch: Prismic ⚡

Renaud Bressand from Prismic demoed Slicemachine—a new feature from Prismic which lets you combine nuxt/Vue components with content managed in Prismic. It looked like a very compelling way of enabling better collaboration between developers and content creators.

Lightning Launch: RedwoodJS ⚡

Tom Preston-Werner demoed his latest project RedwoodJS. I had heard Tom speak about this on a few podcasts recently and it was nice to see him demo it for us. It looks interesting and feels reminiscent of Rails. RedwoodJS simplifies wiring up your database to a GraphQL API (they use Prisma for this) and integrating it into a React application. Tom is also the creator of Jekyll—a Jamstack-style tool which has been around for many years. It was nice to see several speakers give him some recognition for his work on that project.

The COVID Tracking Project: 0 to 2M API requests in 3 months

Erin Kissane gave an inspiring talk about her work on The COVID Tracking Project. She described it as an “interim public data rescue project”. Erin and some friends, journalists and volunteers worked together to create the site. They started by scraping COVID data from each state’s web site and storing it in a Google Sheet. They used Gatsby, Contentful, and Sass modules and hosted the site on Netlify. Using the Jamstack approach allowed the site to remain performant and continue to be responsive under some huge traffic spikes. Over time, they iterated on the design and continue to improve the site daily. I highly recommend checking out the video of the talk when you get a chance.

Jamstack for emerging markets

Christian Nwamba described some of the challenges of building sites for users in Nigeria (low power devices, spotty connectivity, unreliable power). He shared that 55% of the most visited sites in Nigeria are global companies (Google, Facebook/Instagram, Netflix, Stack Overflow etc.). Christian reviewed a large, popular banking site in Nigeria and noted its many shortcomings.

To demonstrate how the bank might do better he built an app for transferring money between friends & family built in the Jamstack style and using serverless functions. The most interesting thing I picked up from this was his method of using serverless functions to protect the app secrets (API keys, etc.). The front end of the application did not need to concern itself with this—the serverless functions kept the secrets safe and acted as a proxy between the frontend and the backend APIs. Be sure to take a look at Christian’s code if you are interested.

Managing diabetes with Jamstack

Jamie Bradley taught us about diabetes and the Jamstack app he built to help himself and others manage it. He built HeySugar with Gatsby and Sanity, hosted it on Netlify. He’s making it easier for others to deploy their own instances as well.

Selling tickets without servers. Or frameworks. Or cookies.

Jan van Hellemond has volunteered for years at a very popular conference in Europe (Fronteers I think). In previous years tickets sold out in 6 minutes one year, and 30 seconds in another! Their ticket vendor was struggling to handle to the load and this caused them to oversell early bird tickets. Jan built a Jamstack site to sell their tickets and was very pleased with the performance. He used simple, single-purpose vanilla JavaScript components and simple, single-purpose API handlers (serverless functions).

Jan prerendered as much as possible and seeded a relational database with the tickets available for sale. As the tickets were sold, they were marked sold with a database update. Webhooks were used as customers stepped through the checkout flow. Jan joked about deploying to production on a Friday afternoon because of how safe and simple the deployment process was. There were no services to restart, etc. because “it’s just files”. It was cool to see a practical example and that Jan used the basic building blocks of the web (HTML, JavaScript, CSS, old school links) successfully without reaching for a large JavaScript framework.

The business side of the Jamstack

Ana Rossetto shared how her company has been having great success with the Jamstack. Previously, the agency had been building projects for clients with Drupal. She walked through a project she and the team built to encourage people to buy from small, locally-owned businesses. She was impressed with what they were able to create in a very short amount of time.

Build plugin authors’ session

After the main talks there were several sessions. In the Hopin app, I was able to peek into some of these and the presenters and attendees were chatting (both text chat and video). This was very much like the experience of peeking into conference rooms at a physical venue and choosing whether to stay and participate or move on. After some wandering I chose to attend a session with three Netlify build plugin authors.

Peter Müller built Subfont with a friend. He demonstrated how subsetting web fonts (i.e. only loading the characters & glyphs you really need) can dramatically improve frontend performance. He compared the WebPageTest results for Google Fonts with and without Subfont and Subfont was seconds faster! I have subset and locally hosted webfonts in several client projects here at End Point. It takes time and is a manual process. Peter’s plugin makes this excellent performance improvement relatively painless.

David Darnes demoed his build plugin to turn Ghost content into Markdown files. Very interesting and it seemed flexible enough to work with other tools as well.

Gleb Bahmutov presented the build plugin he created to run Cypress tests as part of your Netlify build process. It was amazing to see how simple it was (single devDependency and single line in the netlify.toml config file).

Videos from the conference

Netlify has already put all of the Jamstack Conf Virtual 2020 talks on YouTube so head over there and check those out if you’d like to. Thanks very much to the team at Netlify for organizing the conf, all of the speakers, vendors and attendees!

Decreasing your website load time

2020-01-07T00:00:00+00:00

Photo by Johan Larsson, used under CC BY 2.0

We live in a competitive world, and the web is no different. Improving latency issues is crucial to any Search Engine Optimization (SEO) strategy, increasing the website’s ranking and organic traffic (visitors from search engines) as a result.

There are many factors that can lead to a faster response time, including optimization of your hosting plan, server proximity to your main traffic source, or utilization of a Content Distribution Network (CDN) if you are expecting visitors on an international level. Some of these solutions and many others can be implemented with only a couple hours of coding.

Inline styles and scripts for the topmost content

Nobody enjoys waiting for long load times. When opening a Google search link, being met with a blank page or a loading GIF for several seconds can seem agonizing. That’s why optimizing the initial rendering of your page is crucial.

The content that immediately appears to the user without the need to scroll down is referred to as “above-the-fold”. This is where your optimization efforts should be aimed. So here’s a plan to load and display as quickly as possible:

First, differentiate the critical styles and scripts you need to render the topmost content, and separate them from the rest of our stylesheet and external script references.
Then, minify the separated styles and scripts, and insert them directly on our page template, right before the closing </head> tag.
Finally, take the stylesheet and scripts link references from the <head> tag (where it’s usually located) and move them to the end of the above-the-fold content.

Now, the user won’t have to wait until all references are loaded before seeing content. Tip: Remember to use the async tag on scripts whenever possible.

example.html:

<head>
    <style>{above-the-fold minified inline styles goes here}</style>
    <script type="text/javascript">{above-the-fold critical scripts goes here}</script>
</head>
<body>
    <div class="above-the-fold-content"></div>
    <link rel="stylesheet" href="{below-the-fold minified stylesheet reference goes here}" />
    <script async src="{below-the-fold minified javascript reference goes here}" />
    <div class="below-the-fold-content"></div>
</body>

Deferred loading of ads

If you’re monetizing your website through Google AdSense or another ad agency that uses scripts to load ads, consider loading ads after the content is fully rendered. This may have a small impact on your revenue, but will improve the user’s experience while optimizing the load speed.

Although there are several ways to achieve this, a technique I have successfully used on many websites is removing all of the script references to Google AdSense until your page is fully loaded. A short delay can be added in order to allow some browsing time before showing ads.

Remove script references, the comment, and extra spaces from your original ad code, to convert it from something like this…

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Your ad name -->
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

… to something like this:

<ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXX"></ins>

A lot shorter, isn’t it? This will create an empty slot in which the ad will be displayed after the page is fully rendered. To accomplish that, a new script like the one below must be added (assuming jQuery is present on the website):

async-ads.js:

// Create a script reference
function addScript(src, async, callback) {
    var js = document.createElement("script");
    js.type = "text/javascript";
    if (async)
        js.async = true;
    if (callback)
        js.onload = callback;
    js.src = src;
    document.body.appendChild(js);
}

// Called when document is ready
$(document).ready(function() {

    // Wait for one second to ensure the user started browsing
    setTimeout(function() {
        (adsbygoogle = window.adsbygoogle || []);
        $("ins.adsbygoogle").each(function() {
            $("<script>(adsbygoogle = window.adsbygoogle || []).push({})</script>").insertAfter($(this));
        });
        addScript("https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", true);
    }, 1000);

});

This code will wait for one second once the document is ready, and then leave instructions for Google to push a new ad for each slot. Finally, the AdSense external script will be loaded so that Google will read the instructions and start filling all the slots with ads.

Tip: Enabling balancing from your AdSense dashboard may improve the average load speed as well as the user’s experience since ads will not be shown when the expected revenue is deprecable. And if you’re still on the fence about showing fewer ads, try out an experiment like I did. A balance of 50% worked well in my case, but the right balance will depend on your niche and website characteristics.

Lazy load for images

Because the user will most likely spend the majority of the visit reading above-the-fold content (and may even leave before scrolling at all), loading all images from content below-the-fold at first is impractical. Implementing a custom lazy-loading script (also referred to as deferred-loading or loading-on-scroll) for images can be an easy process. Even though changes to the backend would be likely, the concept of this approach is simple:

Replacing the src attributes from all images that will have lazy loading with a custom attribute such as data-src (this part will probably require backend changes) and set a custom class for them, like lazy.
Creating a script that will copy the data-src content into the src attribute as we scroll through the page.

lazy-load.js:

;(function($) {

    $.fn.lazy = function(threshold, callback) {
        var $w = $(window),
        th = threshold || 0,
        attrib = "data-src",
        images = this,
        loaded;
        this.one("lazy", function() {
            var source = this.getAttribute(attrib);
            source = source || this.getAttribute("data-src");
            if (source) {
                this.setAttribute("src", source);
                if (typeof callback === "function") callback.call(this);
            }
        });

        function lazy() {
            var inview = images.filter(function() {
                var $e = $(this);
                if ($e.is(":hidden")) return;
                var wt = $w.scrollTop(),
                wb = wt + $w.height(),
                et = $e.offset().top,
                eb = et + $e.height();
                return eb >= wt - th && et <= wb + th;
            });
            loaded = inview.trigger("lazy");
            images = images.not(loaded);
        }

        $w.scroll(lazy);
        $w.resize(lazy);
        lazy();
        return this;
    };

})(window.jQuery);

$(document).ready(function() {
    $('.lazy').each(function () {
        $(this).lazy(0, function() {
        $(this).load(function() {
            this.style.opacity = 1;
        });
    });
});

// Set the correct attribute when printing
var beforePrint = function() {
    $("img.lazy").each(function() {
        $(this).trigger("lazy");
        this.style.opacity = 1;
    });
};
if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function(mql) {
        if (mql.matches)
            beforePrint();
    });
}
window.onbeforeprint = beforePrint;

This script will search for all <img> tags with class lazy, and change the data-src attribute to the src attribute once the image becomes visible due to scrolling. It also includes some additional logic to set the src attribute before printing the page.

Server-side caching

Instead of performing all the backend rendering calculations every time, server-side caching allows you to output the same content to the clients over a period of time from a temporary copy of the response. This not only results in a decreased response time but also saves some resources on the server.

There are several ways to enable server-side caching, depending on factors such as the backend language and hosting platform (e.g. Windows/IIS vs. Linux/Apache), among other things. For this example, we will use ASP.NET (C#) since I’m mostly a Windows user.

The best and most efficient way to do this is by adding a declaration in the top of our ASP.NET page:

<%@ OutputCache Duration="10" VaryByParam="id;date" %>

This declaration is telling the compiler that we want to cache the output from the server for 10 minutes, and we will save different versions based on the id and date URL parameters. So pages like:

https://www.your-url.com/cached-page/?id=1&date=2020-01-01
https://www.your-url.com/cached-page/?id=2&date=2020-01-01
https://www.your-url.com/cached-page/?id=2&date=2020-02-01

will be saved and then served from different cache copies. If we only set the id parameter as a source for caching, pages with different dates will be served from the same cache source (this can be useful as the date parameter is only evaluated on frontend scripts and ignored in the backend).

There are other configurations in ASP.NET to set our output cache policy. The output can be set to be based on the browser, the request headers, or even custom strings. This page has more useful information on this subject.

GZip compression

GZip compression—when the client supports it—allows compressing the response before sending it over the network. In this way, more than 70% of the bandwidth can be saved when loading the website. Enabling GZip compression for dynamic and static content on a Windows Server with IIS is simple: Just go to the “Compression” section on the IIS Manager and check the options “Enable dynamic/static content compression”.

However, if you are running an ASP.NET MVC/WebForms website, this won’t be enough. For all backend responses to be compressed before sending them to the client, some custom code will also need to be added to the global.asax file in the website root:

global.asax:

<%@ Application Language="C#" %>

<script runat="server">

    void Application_PreRequestHandlerExecute(object sender, EventArgs e)
    {
        HttpApplication app = sender as HttpApplication;
        string acceptEncoding = app.Request.Headers["Accept-Encoding"];
        System.IO.Stream prevUncompressedStream = app.Response.Filter;

        if (app.Context.CurrentHandler == null)
            return;

        if (!(app.Context.CurrentHandler is System.Web.UI.Page ||
            app.Context.CurrentHandler.GetType().Name == "SyncSessionlessHandler") ||
            app.Request["HTTP_X_MICROSOFTAJAX"] != null)
            return;

        if (acceptEncoding == null || acceptEncoding.Length == 0)
            return;

        if (Request.ServerVariables["SCRIPT_NAME"].ToLower().Contains(".axd")) return;
        if (Request.ServerVariables["SCRIPT_NAME"].ToLower().Contains(".js")) return;
        if (Request.QueryString.ToString().Contains("_TSM_HiddenField_")) return;

        acceptEncoding = acceptEncoding.ToLower();

        if (acceptEncoding.Contains("deflate") || acceptEncoding == "*")
        {
            app.Response.Filter = new System.IO.Compression.DeflateStream(prevUncompressedStream,
                System.IO.Compression.CompressionMode.Compress);
            app.Response.AppendHeader("Content-Encoding", "deflate");
        }
        else if (acceptEncoding.Contains("gzip"))
        {
            app.Response.Filter = new System.IO.Compression.GZipStream(prevUncompressedStream,
                System.IO.Compression.CompressionMode.Compress);
            app.Response.AppendHeader("Content-Encoding", "gzip");
        }
    }

</script>

To make sure our code is working properly, an external tool like this will inform you if GZip is enabled or not.

Summary

While there are many ways of decreasing the load time of a website, most are common and expensive. However, with a few minor tweaks, we can offer a better user experience in addition to improve our position in the search engine results. Every bit of optimization counts towards the goal with SEO. Load time is a very important factor (to both the developer and the user), especially on mobile platforms where users expect to get what they want instantly.

The image below is a Google Analytics report from one of my websites where, over several months, I implemented most of these formulas. A month ago, I made the latest change of deferring ad loading, which had an observable impact on the average loading speed of the page:

Do you have any other page load optimization techniques? Leave a comment below!

Enhancing Your Sites with Vue.js

2017-12-26T00:00:00+00:00

Framework Fatigue

When developers consider and evaluate front-end frameworks they often think in terms of writing or rewriting their entire project in Framework X. “Should we use Vue, React, Preact?” or “I heard about Sapper the other day, has anyone tried that?” The running joke response (back-end developers especially love this one) is to the effect of: “If we wait a couple weeks there will be ten more choices!”

All joking aside, frameworks like Vue and React offer many great benefits and can be incrementally adopted to enhance existing sites. There is no need to rewrite your entire project as a Single Page Application to take advantage of what frameworks like Vue offer. I have taken this approach on a couple of my projects recently and been very happy with the results.

Start Small

One of the benefits of using a framework in this way is that you’re not forced to adopt its entire toolchain and specific workflow immediately, such as using ES6/2015, webpack, and Babel right off the bat. I simply loaded the minified, minimal version of Vue I needed on my page and I was off to the races.

If you are familiar with Angular, Vue has a similar concept of custom directives. I used this to build a small countdown timer directive for a customer who wanted to dynamically display the time left before promotions ended. By offloading the DOM updates and rendering to Vue, I was able to create a useful feature very quickly with lean and readable JavaScript code.

Here’s what the widget I delivered to the client looked like:

<countdown-timer start="{start date/time}" end="{end date/time}" />

They were able to drop this snippet onto their pages and use multiple instances of the widget on their product listing page with ease.

Wishlist Pagination

For another project I needed to display wishlists in the cart, below the items the customer had previously added. The wishlist feature is very popular and used by a large number of customers. Many customers have dozens (some hundreds!) of products in their wishlist at any given time.

For this project I was already using gulp to handle the front-end automation so I simply added Vue and vuejs-paginate to the project config and loaded those scripts asynchronously on the cart page. The vuejs-paginate plugin has a simple API that emitted the pagination related events I could tap into.

With a small Vue template and less than 100 lines of code I was able to create a dynamic and very responsive (read: fast!) pagination feature without any DOM manipulation code (e.g. updates, insertions, deletions, etc.).

With Vue (React and friends as well) you simply manage the state of your application (wishlist items in this case) and let the framework handle the rendering step. Give it a try—I think you’ll like it!

CSSConf US 2016 — Day One

2016-10-07T00:00:00+00:00

Boston Common

I attended CSSConf US 2016 last week in Boston, MA. Having been to the 2013 and 2014 (part one, part two) events in Florida then missing it in NYC last year, I was looking forward to seeing what it would be like in a new location. It was fun to see some familiar faces including Eiríkur (congrats on organizing a very successful JSConf Iceland conference earlier this year!) and to meet many new folks in the CSS community. Claudina Sarahe was our MC for two days of talks and she did a great job. After each talk she took a few minutes to interview the speaker—asking them questions from the audience and some of her own. The chats were candid and interesting on their own and gave the next speaker time to set up.

Below are my notes and some observations on the talks from Day One. Be sure to check out the videos, slides and transcripts at the CSSConf site. Many of the videos are there now and they are adding more as they become available.

Sarah Drasner — Creativity in Programming for Fun and Profit

Sarah started off the day with an inspiring keynote about creativity. She explained how writing code is a creative endeavor by showing us several drastically different solutions to the classic FizzBuzz problem in computer science. She shared some stats and survey results which documented excellent, tangible results companies saw when they invested in R&D and fostering creativity. Sarah demoed some really cool creative projects she had built—many of them just for fun. She encouraged us to work on creative projects on the side to enter into flow while designing, coding and building things. Time devoted to purely creative and fun projects can makes less interesting day-to-day tasks more bearable. It was amazing to see some of the animation work she’s done and her passion for art and programming was palpable throughout the talk.

Brian Jordan — No Bugs in Sight: Continuous Visual Tesing at Code.org

Brian works for code.org which is the organization behind the Hour of Code and other initiatives promoting computer science education in schools. His work on apps that teach kids to code is used on a vast variety of hardware (tablets, old underpowered school computers etc.). Testing became a challenge early for them so Brian began to incorporate testing with Selenium into their development workflow. They use Cucumber to write their tests. They use Sauce Labs to run the tests and circleCI to integrate it with their source code control system. When code is committed, the tests are run which ensures broken code does not get merged in. They also use applitools eyes for visual diffing which looked very interesting. They keep a wiki of the larger and more interesting issues that it catches to help everyone remember them (and sometimes recall why they still need to keep a particular test). Brian showed us several screenshots of visual problems caught by their system including one that was a single pixel showing up in a strange (unwanted) location on the screen.

Jessica Lord — Nativize is the new Normalize

Jessica works at GitHub on the Electron project. Her talk was about Electron and how you can use it to build cross-platform (Windows/Linux/Mac) desktop apps using web technologies. Electron is used to power Atom, Slack and many other interesting apps. It uses V8 as its JavaScript runtime which allows you to use Node.js in your apps. Chromium is used for the all the DOM and rendering bits. She showed off the Electron example app and talked about some tips and tricks to building apps with Electron. Jessica stressed that you have to think about apps differently than web sites. You want your app to feel like an app not a website. She pointed out several good resources for learning more about it. Electron can also be used to build menubar apps for OS X.

Jen Kramer — CSS4 Grid: True Layout Finally Arrives

Jen is a professor at Harvard teaching web development. She talked about CSS grid and how it will make laying out sites much better than the current hacks techniques we have been using up to this point (tables, floats, flexbox). She explained how flexbox was designed to only work in a single dimension (grids need to work in two for both rows & columns) and showed some example layouts built with CSS grid. Jen’s examples showed how many CSS design challenges (e.g.: equal height columns) are easily solved with grid. The only thing holding it back is browser support. Today it’s available in Chrome and Firefox behind a configuration flag. Jen was really funny and engaging and drew everyone in with her presentation skills and passion for web development in general (grid too!).

Pete Hunt — Component-Based Style Reuse

Pete talked about React and how it can be used to create components (e.g.: a piece of UI that can be re-used in different contexts). He shared how OOCSS was a foundational concept and inspiration to him and walked through the process of building a React component that implemented an OOCSS “media block” component. Having previously worked at FaceBook, Pete discussed the issues that arise when developing many UI components at scale—especially CSS class conflicts and the resulting style pollution. Pete used jsxstyle (developed by his current team at Smyte) in his React component to keep the styles scoped to the component and avoid using descendent selectors. It was very interesting talk and I recommend watching the video of Pete’s talk to get the full effect.

Keith J. Grant — Stop Thinking in Pixels

Keith works for the company behind the NYSE website. He thoroughly explained how to effectively use em and rem units for font-size and other properties and how he recommends avoiding using pixels for font sizes altogether. Keith showed many examples using rem to set the font size for a container element and then use ems for all of its children. This had the benefit of flexibility and made is possible to adjust the sizes of all of the child elements by simply changing the size on the parent/container. He covered several formulas which can be used to determine the em values you will need for approximate pixel sizes. He shared type-scale.com as a web app that can help with these calculations. Once you understand the formulas, you can add mixins in Sass to perform the calculations for you. Near the end of his talk Keith showed us an example using rems for the parent, ems for the child elements and then combining calc() with viewport units (vh, vw) to smoothly scale the size of a component as the viewport changes. This was really neat to see and avoided the clunky switch between sizes that happens when the viewport changes between media queries. With the technique Keith demonstrated, the scaling was completely fluid—very impressive. Keith wrapped up by explaining that these techniques require a little work up front and often educating other developers on the team but the benefits are immediate.

Will Boyd — Silky Smooth Animation with CSS

Will talked about the deep dive he took into how browsers handle rendering and animation. He demoed how we can look into the process for our own performance debugging with tools like Chrome DevTools. To illustrate some of the performance wins Will had discovered in his own projects, he loaded up an animation he’d built for the talk and compared the performance before and after he used CSS properties that could be handled by the GPU. The performance improvement using transform, filter and opacity (all hardware-accelerated and rendered by the GPU) was drastic and impressive.

Lea Verou — CSS Variables var(–subtitle);

Lea’s talk was about CSS variables (aka custom properties). I admit to being surprised when I looked it up recently and found that they were already quite widely supported. The syntax looks little odd at first but it made sense when Lea explained it was intentional that they look different than preprocessor variables. I found it interesting that CSS variables are expected to be used alongside preprocessor variables rather than replacing them. Lea explained how they work, how they can be accessed by JavaScript and demonstrated several things CSS variables can do that preprocessor variables can not! Make sure to check out the video of her talk when you get the chance.

Scrape web content with PHP (no API? no problem)

2016-07-07T00:00:00+00:00

Introduction

There is a lot of data flowing everywhere. Not structured, not useful pieces of data moving here and there. Getting this data and structuring, processing can make it really expensive. There are companies making billions of dollars just (huh?) for scraping web content and showing in a nice form.

Another reason for doing such things can be for example, lack of an API from a source website. In this case, it’s the only way to get data that you need to process.

Today I will show you how to get web data using PHP and that it can be as easy as pie.

Just do it

There are multiple scraping scripts ready to use. I can recommend one of them: PHP Simple HTML DOM Parser. It’s extremely easy to start with and initial cost is almost nothing, it’s open sourced also.

First, download a library from an official site: https://sourceforge.net/project/showfiles.php?group_id=218559. You can use a composer version too, it’s here: https://github.com/sunra/php-simple-html-dom-parser.

Let’s say that you have downloaded this file already. It’s just a one PHP file called simple_html_dom.php. Create a new PHP file called scraper.php and include mentioned library like this:

<?php

require('simple_html_dom.php');

In our example, we will scrape top 10 trending YouTube videos and create a nice array of links and names out of it. We will use this link: https://www.youtube.com/feed/trending?gl=GB.

We need to grab this page first. Using PHP it’s just a one additional line in our script:

<?php

require('simple_html_dom.php');

// Create DOM from URL or file
$html = file_get_html('https://www.youtube.com/feed/trending?gl=GB');

A PHP object was just created with the YouTube page structure.

Look at the YouTube page structure to find a repeating structure for a list of videos. It’s best to use Chrome developer tools and its HTML browser. At the time of writing this post (it can change in the future of course) it’s:

<ul class="expanded-shelf-content-list has-multiple-items">
 <li class="expanded-shelf-content-item-wrapper">...</li>
 <li class="expanded-shelf-content-item-wrapper">...</li>
 <li class="expanded-shelf-content-item-wrapper">...</li>
 ...
</ul>

Thanks Google! This time it will be easy. Sometimes a structure of the page lacks of classes and ids and it’s more difficult to select exactly what we need.

Now, for each item of expanded-shelf-content-item-wrapper we need to find its title and url. Using developer tools again, it’s easy to achieve:

<a
 class="yt-uix-sessionlink yt-uix-tile-link yt-ui-ellipsis yt-ui-ellipsis-2 spf-link "
 dir="ltr"
 aria-describedby="description-id-284683"
 title="KeemStar Swatted My Friend."
 href="/watch?v=oChvoP8zEBw">
 KeemStar Swatted My Friend
</a>

Jackpot! We have both things that we need in the same HTML tag. Now, let’s grab this data:

<?php

require('simple_html_dom.php');

// Create DOM from URL or file
$html = file_get_html('https://www.youtube.com/feed/trending');

// creating an array of elements
$videos = [];

// Find top ten videos
$i = 1;
foreach ($html->find('li.expanded-shelf-content-item-wrapper') as $video) {
        if ($i > 10) {
                break;
        }

        // Find item link element
        $videoDetails = $video->find('a.yt-uix-tile-link', 0);

        // get title attribute
        $videoTitle = $videoDetails->title;

        // get href attribute
        $videoUrl = 'https://youtube.com' . $videoDetails->href;

        // push to a list of videos
        $videos[] = [
                'title' => $videoTitle,
                'url' => $videoUrl
        ];

        $i++;
}

var_dump($videos);

Look, it’s simple as using CSS. What we just did? First, we extracted all videos and started looping through them here:

foreach ($html->find('li.expanded-shelf-content-item-wrapper') as $video) {

Then, just extracted a title and url per each video item here:

// Find item link element
$videoDetails = $video->find('a.yt-uix-tile-link', 0);

// get title attribute
$videoTitle = $videoDetails->title;

At the end, we just push an array object with scraped data to the array and dump it. The result looks like this:

array(10) {
  [0]=>
  array(2) {
    ["title"]=>
    string(90) "Enzo Amore & Big Cass help John Cena even the odds against The Club: Raw, July 4, 2016"
    ["url"]=>
    string(39) "https://youtube.com/watch?v=940-maoRY3c"
  }
  [1]=>
  array(2) {
    ["title"]=>
    string(77) "Loose Women Reveal Sex Toys Confessions In Hilarious Discussion | Loose Women"
    ["url"]=>
    string(39) "https://youtube.com/watch?v=Xxzy_bZwNcI"
  }
  [2]=>
  array(2) {
    ["title"]=>
    string(51) "Tinie Tempah - Mamacita ft. Wizkid (Official Video)"
    ["url"]=>
    string(39) "https://youtube.com/watch?v=J4GQxzUdZNo"
  }
  [3]=>
  array(2) {
    ["title"]=>
    string(54) "Michael Gove's Shows you What's Under his Kilt"
    ["url"]=>
    string(39) "https://youtube.com/watch?v=GIpVBLDky30"
  }
  [4]=>
  array(2) {
    ["title"]=>
    string(25) "Deception, Lies, and CSGO"
    ["url"]=>
    string(39) "https://youtube.com/watch?v=_8fU2QG-lV0"
  }
  [5]=>
  array(2) {
    ["title"]=>
    string(68) "Last Week Tonight with John Oliver: Independence Day (Web Exclusive)"
    ["url"]=>
    string(39) "https://youtube.com/watch?v=IQwMCQFgQgo"
  }
  [6]=>
  array(2) {
    ["title"]=>
    string(21) "Last Week I Ate A Pug"
    ["url"]=>
    string(39) "https://youtube.com/watch?v=TTk5uQL2oO8"
  }
  [7]=>
  array(2) {
    ["title"]=>
    string(59) "PEP GUARDIOLA VS NOEL GALLAGHER | Exclusive First Interview"
    ["url"]=>
    string(39) "https://youtube.com/watch?v=ZWE8qkmhGmc"
  }
  [8]=>
  array(2) {
    ["title"]=>
    string(78) "Skins, lies and videotape - Enough of these dishonest hacks. [strong language]"
    ["url"]=>
    string(39) "https://youtube.com/watch?v=8z_VY8KZpMU"
  }
  [9]=>
  array(2) {
    ["title"]=>
    string(62) "We Are America ft. John Cena | Love Has No Labels | Ad Council"
    ["url"]=>
    string(39) "https://youtube.com/watch?v=0MdK8hBkR3s"
  }
}

Isn’t it easy?

The end

I have some advice if you want to make this kind of script be processing the same page all the time:

set the user agent header to simulate a real web browser request
make calls with a random delay to avoid blacklisting from a web server
use PHP 7
try to optimize the script as much as possible

You can use this script for production code but, to be honest, it’s not the most optimal approach. If you are not satisfied, code it by yourself :-).

Nice documentation is located here: http://simplehtmldom.sourceforge.net/

Creating a video player with time markers — step by step

2016-03-17T00:00:00+00:00

Introduction

Today we will show you how to create a video player with time markers using JavaScript and HTML5 only. Libraries that we will use are proven to be stable enough for production projects. What we want to achieve? The final result is visible below:

To simplify (or to make it harder for some of you :)) this tutorial we won’t use any package management tools. The demo is available on Github here: https://github.com/peter-hank/video-with-markers

Requirements

We will need some libraries (all of these are free to use in commercial projects):

Video.js — https://github.com/videojs/video.js,
Videojs-markers plugin — https://github.com/spchuang/videojs-markers.
jQuery — http://code.jquery.com/jquery-2.0.3.min.js
Sample video file — http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4

Step 1 — creating a project skeleton

Let’s create a new folder for our project and call it video-with-markers. Inside let’s create a new file called “index.html”, three folders: “css”, “js” and “var”.

We also need to copy libraries files and put it into a proper directory:

copy https://raw.githubusercontent.com/spchuang/videojs-markers/master/dist/videojs-markers.min.js -> “js” directory,
copy http://vjs.zencdn.net/5.0/video.min.js -> “js” directory,
copy https://raw.githubusercontent.com/spchuang/videojs-markers/master/dist/videojs.markers.min.css -> “css” directory,
copy http://vjs.zencdn.net/5.0/video-js.min.css -> “css” directory.
copy http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4 -> “var” directory.

Let’s open the index.html file and fill it with some basic structure, that will include libraries files too.

<!doctype html>
<html>
 <head>
  <meta charset="utf-8"/>
  <meta http-equiv="x-ua-compatible" content="ie=edge"/>
  <title>Video with markers</title>
  <meta name="description" content=""/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" href="css/video-js.min.css"/>
  <link rel="stylesheet" href="css/videojs.markers.min.css"/>
  <script src="js/jquery-2.0.3.min.js"></script>
  <script src="js/video.min.js"></script>
  <script src="js/videojs-markers.min.js"></script>
 </head>
 <body>
 </body>
</html>

Step 2 — activating player and creating markers

TIP: all the further code should be put inside the body tag.

First, we need to create a video tag:

<video autoplay="" class="video-js vjs-default-skin" controls="" data-setup='{"width": 640, "height": 360}' height="360" id="example_video_1" preload="auto" width="640">
    <source src="var/BigBuckBunny_320x180.mp4" type="video/mp4"/>
 </video>

We need to set an element “id” attribute and both classes “video-js vjs-default-skin” to let player CSS apply. Other attributes are not required and are here just for demo purpose. “Data-setup” attribute is an attribute that configures multiple player options. More details can be found in the documentation here: http://docs.videojs.com/docs/guides/options.html.

At this point after launching index.html in a browser we should see a video player like this:

The only thing left is initializing markers. We can do this by adding some JavaScript code under the video player element:

// load video object
 var video = videojs('example_video_1');

 //load markers
 video.markers({
    markers: [
        {time: 9.5, text: "this"},
        {time: 16,  text: "is"},
        {time: 23.6,text: "so"},
        {time: 28,  text: "cool"}
    ];
 });

In this part we load an object of the Video.js player to video variable and then load a list of markers. Each marker object includes time in seconds when it should be shown and marker text.

Now, markers should be visible like on my this image and markers text will be visible after pointing at it:

It needs some additional CSS styling to achieve a result like on the first image but it’s not much work.

The end

Almost the end. There are many more Video.js plugins ready to use, for example:

videojs-HDtoggle — button which toggles between HD and non-HD source,
videojs-playlist — plays videos continuously or by selecting them,
videojs-watermark — displays a watermark on top of the video.

With not much effort most of video player functionalities can be finalized. There is always some tweaking, but at least you can have a base for creating your project. And remember, if you will find bugs, report it! And if you have implemented something cool, share it!

Thanks for reading.

Full Screen Gallery with Supersized and video slides

2016-01-26T00:00:00+00:00

I was recently looking to build a full screen image and video gallery for our client Mission Blue. Something similar to the Google Maps interface you can see in the screenshot below:

After scouring the Internet to find a suitable jQuery plugin I finally decided on Supersized, Full screen background slideshow plugin for jQuery.

After downloading the library, include it on the page:

<link href="/wp-content/plugins/wp-supersized/theme/supersized.shutter.css?ver=4.2.2" id="supersized_theme_css-css" media="all" rel="stylesheet" type="text/css"></link>
<script src="/wp-includes/js/jquery/ui/effect.min.js?ver=1.11.4" type="text/javascript"></script>
<script src="/wp-content/plugins/wp-supersized/js/jquery.easing.min.js?ver=1.3" type="text/javascript"></script>
<script src="/wp-content/plugins/wp-supersized/js/jquery.easing.compatibility.js?ver=1.0" type="text/javascript"></script>
<script src="/wp-content/plugins/wp-supersized/js/jquery.animate-enhanced.min.js?ver=0.75" type="text/javascript"></script>
<script type='text/javascript' src='/wp-content/plugins/wp-supersized/js/supersized.3.2.7.min.js?ver=3.2.7'></script>

Basic functionality

Let’s create a variable that will hold all the images in the slideshow:

var images = [];
images.push({
  type: 'IMAGE',
  image: 'img1.jpg',
  title: 'Image 1',
  thumb: 'img1_thumb.jpg',
  url: 'https://www.endpointdev.com'
});
images.push({
  type: 'YOUTUBE',
  image: 'screenshot1.jpg',
  title: 'YouTube slide',
  videoid: 'abc12345678',
  thumb: 'screenshot1_thumb.jpg',
  url: 'https://www.youtube.com/watch?v=abc12345678'
});

Let’s initialize Supersized:

jQuery.supersized({
  slideshow: 1,
  autoplay: 0,
  min_width: 0,
  min_height: 0,
  vertical_center: 1,
  horizontal_center: 1,
  fit_always: 0,
  fit_portrait: 1,
  fit_landscape: 0,
  slide_links: 'blank',
  thumb_links: 1,
  thumbnail_navigation: 1,
  slides: images,
  mouse_scrub: 0
});

<div id="thumb-tray" class="load-item">
  <div id="thumb-back"></div>
  <div id="thumb-forward"></div>
</div>
<div id="slidecaption"></div>

Customizing the screen image size

I didn’t want to have the full screen image as it was a little overwhelming for the user. I wanted the black bars just like in the Google interface. Supersized allows for easy customization. This CSS did the trick:

#supersized, #supersized li {
  width: 70% !important;
  left: 0 !important;
  right: 0 !important;
  top: 1px !important;
  margin:auto;
}

Introducing video (YouTube) slides

First, I added the Youtube API:

<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>

Then I added a couple of CSS styles:

#supersized .player {
  margin: auto;
  display: block;
}

Finally, I went into the Supersized library source and modified it. To allow for the video slides to appear, I added the new condition and the slide type ‘YOUTUBE’

base._renderSlide = function(loadPrev, options) {
  var linkTarget = base.options.new_window ? ' target="_blank"' : '';
  var imageLink = (base.options.slides[loadPrev].url) ? "href='" + base.options.slides[loadPrev].url + "'" : "";
  var slidePrev = base.el + ' li:eq(' + loadPrev + ')';
  var imgPrev = $('<img src="' + base.options.slides[loadPrev].image + '"/>');

  if (base.options.slides[loadPrev].type == 'YOUTUBE') {
    imgPrev.load(function () {
      var video = $('<div class="player" id="player'+ base.options.slides[loadPrev].videoid + '"></div>');
      video.appendTo(slidePrev);
      var player = new YT.Player('player' + base.options.slides[loadPrev].videoid, {
        height: 390,
        width: 640,
        videoId: base.options.slides[loadPrev].videoid
      });
    });// End Load
  }
  else {
    imgPrev.appendTo(slidePrev).wrap('<a ' + imageLink + linkTarget + '></a>').parent().parent().addClass('image-loading ' + options['class']);

    imgPrev.load(function () {
      $(this).data('origWidth', $(this).width()).data('origHeight', $(this).height());
      base.resizeNow();// Resize background image
    });// End Load
  }
};

Final Result

This is how gallery looks with the customizations:

This is what a video slide looks like:

Hope you found this writeup useful!

Event Listener Housekeeping in Angular Apps

2015-12-22T00:00:00+00:00

I was recently debugging an issue where a large number of errors suddenly cropped up in an angular application. The client reported that the majority of the errors were occurring on the product wall which was an area of application I was responsible for. After some sleuthing and debugging I determined the culprit was a scroll event listener in an unrelated angular controller. When customers viewed this section of the application, the scroll listener was added to manage the visibility of some navigation elements. However, when the customer moved on to other sections of the site the listener continued to fire in a context it was not expecting.

Scroll event listeners fire very often so this explained the sheer volume of errors. The product wall is a tall section of the site with lots of content so this explained why the bulk of the errors were happening there. The solution was to simply listen to the $destroy event in the controller and unbind the troublesome scroll listener:

$scope.$on('$destroy', function() {
  $window.unbind('scroll');
});

Single page apps do not have the benefit of getting a clean state with each page load. Because of this it’s important to keep track of any listeners that are added—especially those that are outside of angular (e.g. window and document) and make sure to clean those up when the related controllers and directives are destroyed.

Int’l — JavaScript numbers and dates formatting, smart strings comparison

2015-10-16T00:00:00+00:00

Introduction

WARNING — At the time of writing this text all of the things mentioned below are not yet supported by Safari and most of the mobile browsers.

It’s almost three years now since Ecma International published the 1st version of “ECMAScript Internationalization API Specification”. It’s widely supported by most of the browsers now. A new object called Intl has been introduced. Let’s see what it can do.

To make it easier imagine that we have a banking system with a possibility of having accounts in multiple currencies. Our user is Mr. White, a rich guy.

Intl powers

Number formatting

Mr. White has four accounts with four different currencies: British pound, Japanese yen, Swiss franc, Moroccan dirham. If we want to have a list of current balances, with a correct currency symbols, it’s pretty simple:

// locales and balances object
var accounts = [
    {
        locale: 'en-GB',
        balance: 165464345,
        currency: 'GBP'
    },
    {
        locale: 'ja-JP',
        balance: 664345,
        currency: 'JPY'
    },
    {
        locale: 'fr-CH',
        balance: 904345,
        currency: 'CHE'
    },
    {
        locale: 'ar-MA',
        balance: 4345,
        currency: 'MAD'
    }
];

// now print how rich is Mr. White!
accounts.forEach(function accountsPrint (account) {
    console.log(new Intl.NumberFormat(account.locale, {style: 'currency', currency: account.currency}).format(account.balance));
});

The output looks like:

"£165,464,345"
"￥664,345"
"CHE 904 345"
"د.م.‏ ٤٬٣٤٥"

In a real application you’d typically use the same locale for a view/language/page, the different examples above are just to show the power of Intl!

Date and time easier

Mr. White changed his UI language to Norwegian. How to show dates and weekdays without a big effort?

// we need a list of the current week dates and weekdays
var startingDay = new Date();

var thisDay = new Date();
var options = {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
for(var i=0; i < 7; i++) {
    thisDay.setDate(startingDay.getDate() + i);

    console.log(new Intl.DateTimeFormat('nb-NO', options).format(thisDay));
}

The output is:

"onsdag 23. september 2015"
"torsdag 24. september 2015"
"fredag 25. september 2015"
"lørdag 26. september 2015"
"søndag 27. september 2015"
"mandag 28. september 2015"
"tirsdag 29. september 2015"

Trust me, it’s correct (;p).

String comparison

Mr. White has a list of his clients from Sweden. He uses his UI in German as it’s a default language, but Mr. White is Swedish.

var clients = ["Damien", "Ärna", "Darren", "Adam"];
clients.sort(new Intl.Collator('de').compare);
console.log(clients);

Here Mr. White will expect to find Mr. Ärna at the end of the list. But in German alphabet Ä is in a different place than in Swedish, that why the output is:

["Adam", "Ärna", "Damien", "Darren"]

To make Mr. White happy we need to modify our code a bit:

var clients = ["Damien", "Ärna", "Darren", "Adam"];
clients.sort(new Intl.Collator('sv').compare);
console.log(clients);

Now, we are sorting using Collator object with Swedish locales. The output is different now:

["Adam", "Damien", "Darren", "Ärna"]

Conclusion

Be careful with using the Intl object—its implementation is still not perfect and not supported by all the browsers. There is a nice library called: Intl.js by Andy Earnshaw. It’s nothing more than a compatibility implementation of the ECMAScript Internationalization API. You can use it to use all the Intl object features now, without being worried about different browsers’ implementations.

Old Dog & New Tricks — Giving Interchange a New Look with Bootstrap

2015-09-02T00:00:00+00:00

Introduction

So your Interchange based website looks like it walked out of a disco… but you spent a fortune getting the back end working with all those custom applications…. what to do?

Interchange is currently being used in numerous very complex implementations. Trying to adapt another platform to replace Interchange is a formidable task, and in many cases the “problem” that users are trying to “solve” by replacing Interchange, can be remedied by a relatively simple face lift to the front end. One of the main attractions to Interchange in the past was its ability to scale from a small mom & pop eCommerce application, to a mid level support system for a larger company and its related back end systems. Once the connection to those back end systems has been created, and for as long as you use those related systems, Interchange will continue to be the most economic choice for the job. But that leaves the front end, the one that your customers see and use (with their phones and tablets) that becomes the most immediate target for “modernization”.

Granted, there are new and alternate ways of accessing and presenting data and views to users, but many of those alternatives are also accessible and inter-operable with Interchange. So while there are several topics that can be investigated at length, we will focus first on a popular front end framework that can help Interchange present a modern responsive theme to the end users. That framework is Bootstrap. Bootstrap is a good basic start for breathing new life into your Interchange application. Bootstrap uses a reasonably generic approach to HTML, CSS, and JavaScript frameworking. This blends nicely with the Interchange application approach: providing a basic, repeatable, broad based and well supported foundation that can then be crafted into whatever the developer and their client may need.

My intent in this post, is to give you links to the tools available to implement Bootstrap into your Interchange application, and in subsequent posts explain our development process which may help you in how you use the tools. Like any development, there are many ways to accomplish various tasks, and knowing why certain things were done, can help.

Alternatively, you may simply want to just download the “strap” catalog, and get started. At the time of this writing, Josh Lavin has been reviewing and refining the package, and the most recent version can be found at his Github account: Bootstrap template for Interchange. It will soon become the standard catalog template in Interchange. So, if you are not really interested in why and how this template was developed, feel free to go to the git repository in the link, clone a copy and get busy! The README is very informative, and if you are an Interchange developer you probably won’t have much trouble implementing this.

If you are interested in some of the major changes that we made to the old “standard” templating approach, and how you can apply those changes to an existing catalog without having to start from scratch, stay tuned in for my next post.

Not so popular JavaScript/HTML functionalities

2015-08-07T00:00:00+00:00

There are multiple things in a front-end developer work that can be easily fixed by a native browser functions. Based on experience, JavaScript learning path for a big part of front-end developers is not perfect. Therefore, I will give you some examples, for some people as a reminder, for others as a new thing to think about. It is always good to learn, right?

document.execCommand

W3C definition

It lets you use built-in browser functions as you wish from JavaScript, simple functions to do simple things. execCommand is very useful when you work with text ranges selected by a user. It’s also popular that it comes together with a contentEditable HTML element attribute.

Practical examples

You want to have redo button in your application, so when user will click on it, the latest changes will be discarded.

// after running just this, the latest user changes will be discarded (text input changes)
execCommand('redo', false, null);

You want to remove text after the cursor position.

// after running this script one character after the cursor
// position in a current element will be removed
execCommand('forwardDelete', false, null);

There are more than 30 functions (look here) that can be used with a limited amount of code. You need to be careful though, keep on testing, multiple browsers have different implementations, but will be unified in the future.

document.designMode

W3C definition

I want you to make a small experiment. On the current page please open developer console (Firebug or DevTools) and try to run this code:

document.designMode = 'on';

Have you noticed anything? What has happened now is that the whole page is editable now, you can edit any paragraph of this page, any header, any link. It’s not so practical anymore as you can’t run this command on any element, only on the Document object, but it’s cool to know that stuff like this exists. Every HTML element has a contentEditable attribute set now with a value set to true.

element.contentEditable

W3C definition

“contentEditable” attribute can be set to any HTML document element. What it does is it makes element editable or not. By default, every HTML element is not editable, you can easily change it by setting contentEditable attribute value to true like this:

document.getElementById('word-open').contentEditable = 'true';

If you will again run this script on the current page you will be able to edit big slogan on the left side of this text, well, only the “OPEN” word. This can be extremely useful when you need to build an online rich text editor.

navigator

W3C definition

Navigator object is not standardized yet by W3C but it’s supported by around 90% of the global browsers (known and popular browsers not supporting it are IE8 and Opera Mini). It contains multiple client browser information. For example:

// will return a list of supported/installed browser plugins, you can
// check if the user has the Flash software installed, or to check if user uses Ad-block plugin
console.log(navigator.plugins);

// will return a geolocation object, you can track client geo position
console.log(navigator.geolocation);

// will return a browser engine name, useful when you need to check it instead
// of a browser name
console.log(navigator.engine);

Conclusion

I recommend everyone interested in the front-end development to go through W3C standardization documents, read it chapter by chapter. There are resources not widely popular but very helpful.

How To: Big Beautiful Background Video

2015-08-04T00:00:00+00:00

One pretty common request for every web developer is to “please, make our Stone age website look sleek and modern”. Well, no more head scratching about the meaning of “sleek” or “modern” (or “the Stone age” for some?). In times of the crisp and stunning visuals there’s no better way to make an impression than to use a big beautiful background video on the home page.

Paired with some impressive infinite scroll which I already covered here and a nice full-screen image gallery (which I will cover later), it will definitely help to bring your website up to date.

Lucky for us, there is a very popular library called BigVideo.js which is based on another well known library videojs, which is a wrapper around HTML5 <video> tag.

Converting the video.

To ensure the cross browser support, it’s best to supply the desired video in several formats. The most common formats to use are mp4, ogg and webm. Here is the browser support chart to give you a better idea of why it’s so important to use more than one format on your page.

There are a lot of ways to convert the file, but since I’m not particularly good with compression settings or codecs, I’m using the following easy workflow:

Upload the video to Vimeo or YouTube.

There is even a handy “Share” setting straight from Final Cut for us, Apple users.

Go to Vimeo/YouTube and download it from there.

This way I’m leveraging these web services’ optimized and perfected compressing algorithms for web and also getting the smallest file size possible without too much quality loss. The target file should ideally be less than 3MB, otherwise it will slow down your browser, especially Firefox with Firebug installed.

The last step is to generate webm and ogg with Firefogg

You may find another process that works best for you, but this is what works for me.

Using BigVideo.js to display video

We will need to include the libraries:

<script src="//vjs.zencdn.net/4.3/video.js"></script>
<script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js"></script>
<script src="http://dfcb.github.io/BigVideo.js/bower_components/BigVideo/lib/bigvideo.js"></script>

And the following JavaScript:

var BV = new $.BigVideo({
  controls: false,
  forceAutoplay: true, 
  container: $('#video')
});
BV.init();
BV.show([
  { type: "video/webm", src: "http://vjs.zencdn.net/v/oceans.webm" },
  { type: "video/mp4", src: "http://vjs.zencdn.net/v/oceans.mp4" }
], {ambient: true});

Please, note the “ambient:true” setting. This setting does the trick of playing the video in the background.

Mobile and Tablet Support

The sad truth is that the video backgrounds are not supported on touch devices, because HTML5 does not allow autoplay there. Instead there will be a “play” button underneath your content and the user will need to click on it to activate the ambient video. Not so ambient anymore, right? The best option for now is to use a full screen image instead of the video as described here.

Hope you enjoyed the blog post. Let me know your thoughts!

Google Maps JavaScript API LatLng Property Name Changes

2015-06-11T00:00:00+00:00

Debugging Broken Maps

A few weeks ago I had to troubleshoot some Google Maps related code that had suddenly stopped working. Some debugging revealed the issue: the code adding markers to the page was attempting to access properties that did not exist. This seemed odd because the latitude and longitude values were the result of a geocoding request which was completing successfully. The other thing which stood out to me were the property names themselves:

var myLoc = new google.maps.LatLng(results[0].geometry.location.k, results[0].geometry.location.D);

It looked like the original author had inspected the geocoded response, found the ‘k’ and ‘D’ properties which held latitude and longitude values and used them in their maps code. This had all been working fine until Google released a new version of their JavaScript API. Sites that did not specify a particular version of the API were upgraded to the new version automatically. If you have Google Maps code which stopped working recently this might be the reason why.

The Solution: Use the built-in methods in the LatLng class

I recalled there being some helper methods for LatLng objects and confirmed this with a visit to the docs for the LatLng class which had recently been updated and given the Material design treatment—thanks Google! The lat() and lng() methods were what I needed and updating the code with them fixed the issue. The fixed code was similar to this:

var myLoc = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());

Digging Deeper

I was curious about this so I mapped out the differences between the three latest versions of the API:

API Version	Latitude Property	Longitude Property	Constructor Name
3.21.x (experimental)	A	F	rf
3.20.x (release)	A	F	pf
3.19.x (frozen)	k	D	pf

It seems to me that the property name changes are a result of running the Google Maps API code through the Closure Compiler. Make sure to use the built-in lat() and lng() methods as these property names are very likely to change again in future!

Cross Release APT Managment aka How to Watch Netflix on Debian 7 Wheezy

2015-03-11T00:00:00+00:00

Native Netflix video streaming has come to GnuLinux! …if you have the correct library versions.

I am currently running GNU-Linux Debian 7 Wheezy with OpenBox. I really enjoy this lightweight, speedy and easily customized window manager (OpenBox uses simple XML configuration files). So I was also pretty excited when Netflix added HTML5 streaming support and read that folks were proclaiming success in Google Chrome browsers without necessitating any agent masking workarounds.

However, I found I was still getting errors when attempting to stream video in Chrome. The forums I was reading were reporting that when using the Chrome 36+ browser, Netflix would allow Linux streaming. Most all of these forums were based in a Ubuntu 14.04+ environment. Nevertheless, I found a hint as to how to proceed in Debian after reading this article regarding libnss:

“Netflix streams its video in HTML5, but uses a technology called Encrypted Media Extensions to prevent piracy. These extensions in turn require a set of libraries called Network Security Services that the browser can access.”

Debian Wheezy’s repo list maxed out at libnss3==2:3.14 and I would need libnss3==2:3.16+ in order to pass the DRM tests and securely stream with Netflix’s HTML5 option enabled. In order to allow this libnss upgrade, I would first need to provide APT with instructions to pull from the Debian “jessie” development branch.

This is accomplished by setting repo priorities. I created a “jessie” specific APT sources list and added the Debian repo url’s for jessie:

$ cat /etc/apt/sources.list.d/jessie.list
## DEBIAN JESSIE
deb ftp://ftp.debian.org/debian/ jessie main
deb-src ftp://ftp.debian.org/debian/ jessie main

And set pin priorities for libnss3 to fetch jessie libraries over wheezy while defining a lower priority of all other jessie packages:

$ cat /etc/apt/preferences
Package: *
Pin: release a=waldorf
Pin-Priority: 1001

Package: *
Pin: release a=wheezy
Pin-Priority: 500

Package: *
Pin: release a=jessie
Pin-Priority: 110

Package: libnss3
Pin: release n=jessie
Pin-Priority: 510

Now, update apt and confirm higher libnss3 installation candidates:

$ sudo apt-get update && sudo apt-cache policy libnss3
libnss3:
  Installed: 2:3.14.5-1+deb7u3
  Candidate: 2:3.17.2-1.1
  Package pin: 2:3.17.2-1.1
  Version table:
    2:3.17.2-1.1 510
        500 ftp://ftp.debian.org/debian/ jessie/main amd64 Packages
*** 2:3.14.5-1+deb7u3 510
        500 http://http.debian.net/debian/ wheezy/main amd64 Packages
        500 http://security.debian.org/ wheezy/updates/main amd64 Packages
        100 /var/lib/dpkg/status

Install new libnss3 candidate:

$ sudo apt-get install libnss3=2:3.17.2-1.1

Restart any Chrome instances (and upgrade to 36+ if you haven’t yet) and enjoy Netflix streaming on Debian Linux!

Angular Responsive Layout Directive

2015-01-13T00:00:00+00:00

To all of you window.onResize aficionados, I dedicate this blog post because today we will be doing a lot of dynamic resizing in JavaScript. All of it will be done completely and effortlessly with my one-page long Angular directive.

Why do I need to attach an expensive onResize handler to my already overloaded page, you ask. The answer is very simple. Our app layout is pixel-perfect. Each element has the predefined width and margins. Yet, the app needs to look good on all kind of devices, from regular PC to tablet to iPhone. That’s why I created the following Angular directive in /scripts/directives/tsResize.js:

angular.module('angularApp')
.directive('tsResize', function($window) {
 return function(scope, element) {
   var w = angular.element($window);
   scope.getWindowDimensions = function () {
     return {
       'h': $window.innerHeight,
       'w': $window.innerWidth
     };
   };
   scope.$watch(scope.getWindowDimensions,
              function (newValue, oldValue) {
     scope.windowHeight = newValue.h;
     scope.windowWidth = newValue.w;

     scope.mainContainerStyle = function () {
       if (newValue.w > 890) {
         return {};
       } else {
         val = newValue.w/890;
         return {
           '-webkit-transform': 'scale(' + val + ')',
           '-o-transform': 'scale(' + val + ')',
           '-ms-transform': 'scale(' + val + ')',
           'transform': 'scale(' + val + ')',
           'transform-origin': 'left -10px',
           '-webkit-transform-origin': 'left -10px'
         };
       }
     };

     scope.topBarStyle = function () {
       if (newValue.w > 890) {
         return {};
       } else {
         val = newValue.w/890;
         return {
           '-webkit-transform': 'scale(' + val + ')',
           '-o-transform': 'scale(' + val + ')',
           '-ms-transform': 'scale(' + val + ')',
           'transform': 'scale(' + val + ')',
           'transform-origin': '0 2px 0',
           '-webkit-transform-origin': '0 2px 0'
         };
       }
     };
    }, true);

   w.bind('resize', function () {
     scope.$apply();
   });
  }
})

As you can see all the magic is done with transform:scale CSS attribute on the two of my main page components: the navigation and the contents container.

They styles are cross-browser.

return {
  '-webkit-transform': 'scale(' + val + ')',
  '-o-transform': 'scale(' + val + ')',
  '-ms-transform': 'scale(' + val + ')',
  'transform': 'scale(' + val + ')'
};

It’s important to set transform-origin, or the elements will be weirdly positioned on the page.

return {
  'transform-origin': '0 top',
  '-webkit-transform-origin': '0 top'
};

The style calculations are attached to the changes of window dimensions.

scope.getWindowDimensions = function () {
  return {
    'h': $window.innerHeight,
    'w': $window.innerWidth
  };
};
scope.$watch(scope.getWindowDimensions,
             function (newValue, oldValue) {
...
});

Few other things. My layout was sliced to the fixed width of 890px, that’s why I took 890 as the pivotal point of my scale ratio formula. You should take the default width of the layout as the base of your calculation.

if (newValue.w > 890) {
  return {};
} else {
  val = newValue.w/890;
  return {
    '-webkit-transform': 'scale(' + val + ')',
  }
});

With the directive in place it’s time to plug it in:

<script src="scripts/directives/tsResize.js"></script>
  <nav ng-style="topBarStyle()" ts-resize=""></nav>
  <div ng-style="mainContainerStyle()" ng-view="" ts-resize=""></div>

Be sure to use style “display:block” or “display:inline-block” and “position:relative” for all the inside components of the scaled elements with the default display. Otherwise they do not obey the scaling enforcement and grow way too long prompting a scrollbar.

<div id="main-container"><div id="inner-block" style="position:relative; display:inline-block"></div></div>

It all worked nicely and I was able to enjoy the smoothly resizing layout.

Easier IE Site Testing With RemoteIE

2014-12-02T00:00:00+00:00

Microsoft recently announced a new service which I’m finding very useful. RemoteIE lets you test your sites with IE (currently version 11) on Windows 10 Technical Preview. The service runs in Azure RemoteApp which is available for several clients including Android, iOS and Windows Phone. What’s great about this is that you do not have to install and maintain your own virtual machine with VirtualBox or VMWare.

To use RemoteIE you’ll need a valid Microsoft account—it’s easy to sign up if you don’t already one. Once you have an account and have downloaded & installed the Azure RemoteApp client of your choice it’s just a matter of starting it up and logging in. Happy Testing!

Simplifying mobile development with Ionic Framework

2014-11-06T00:00:00+00:00

My high school math teacher used to say that mathematicians are the laziest people on Earth. Why? Because they always look for clever ways to simplify their work.

If you stop and think about it, all that technology is, is just simplification. It’s taking the infinitely complex world and turning it into something sterile and simple. It’s all about producing simple models with a limited number of elements and processes.

Today I’d like to walk you through creation of a mobile app that could be used on iOS, Android or Windows Phone. We’ll use a very cool set of technologies that allow us to switch from using multiple languages and frameworks (Objective-C for iOS, Java for Android and C# for Windows Phone) to just using HTML, CSS and JavaScript.

Let’s start turning complex into simple!

PhoneGap and Ionic Framework

Creating the project

In order to be able to start playing along, you need to get yourself a set of toys. Assuming that you’ve got NodeJS and Npm installed already, all you have to do is:

$ npm install -g cordova ionic

Now you should be able to create the project’s scaffold. We’ll be creating a simple app that will list all the latest cartoons from the xkcd blog. Let’s call it Cartoonic.

Ionic comes with a handy tool called ‘ionic’. It allows you to create a new project as well as perform some automated project-structure-management tasks. The project creation task accepts a ‘skeleton’ name that drives an initial layout of the app. Possible options are: ‘blank’, ‘tabs’ and ‘sidemenu’.

We’ll be creating an app from scratch so:

$ ionic start Cartoonic blank

The framework gives you an option of whether you want to use Sass or just plain old Css. To turn Sass on for the project run:

$ cd Cartoonic && ionic setup sass

All went well, but now let’s see if it works well. For this, Ionic gives you an ability to test your app in the browser, as if it were a screen of your mobile device. To run the app in the browser now:

$ ionic serve

Working with the app layout

We need to let all users know what a cool name we’ve chosen for our app. The default one provided by the scaffold wouldn’t work well. Also we’d like the color of the header to be blue instead of the default white.

In order to do so you can take a look at the CSS documentation for different aspects of the UI:

https://ionicframework.com/docs/components/#header

--- a/www/index.html
+++ b/www/index.html
@@ -21,8 +21,8 @@
     <ion-pane>
-      <ion-header-bar class="bar-stable">
-        <h1 class="title">Ionic Blank Starter</h1>
+      <ion-header-bar class="bar-positive">
+        <h1 class="title">Cartoonic</h1>
       </ion-header-bar>
       <ion-content>
       </ion-content>

So far so good, now let’s play with the list of cartoons:

--- a/scss/ionic.app.scss
+++ b/scss/ionic.app.scss
+.cartoon {
+  text-align: center;
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+  width: 96%;
+  margin-left: 2%;
+  margin-top: 2%;
+  margin-bottom: 2%;
+
+  img {
+    width: 90%;
+  }
+}

--- a/www/index.html
+++ b/www/index.html
+        <ion-list>
+          <ion-item class="item-divider">Where Do Birds Go</ion-item>
+          <ion-item class="cartoon">
+            <img src="http://imgs.xkcd.com/comics/where_do_birds_go.png" alt="">
+          </ion-item>
+          <ion-item class="item-divider">Lightsaber</ion-item>
+          <ion-item class="cartoon">
+            <img src="http://imgs.xkcd.com/comics/lightsaber.png" alt="">
+          </ion-item>
+        </ion-list>
       </ion-content>

Alright, we’ve got the list that’s looking quite nice. The data behind is static, but for now we just wanted to make sure the look&feel is good.

Using AngularJS to manage the app

Ionic is built around the fantastic AngularJS framework. That’s our means of developing the logic behind. We need to make the list of cartoons use real data from the Xckd blog RSS feed. We also need to enable tapping on images to see the picture in the browser (so it can be zoomed in).

Let’s start with making the UI use dynamically bound data that we can operate on with JavaScript. In order to do so, we need to add a controller for our view. We also need to specify the data binding between the markup we’ve created previously and the variable in the controller that we intend to use as our data store.

--- a/www/index.html
+++ b/www/index.html
     <script src="js/app.js"></script>
+    <script src="js/controllers.js"></script>
   </head>
-  <body ng-app="starter">
+  <body ng-app="starter" ng-controller="CartoonsCtrl">

(...)

       <ion-content>
         <ion-list>
-          <ion-item class="item-divider">Where Do Birds Go</ion-item>
-          <ion-item class="cartoon">
-            <img src="http://imgs.xkcd.com/comics/where_do_birds_go.png" alt="">
-          </ion-item>
-          <ion-item class="item-divider">Lightsaber</ion-item>
-          <ion-item class="cartoon">
-            <img src="http://imgs.xkcd.com/comics/lightsaber.png" alt="">
+          <ion-item class="item-divider" ng-repeat-start="cartoon in cartoons">{{ cartoon.title }}</ion-item>
+          <ion-item class="cartoon" ng-repeat-end>
+            <img ng-src="{{ cartoon.href }}" alt="">
           </ion-item>
         </ion-list>
       </ion-content>

--- a/www/js/app.js
+++ b/www/js/app.js
-angular.module('starter', ['ionic'])
+angular.module('starter', ['ionic', 'starter.controllers'])

--- /dev/null
+++ b/www/js/controllers.js
+angular.module('starter.controllers', [])
+
+.controller('CartoonsCtrl', function($scope) {
+  $scope.cartoons = [
+    {
+      href: "http://imgs.xkcd.com/comics/where_do_birds_go.png",
+      id: 1434,
+      title: "Where Do Birds Go"
+    },
+    {
+      href: "http://imgs.xkcd.com/comics/lightsaber.png",
+      id: 1433,
+      title: "Lightsaber"
+    }
+  ];
+});

You can notice that “ng-controller” directive has been added to the body element. It points at the newly created controller, which we’re loading with a script tag and making available to the rest of the app by including its module (starter.controllers) in the ‘starter’ module’s dependencies list.

Let’s implement opening the picture upon the tap:

--- a/www/index.html
+++ b/www/index.html
       <ion-content>
         <ion-list>
           <ion-item class="item-divider" ng-repeat-start="cartoon in cartoons">{{ cartoon.title }}</ion-item>
-          <ion-item class="cartoon" ng-repeat-end>
+          <ion-item class="cartoon" ng-repeat-end ng-click="openCartoon(cartoon)">
             <img ng-src="{{ cartoon.href }}" alt="">
           </ion-item>
         </ion-list>

--- a/www/js/controllers.js
+++ b/www/js/controllers.js
@@ -13,4 +13,8 @@ angular.module('starter.controllers', [])
       title: "Lightsaber"
     }
   ];
+
+  $scope.openCartoon = function(cartoon) {
+    window.open(cartoon.href, '_blank', 'location=no');
+  };
 });

That was simple wasn’t it? We’ve just added the ng-click directive making the click/tap event bound to the openCartoon function from the scope. This function in turn is using window.open passing ‘_blank’ as target. Et voilà!

Now, let’s implement loading images from the real feed:

--- a/www/index.html
+++ b/www/index.html
     <script src="cordova.js"></script>
+    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
+    <script type="text/javascript">
+      google.load("feeds", "1");
+    </script>

     <!-- your app's js -->
     <script src="js/app.js"></script>
     <script src="js/controllers.js"></script>
+    <script src="js/services.js"></script>
   </head>
   <body ng-app="starter" ng-controller="CartoonsCtrl">

--- a/www/js/app.js
+++ b/www/js/app.js
-angular.module('starter', ['ionic', 'starter.controllers'])
+angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

--- a/www/js/controllers.js
+++ b/www/js/controllers.js
-angular.module('starter.controllers', [])
+angular.module('starter.controllers', ['starter.services'])

-.controller('CartoonsCtrl', function($scope) {
-  $scope.cartoons = [
-    {
-      href: "http://imgs.xkcd.com/comics/where_do_birds_go.png",
-      id: 1434,
-      title: "Where Do Birds Go"
-    },
-    {
-      href: "http://imgs.xkcd.com/comics/lightsaber.png",
-      id: 1433,
-      title: "Lightsaber"
-    }
-  ];
+.controller('CartoonsCtrl', function($scope, cartoons) {
+  $scope.cartoons = [];

   $scope.openCartoon = function(cartoon) {
     window.open(cartoon.href, '_blank', 'location=no');
   };
+
+  $scope.$watch(function() {
+    return cartoons.list;
+  }, function(list) {
+    $scope.cartoons = list;
+  });
 });

--- /dev/null
+++ b/www/js/services.js
@@ -0,0 +1,26 @@
+angular.module('starter.services', [])
+
+.factory('cartoons', function($rootScope) {
+  var self = {
+    list: [],
+    url: "http://xkcd.com/rss.xml",
+
+    fetch: function() {
+      var feed = new google.feeds.Feed(self.url);
+      feed.load(function(result) {
+        $rootScope.$apply(function() {
+          if(result.status.code == 200) {
+            self.list = result.feed.entries.map(function(entry) {
+              return {
+                href: entry.content.match(/src="[^"]*/g)[0].substring(5, 100),
+                title: entry.title
+              }
+            });
+          }
+        });
+      });
+    }
+  };
+  self.fetch();
+  return self;
+});

Okay, a couple of comments here. You may wonder why have we loaded Google APIs? That’s because if we were to try to load the xml that comes from the blog’s feed, we would inevitably fail because of the “Same Origin Policy”. Basically, the Ajax request would not complete successfully and there’s nothing we can do locally about it.

Luckily, Google has created a service we can use as a middleman between our in-browser JavaScript code and blog’s web server. Long story made short: when you load the feed with Google’s Feed API - the data’s there and it’s also already parsed.

We’re also adding a custom service here. The service fetches the entries upon its initialization. And because the controller’s depending on this service - we’re guaranteed to get the data as soon as the controller is initialized. The controller is also using the $watch function to make sure it has the most recent copy of the entries list.

References:

CSS table-cells ::before and ::after

2014-11-05T00:00:00+00:00

When laying out HTML forms, instead of using a table (re: tables-are-only-for-tabular-data et al), I’ve had good results making use of the table family of values for the CSS display property. I find it a reliable way to ensure items line up in a wide range of situations, a change in the size of labels or a resize of the browser’s window for example.

Something simple like the following has worked well for me on several occasions:

.table {
  display: table;
}
.table>* {
  display: table-row;
}
.table>*>* {
  display: table-cell;
}

Occasionally though, I’ve wanted to leave a column empty for one reason or another. To accomplish this I found myself including empty HTML tags like:

<form class="table">
  <div>
    <div>A Cell</div>
    <div>A Cell</div>
  </div>
  <div>
    <div></div>
    <div>A Cell</div>
  </div>
</form>

The empty elements function well enough but they feel a little out of place. Recently I came up with a solution I like better. By using the CSS ::after and ::before selectors, you can insert an arbitrary element that can take the place of a missing cell. The following CSS rule can be used to replace the empty div above.

.table>*:nth-child(2)::before {
  content: " ";
  display: table-cell;
}

The nth-child(2) selector can be tailored to your given situation. You could replace it with something like a specific CSS class that you assign to the rows that you want to include empty columns.

Making use of CSS selectors instead of extra HTML elements can help you respect the separation of your document content from your document presentation. If at a later date, you decide you want to switch to a layout that doesn’t resemble a table, you can simply update the CSS rules to achieve a different look.

Laziness is a virtue

2014-06-23T00:00:00+00:00

Laziness is a virtue. Blessed Saint Larry told me so. And yet I am of little faith …

Here I was, banging my head on the keyboard, trying to solve a vertical alignment issue. (The following is a bit simplified for presentation here.)

<td>
<ul class="floaty">
<li> Item 1</li>
<li> Item 2</li>
</ul>
<div class="sticky">
blah blah blah
</div>
</td>

The <ul> element was supposed to float to the right of the cell, and its individual <li> elements also floated, so that the list would fill up from right to left as more items were added:

One item:

Two items:

Three items:

etc., while the “sticky” div was supposed to stay on the left. The challenge was when the div got too tall, or the number of list items caused it to wrap around to a new row; the vertical alignment to keep everything nice and centered is probably achievable in CSS, but I decided to be lazy:

<td style="vertical-align: middle">
<div class="sticky">
blah blah blah
</div>
</td>
<td style="vertical-align: middle">
<ul class="floaty">
<li> Item 1</li>
<li> Item 2</li>
</ul>
</td>

Duh. Seriously. Table cells do a bang-up job of vertical alignment under the worst of conditions. And I’m already in the middle of a table, so the work here was just a matter of adding the appropriate “colspans” elsewhere to account for my column’s bifurcation.

P.S.: I love the word “bifurcate” and work it in to conversation when I can.

CSS Conf US 2014 — Part Two

2014-06-04T00:00:00+00:00

More Thoughts on Getting Vertical, Testing and Icon Fonts

Without further ado I’ve written up another batch of my notes about three more great talks at CSS Conf US in Amelia Island, Florida last week.

Antoine Butler — Embrace the Vertical

Antoine shared his observation that vertical media queries are available to CSS developers but not often used. With the vast array of devices accessing the web today vertical media queries can be a useful tool to adapt your content effectively. Antoine walked us through a couple examples of how he applied this technique in a couple of his projects. The first was a prototype of WikiPedia. While they have gone with a separated mobile site (e.g. en.m.wikipedia.org/), he started with the HTML from the desktop site and applied some vertical media queries to make the content much more digestible. Take a look at his code to see how it works.

The second example Antoine demonstrated was for the navigation at Volkswagen. The client wanted to display an unlimited number of items in the secondary navigation. Once again Antoine applied vertical media queries to handle the varying number of navigation elements based on the device height. Check out his adaptive sticky vertical navigation code for a closer look.

Slides from this talk are available here: Embrace the Vertical.

Christophe Burgmer — If your CSS is happy and you know it…

This was a really interesting talk about testing your CSS visually with a tool Christophe has been developing called CSS Critic. Christophe covered some of the existing CSS/HTML testing tools like Selenium and found that while they worked well they didn’t meet his needs entirely. He wanted a way to visually diff the changes that were made and to be able to write tests for his UI code. For example, when the “accepted” version of the page changed visually, he wanted to be notified and decide whether or not to accept the proposed change.

Christophe demoed the tool for us and it was really cool to see a visual diff in the browser. For a change that was introduced, screenshots of the old, new and difference were displayed. The user then has the ability to accept / OK the change or reject it. You can view the tool in action on the CSS Critic site. Under the hood, CSS Critic uses some other nifty projects including Wraith, PhantomCSS, CasperJS and Hardy. Christophe also mentioned csste.st as a site which curates information on all of these topics and projects.

Slides from this talk are available here: If you CSS is happy and you know it…

Zach Leatherman — Bulletproof Icon Fonts

Zach wrote a great article on Bulletproof Accessible Icon Fonts earlier this year and his talk was along similar lines. He chronicled some of the challenges and pitfalls worth knowing about in order to support icon fonts in your sites and applications. Browser support varies a great deal and Zach cited John Holt Ripley’s Unify unicode support charts as a helpful reference. He works on the a-font-garde project which documents best (er. bulletproof) practices for working with icon fonts today.

Stay Tuned

Watch for one more post later this week with the last batch of talks from the conf!

CSSConf US 2014 — Part One

2014-05-28T00:00:00+00:00

Geeks in Paradise

Today I was very lucky to once again attend CSSConf US here in Amelia Island, Florida. Nicole Sullivan and crew did an excellent job of organizing and curating a wide range of talks specifically geared toward CSS developers. Although I work daily on many aspects of the web stack, I feel like I’m one of the (seemingly) rare few who actually enjoy writing CSS so it was a real treat to spend the day with many like-minded folks.

Styleguide Driven Development

Nicole Sullivan started things off with her talk on Style Guide Driven Development (SGDD). She talked about the process and challenges she and the team at Pivotal Labs went through when they redesigned the Cloud Foundry Developer Console and how they overcame many of them with the SGDD approach. The idea behind SGDD is to catalog all of the reusable components used in a web project so developers use what’s already there rather than reinventing the wheel for each new feature. The components are displayed in the style guide next to examples of the view code and CSS which makes up each component. The benefits of this approach include enabling a short feedback loop for project managers and designers and encouraging developers who may not be CSS experts to follow the “blessed” path to build components that are consistent and cohesive with the design. In Nicole’s project they were also able to significantly reduce the amount of unused CSS and layouts once they had broken down the app into reusable components.

Hologram is an interesting tool to help with the creation of style guides which Nicole shared and is definitely worth checking out.

Sara Soueidan — Styling and Animating Scalable Vector Graphics with CSS

Sara talked to us about using SVG with CSS and included some really neat demos. Adobe Illustrator, Inkscape and Sketch 3 are the commonly used tools used to create SVG images. Once you have your SVG image you can use the SVG Editor by Peter Collingridge or SVGO (node.js based tool) to clean up and optimize the SVG code. After the cleanup and optimization you can replace the generic CSS class names from your SVG creation app with more semantic CSS class names.

There are a variety of ways to include SVG on a page and Sara went over the pros and cons of each. The method that seemed most interesting to me was to use an <object> tag which allowed for a fallback image for browsers that do not support SVG. Sara mapped out the subset of CSS selectors which can be used to target SVG elements, how to “responsify” SVGs and to animate SVG paths. Be sure to check out her slides from the talk.

Lea Verou — The Chroma Zone: Engineering Color on the Web

Lea’s talk was about color on the web. She detailed the history of how color has been handled up to this point, how it works today and some of the interesting color-related CSS features which are coming in the future. She demonstrated how each of the color spaces have a geographical representation (e.g. RGB can be represented as a cube and HSL as a double-cone) which I found neat. RGB is very unintuitive when it comes to choosing colors. HSL is much more intuitive but has some challenges of its own. The new and shiny CSS color features Lea talked about included:

filters
blending modes
CSS variables
gray()
color() including tint, shade and other adjusters
the #rgba and #rrggbbaa notation
hwb()
named hues and in hsl()

Some of these new features can be used already via libs like Bourbon and Myth. Check out the Chroma Zone: Engineering Color on the Web slides to learn more.

C$$

I will write up more of the talks soon but wanted to thank Jenn Schiffer for keeping us all laughing throughout the day in her role as MC and topping it off with a hilarious, satirical talk of her own. Thanks also to Alex and Adam for curating the music and looking after the sound.

jQuery Content Replacement with AJAX

2014-04-15T00:00:00+00:00

This is not a huge breakthrough, but it colored in some gaps in my knowledge so I thought I would share.

Let’s say you have a product flypage for a widget that comes in several colors. Other than some of the descriptive text, and maybe a hidden field for use in ordering one color instead of another, all the pages look the same. So your page looks like this (extremely simplified):

... a lot of boilerplate ...
<form id="order_item">
<input name="sku" type="hidden" value="WDGT-001-RED"/>
<input type="hidden"/>
</form>
... a lot more boilerplate ...

Probably the page is generated into a template based on a parameter or path segment:

http://.../app/product/WDGT-001-RED

What we’re going to add is a quick-and-dirty way of having your page rewrite itself on the fly with just the bits that change when you select a different version (or variant) of the same product. E.g.,

<select name="sku">
<option value="WDGT-001-RED">Cinnamon Surprise</option>
<option value="WDGT-002-BLK">Midnight Delight</option>
<option value="WDGT-003-YLW">Banana Rama</option>
</select>

The old-school approach was something like:

 $('select[name=sku]').change(function(){
   document.location.href = my_url + $(this).val();
 });

I.e., we’ll just send the browser to re-display the page, but with the selected SKU in the URL instead of where we are now. Slow, clunky, and boring!

Instead, let’s take advantage of the ability to grab the page from the server and only freshen the parts that change for the desired SKU (warning: this is a bit hand-wavy, as your specifics will change up the code below quite a bit):

// This is subtly wrong:
$('select[name=sku]').change(function(){
  $.ajax({
    async: false,
    url: my_url + $(this).val(),
    complete: function(data){
      $('form#order_item').html( $(data.responseText).find('form#order_item').html() );
    }
});

Why wrong? Well, any event handlers you may have installed (such as the .change() on our selector!) will fail to fire after the content is replaced, because the contents of the form don’t have those handlers. You could set them up all over again, but there’s a better way:

// This is better:
$('form#order_item').on('change', 'select[name=sku]',
  function(){
  $.ajax({
    async: false,
    url: my_url + $(this).val(),
    complete: function(data){
      var doc = $(data.responseText);
      var $form = $('form#order_item');
      var $clone = $form.clone( true );
      $clone.html(doc.find('form#order_item').html());
      $form.replaceWith($clone);
    }
  });

Using an “on” handler for the whole form, with a filter of just the select element we care about, works better—because when we clone the form, we copy its handler(s), too.

There’s room for improvement in this solution, because we’re still fetching the entire product display page, even the bits that we’re going to ignore, so we should look at changing the .ajax() call to reference something else—maybe a custom version of the page that only generates the form and leaves out all the boilerplate. This solution also leaves the browser’s address showing the original product, not the one we selected, so a page refresh will be confusing. There are fixes for both of these, but that’s for another day.

HTML Doctypes Make A Difference

2014-02-04T00:00:00+00:00

If you are like me you may not have given much thought to an HTML doctype other than “yes, it needs to be there” and “there are a few different types, but I don’t really understand the differences between them”. Well if you are like me then you also recently discovered why doctypes matter and how they actually affect your web page.

For those that are not familiar with an HTML doctype, they are the very first line of an HTML document and look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">

As I mentioned before, there are a few different document types. The reason for this is because each one corresponds to a different rule set of HTML syntax for the web browser to follow, like: HTML 4.0, HTML 4.01, XHTML 1.0, or XHTML 1.1.

“The HTML syntax requires a doctype to be specified to ensure that the browser renders the page in standards mode. The doctype has no other purpose.” [1]

When you specify an official doctype, your web browser should follow the standard behavior for rendering that specific rule set for the given HTML syntax. Thus you should get expected results when it renders your web page. There are official doctypes defined by the W3C for both “strict” and “transitional” rule sets. A “strict” document type adheres strictly to the specification for that syntax, and any legacy or not supported tags found in your document will cause rendering problems. A “transitional” document follows the specification for the given syntax, but also allows for legacy tags to exist in the document. They also define “frameset” doctypes which are transitional documents that also allow for frame related tags.

The doctype for HTML 5 is a lot simpler and shorter than other doctypes, and may look like this:

<!DOCTYPE html>

When you declare an unofficial doctype, the browser will not know which tag syntax rule set to use and will not render the page in a standard way. This is called quirks mode, and the browser basically regresses to an older rules engine to support all legacy tags it knows about and attempts to handle it. This also means that your web page may not render or behave as expected, especially if you use newer tags or features in your document.

Besides the HTML tag syntax, JavaScript is also affected by the doctype- since it is tied to the DOM engine being used by the browser rendering the page. For example, in an strict doctype you will have the native JSON parser object available, but in quirks mode it may not even exist and calls to JSON.parse() or JSON.stringify() could fail.

If you are not sure you are using an official doctype, or if you are using tags that are not supported by the doctype that you are using, then you can check with https://validator.w3.org/ and validate your page. The whole point is to get your web page to render and behave as you expect it, providing a better experience for you and your users.

How to create a Hugo website without a theme

Creating a site

Layout

baseof.html

list.html

single.html

Styling

Content

Building and using the development server

Adding KaTeX support

Converting to Hugo

Background

Shopping around

Making the switch to Hugo

Local development

Some drawbacks

Onward and upward!

Jamstack Conf Virtual 2020: Thoughts & Highlights

Welcome to Jamstack Conf Virtual 2020

Keynote

State of the Jamstack Survey results

Fireside chat with Harper Reed

Lightning Launch: Netlify ⚡

Lightning Launch: Prismic ⚡

Lightning Launch: RedwoodJS ⚡

The COVID Tracking Project: 0 to 2M API requests in 3 months

Jamstack for emerging markets

Managing diabetes with Jamstack

Selling tickets without servers. Or frameworks. Or cookies.

The business side of the Jamstack

Build plugin authors’ session

Videos from the conference

Decreasing your website load time

Inline styles and scripts for the topmost content

Deferred loading of ads

Lazy load for images

Server-side caching

GZip compression

Summary

Enhancing Your Sites with Vue.js

Framework Fatigue

Start Small

Wishlist Pagination

CSSConf US 2016 — Day One

Sarah Drasner — Creativity in Programming for Fun and Profit

Brian Jordan — No Bugs in Sight: Continuous Visual Tesing at Code.org

Jessica Lord — Nativize is the new Normalize

Jen Kramer — CSS4 Grid: True Layout Finally Arrives

Pete Hunt — Component-Based Style Reuse

Keith J. Grant — Stop Thinking in Pixels

Will Boyd — Silky Smooth Animation with CSS

Lea Verou — CSS Variables var(–subtitle);

Scrape web content with PHP (no API? no problem)

Introduction

Just do it

The end

Creating a video player with time markers — step by step

Introduction

Requirements

Step 1 — creating a project skeleton

Step 2 — activating player and creating markers

The end

Full Screen Gallery with Supersized and video slides

Basic functionality

Customizing the toolbar

Customizing the screen image size

Introducing video (YouTube) slides

Final Result

Event Listener Housekeeping in Angular Apps

Int’l — JavaScript numbers and dates formatting, smart strings comparison

Introduction

Intl powers

Number formatting

Date and time easier

String comparison

Conclusion

Old Dog & New Tricks — Giving Interchange a New Look with Bootstrap

Introduction

Not so popular JavaScript/HTML functionalities

document.execCommand