Human Landscapes of the American Southwest

Great set of some aerial photos of the American Southwest.

southwest-1

southwest-2

southwest-4

southwest-3

When clicking through to the linked Google Maps locations you can see the Jefferson Grid in some of them.

Human Landscapes of the American Southwest →

Elsewhere , , , Leave a comment

Rendering Markdown using Custom Elements v1

Inspired upon a v0 implementation, I’ve recreated a Markdown renderer in Custom Elements v1. The result is <custom-markdown>.

The code itself is pretty straightforward: other than some (contained) styling the custom element uses showdown to convert the Markdown to HTML. This conversion is triggered in the connectedCallback().

class Markdown extends HTMLElement {
  
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'closed'});
    shadowRoot.innerHTML = `
      <style>
        :host { display: block; font-family: monospace; }
      </style>
      <div class="output"></div>
    `;
    this.output = shadowRoot.querySelector('.output');
    this.converter = new showdown.Converter();
  }

  connectedCallback() {
    this.output.innerHTML = this.converter.makeHtml(this.innerHTML);
  }
  
};

customElements.define('custom-markdown', Markdown);

Here’s a working example (if your browser supports it):

See the Pen Custom Elements v1: Render Markdown with <custom-markdown> by Bramus (@bramus) on CodePen.

Elsewhere , , , Leave a comment

Laravel Uptime Monitor

monitor-list

Today Freek from spatie released a new package:

Laravel-uptime-monitor is a powerful, easy to configure uptime monitor. It will notify you when your site is down (and when it comes back up). You can also be notified a few days before an SSL certificate on one of your sites expires. Under the hood, the package leverages Laravel 5.3’s notifications, so it’s easy to use Slack, Telegram or your preferred notification provider.

Laravel Uptime Monitor →
An uptime and ssl certificate monitor written in PHP →

Elsewhere , , , Leave a comment

Working with Print Stylesheets

screen-shot-2012-09-06-at-11-23-10-am

Often forgotten, but no less important: print styles. This post provides a nice summary of some simple things you can do to give your print layout some love.

A small collection of useful CSS techniques and a quick reminder that print style sheets are still a thing.

I totally forgot about print style sheets →

Elsewhere , , Leave a comment

Romare – Come Close To Me

From his most recent “Love Songs: Pt. Two”:

Elsewhere , , Leave a comment

Google PhotoScan

Don’t just take a picture of a picture. Create enhanced digital scans, with automatic edge detection, perspective correction, and smart rotation.

PhotoScan stitches multiple images together to remove glare and improve the quality of your scans.

PhotoScan by Google (iOS) →
PhotoScan by Google (Android) →

Elsewhere , , , Leave a comment

SolarCity and Tesla: Tau Microgrid

The future is happening:

The island of Ta’u in American Samoa, located more than 4,000 miles from the West Coast of the United States, now hosts a solar power and battery storage-enabled microgrid that can supply nearly 100 percent of the island’s power needs from renewable energy. This provides a cost-saving alternative to diesel, removing the hazards of power intermittency and making outages a thing of the past.

SolarCity: Island in the Sun →

Elsewhere , , Leave a comment

SVG Line Animation for the Uninitiated

1-oecxexemvmou9a4mh4iejg

In case you’ve missed Jake’s post “Animated line drawing in SVG” back in 2013, a refresher on the subject 🙂

SVG Line Animation for the Uninitiated →

Elsewhere , , , Leave a comment

CSS pseudo-classes

1-8iebmv82iubj7jyyiyx_aa

Great and visual explanation of CSS pseudo-classes such as :only-of-type, :first-of-type, :last-of-type, :nth-of-type(number/an + b/even/odd), …

Embedded above is the visual for the selector:

a:nth-last-of-type(1) {  border: 2px solid black; }

How CSS pseudo-classes work, explained with code and lots of diagrams →

Elsewhere , , Leave a comment

Introducing Custom Elements

One of the new features in Safari Technology Preview 18 is Custom Elements v1 (Chrome/Opera already support for it):

To define a custom element, simply invoke customElements.define with a new local name of the element and a subclass of HTMLElement.

Example Code:

class CustomProgressBar extends HTMLElement {
  constructor() {
      super();
      const shadowRoot = this.attachShadow({mode: 'closed'});
      shadowRoot.innerHTML = `
          <style>
              :host { display: inline-block; width: 5rem; height: 1rem; }
              .progress { display: inline-block; position: relative; border: solid 1px #000; padding: 1px; width: 100%; height: 100%; }
              .progress > .bar { background: #9cf; height: 100%; }
              .progress > .label { position: absolute; top: 0; left: 0; width: 100%;
                  text-align: center; font-size: 0.8rem; line-height: 1.1rem; }
          </style>
          <div class="progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
              <div class="bar" style="width: 0px;"></div>
              <div class="label">0%</div>
          </div>
      `;
      this._progressElement = shadowRoot.querySelector('.progress');
      this._label = shadowRoot.querySelector('.label');
      this._bar = shadowRoot.querySelector('.bar');
  }

  get progress() { return this._progressElement.getAttribute('aria-valuenow'); }
  set progress(newPercentage) {
      this._progressElement.setAttribute('aria-valuenow', newPercentage);
      this._label.textContent = newPercentage + '%';
      this._bar.style.width = newPercentage + '%';
  }
};
customElements.define('custom-progress-bar', CustomProgressBar);

Once defined you can then use it as follows in your HTML:

<custom-progress-bar"></custom-progress-bar>

It is also possible to create instances using JavaScript, and to define the allowed attributes for custom elements (and listen for changes on them).

Introducing Custom Elements →
Custom Element Demo →

Elsewhere , , , , 1 Comment