Adding IPv6 to Ubuntu

Finally made some time to investigate and set-up IPv6 support on my Ubuntu (Digital Ocean) servers. Turns out, it’s not that hard. Here’s the TLDR.

  1. Take a snapshot. Or backup. Because.
  2. Now, get an address… In my case, that was as simple as clicking a button on my Digital Ocean droplet admin. Unfortunately, that meant an unscheduled machine reboot… as it can only be applied while the machine is turned off (or being newly provisioned). Oh well.
  3. SSH to your server.
  4. Then add your address:
  5. sudo ip -6 addr add public_ipv6_address/64 dev eth0
  6. Followed by your gateway:
  7. ip -6 route add default via public_ipv6_gateway dev eth0

    I’ll admit I was confused initially by this step as I was accidentally adding the ipv6 address again. The gateway address is different.

  8. sudo nano /etc/network/interfaces
  9. Add the following. Obviously, add your own v6 address (note, you do not add the /64 we entered when setting the address up initially) plus gateway. The dns addresses here are for Digital Ocean, so if you are using a different host, you’ll need to to change them.
    iface eth0 inet6 static
      address primary_ipv6_address
      netmask 64
      gateway ipv6_gateway
      autoconf 0
      dns-nameservers 2001:4860:4860::8844 2001:4860:4860::8888 209.244.0.3
    
  10. Save the file. Reboot the server.

More info? Digital Ocean have an detailed article + comments.

IPv6

Manic week at work as we get closer to the release on a big financial site (hence the severe lack of updates here). Took some time out tonight to do some housekeeping.

Finally got around to adding IPv6 after reading various press regarding the increasing scarcity of IPv4 addresses. It’s a little more fuss to setup, but seems to work. Not that I can hit IPv6 addresses from this cable network…

While tinkering with the server, snapshotted, updated and patched everything.

A week ago I added Digital Oceans’ new monitoring beta tool, and it keeps bugging me that this server is using over 60% of its memory. Which doesn’t match what the memory monitor itself tells me on their admin panel. Something else to investigate…

Virgin Media were around today so we have a new 8-tuner set-top box and 200mbit internet. Long (very) story short, it’s taken 6 months to get a new modem from them. But hey, now we have the top tier TV and funky new 8-tuner set-top box too.

 

Magic social icons with CSS

Screenshot of a social icon selected with CSS
Social icons selected via CSS

This is a simple trick for automatically displaying icons (such as social icons) without any script. Using a CSS wildcard selector, we check the href of our link and display a pseudo-element with matching content.

a[href*="github.com"]::before {
 content: "\f113";
}

The above example uses a Font-Awesome glyph as content, but this could easily be replace with an image: content: url(/path/image.svg). Any subsequent link matching our selector would display our pseudo-element.

A demo of this technique can be found here on CodePen.

Dev notes

Be careful with your selectors. You could end up accidentally styling links that have been entered into a user-editable field (such as a CMS)… unless that’s what you really want. Wildcard selectors require the browser to do extra work, so you should use sparingly.

Inspire

Inspire is where I collect sites that catch my imagination. The sort of sites that make me say I want to do that, (why can’t I do that!), sites that have thoughtful UX, clever effects, new tech, awesome tricks or just look cool. It also serves as a collection of collections, a resource for when I’m left scratching my head and looking at a black PhotoShop document.

I hope some of these links inspire you, too.

Crunch

There’s nothing like the crunch at the end of a project to find out which processes are really working for you. Agile is a great methodology for approaching a project, but it can easily (and frequently, in my experience) lead to “ticket overload”. This is especially apparent at the end of projects where throughput of tickets is critical as the project rushes towards a hard deadline.

So why the deluge of tickets? Perhaps it’s a sign that something didn’t work earlier on. That QA were onboard far too late, or poorly scoped tickets or poor executed code. Overly ambitious requirements, or fiddly design. All of the above. And some of that is just natural entropy in a project-especially the long run ones where process expands to fill all available time.

It’s not always hard. We’ll do better next time. But sometimes we forget that process is there to help. Not strangle. We forget that we should be hungry to deliver, and delivery is more important than process.

Given a week to deliver something, you find a way to deliver. Any away, whatever it takes.

Given three months to deliver something, process finds a way to trip you up.

I believe in release often. Release small. Real deadlines. Real opportunity for the client to see something to feedback, to catch those changes and design glitches, the bad code or trippy UX. Release every week, twice a week, every other-day. Sit the client down and walk them through it. Show something. Be cool with what you’re showing them. It’s work in progress.

Real agile is iteration. Not invisible sprints without consequence or comment. Breaking a waterfall project into sprint and calling it agile is not agile.

Playing with SCSS loops

Screenshot of tiles
Tiles using flex, loop and one preset colour.

SCSS offers a few control directives that enable us to perform some rather interesting effects.

In this example, I use a simple for loop to change a single colour value and apply that to a series of 25 <div> elements.

 

A basic loop is straight forward:

 @for $i from 1 through 25 {
   
 }

So, if we have a base colour $color-green: #00ff00 we can simply multiply the current iteration $i by an arbitrary value, and perform an SCSS filter (such as darken, lighten) on that value. Bingo:

$color-green: #00ff00;
$increment: 1.5;

.my-class {
  @for $i from 1 through 25 {
    &:nth-child( #{$i} ) {
      $col: $i * $increment;
      background-color: darken($color-green, $col);
    }
  }
}

This will loop through 25 elements that have the class my-class and apply an increasingly dark background colour to each.

An little expermiment featuring this can be found over here on CodePen.

Dev Notes

I’m using flex and vw/vh units to give us a perfectly tiled full-page result. This may not work in all browsers. I wrote a little about viewport units in another post earlier.