Angular 2 Challenge Day 15 - HTTP CRUD operations with Observables

It’s finally time to introduce some Http CRUD implementation! Today on the show we use yesterday mock in-memory RESTful Http service to get(), post(), and put() our way to remote data!

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script so you can follow along at home:

[ ] Implement our getCurrentFeed() method

private getTweetFromJson(obj: Tweet): Tweet {
    return new Tweet(
      obj.id, obj.body, obj.author, obj.date, obj.retweets, obj.favorites)
  }

  getCurrentFeed(): Observable<Tweet[]> {

    return this.http.get('/api/tweets').map((resp: Response) => {
      console.log(resp.json());
      var fetchedTweets = [];
      for (let tweet of resp.json().data) {
        fetchedTweets.push(this.getTweetFromJson(tweet));
      }
      return fetchedTweets as Array<Tweet>;
    });

  }

[ ] Update feed.component.ts to handle the observable

this.feedService.getCurrentFeed().subscribe( (newTweets) => {
  console.log(newTweets);
    this.tweets = newTweets;
});

[ ] Demo of changing our database file.

[Read More]

Angular 2 Challenge Day 14 - Using 3rd party JS with Angular CLI and Configuring an In-Memory RESTful endpoint

You’ll need to test your API - and your backend might not be built yet. But no matter! The Angular 2 team have your back with an InMemoryDbService Http RESTful database.

Learn how to configure it in today’s episode (or just learn about using 3rd party JS with the Angular CLI)

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script so you can follow along at home:

[ ] Install a 3rd party npm module to simulate REST (I’ve used a specific version since I know this one is compatible with Angular 2 RC5)

npm install --save angular2-in-memory-web-api@0.0.17

[ ] Update angular-cli-build.js to copy the npm over to dist

'angular2-in-memory-web-api/*.+(js|js.map)'
[Read More]

Angular 2 Challenge Day 13 - Introducing Http and Observables

It’s finally time to introduce some Http action into our app by fetching our Friends in async! Along the way we’ll learn about Observables.

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script so you can follow along at home:

[ ] Fix the friend component deprecation

import { FriendComponent } from './friend';

declarations: [ AppComponent, FeedComponent, MenuComponent, FriendsComponent, FriendComponent, MessagesComponent ],

[ ] First, let’s import the Angular Http Module into app.module.ts

import { HttpModule }    from '@angular/http';

imports: [ BrowserModule, FormsModule, HttpModule, routing ],

[ ] Create a static json file in public/friends.json to simulate our server and hold our users (note the “double” quotes)

[Read More]

Angular 2 Challenge Day 12 - Deep Linking in the Router

On Day 12 we turn the Angular 2 Router up to 11 by deep linking to specific friend in our friends component.

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script so you can follow along at home:

[ ] First, let’s implement our Friends Component

import { FeedService } from '../feed.service';

friends = [ ];

  constructor(private feedService : FeedService) { 

  }

  ngOnInit() {
    this.friends = this.feedService.getFriends();
    console.log(this.friends);
  }

[ ] Implement our getFriends() method

getFriends() : Array<string> {

    return [ 'Mary', 'Joe', 'Karen', 'Phil', 'Toni' ];

}

[ ] Update the view

[Read More]

Angular 2 Challenge Day 11 - Router Essentials

It’s time to introduce you to the Angular Router and get our menu routing to the various components in our application.

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script so you can follow along at home:

[ ] Let’s create a component for friends and messages

ng g c messages
ng g c friends

[ ] Now we’ll create a routing file app.routing.ts to setup all our routes in the app

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FeedComponent } from './feed';
import { FriendsComponent } from './friends';
import { MessagesComponent } from './messages';

const appRoutes: Routes = [
  { path: '',  redirectTo: '/feed',  pathMatch: 'full'},
  { path: 'feed', component: FeedComponent },
  { path: 'friends', component: FriendsComponent },
  { path: 'messages', component: MessagesComponent },
];

export const appRoutingProviders: any[] = [

];

export const routing : ModuleWithProviders = RouterModule.forRoot(appRoutes); 

[ ] Tell our module about this new routes in app.module.ts

[Read More]

Angular 2 Challenge Day 10 - The Refactor and Consolidate Episode

Today we inject services into services, refactor business logic out of components, and introduce you to Plain Old TypeScript Objects.

It’s a major tech debt paydown! And we consolidate everything you’ve learned so far!

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script so you can follow along at home:

[ ] Introduce a new tweet class

ng g class tweet

[ ] First we’ll create our tweet properties

export class Tweet {

    public avatar;

    constructor(public body : string, public author: string, public date: Date, public retweets: Array<string>, public favorites: Array<string>) {
        this.avatar = `${author}.jpg`;
    }

}
[Read More]

Angular 2 Challenge Day 9 - Services and Dependency Injection

The technical debt has been piling up fast in our FeedComponent. It’s time to refactor that business logic out into services - and today on the show we’ll teach you how to get started.

(Spoiler: If you’ve done any Spring or Guice or Java EE6+ - this will be a piece of cake!)

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script so you can follow along at home:

[ ] If you’ve used Spring or @Inject, this is all super familiar!

[ ] First we’ll create a user service

ng g s User

[ ] Note the @Injectable

[Read More]

Angular 2 Challenge Day 8 - Data Binding and ngModel

It’s finally here - the day we add a tweet input element and can actually post things to our timeline.

Let’s take a moment to brag:

Let the tweets flow!

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script so you can follow along at home:

[ ] First we’ll use the element markup

<form class="ui form">
  <div class="field">
    <label>What's on your mind?</label>
    <textarea name='body' placeholder="Penny for your thoughts" type="text"></textarea>
  </div>

  <button class="ui button primary" type="button">Tweet</button>
</form>

[ ] Then we’ll make a local variable that gives you access to the element in the template

[Read More]

Angular 2 Challenge Day 7 - Properties and Styles

Today on the show we investigate Angular 2 [property] syntax - and also explore the wonders of per-component styling.

Now with click events and dynamic styles!

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script to follow along at home:

[ ] You can hack DOM properties directly with [prop] syntax (not the quotes inside the quotes)

[style.color]='"red"'

[ ] You can also do per-component styling that won’t clash with the rest of your layout:

.like {
    color: red !important;
} 

.retweet {
    color: red !important;
}
[Read More]

Angular 2 Challenge Day 6 - Events

Today we investigate the wonders of (click) events and catching them in our backing component. We’ll be tweeted and favoriting up a storm.

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script to follow along at home:

[ ] First we’re going to implement our Favorite and Retweet buttons using (click) Events

(click)='OnFavorite(tweet)'

(click)='OnRetweet(tweet)'

[ ] Implement the click handlers too

OnFavorite(tweet) {
    tweet.favorites.push('Glen');
}

OnRetweet(tweet) {
    tweet.retweets.push('Glen');
}

[ ] Stop double-adds? Be great to do it “properly” with a Tweet object method

[Read More]

Angular 2 Challenge Day 5 - ngIf, ngFor and a real timeline

In today’s episode, we finally implement a nice looking timeline! Along the way we learn about ngFor, ngIf, and the Date Pipe.

Our Twitter Timeline is taking shape!

Here’s some cool resources to checkout from today’s show:

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the cheat sheet to follow along at home…

[ ] Copy our avatars into public/avatars

[ ] First of all add an Array of Objects/Maps to timeline.component.ts to hold our tweets:

[Read More]

Angular 2 Challenge Day 4 - Migrate to RC5

In today’s episode, we’re moving from RC4 to RC5. RC5 is reported to be the last of the breaking changes before Go-Live, so it’s worth upgrading.

Here’s some cool resources to checkout for further deep diving on the RC5 migration:

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the cheat sheet to follow along at home…

[ ] Update package.json with rc5 links (Ctrl-D is your friend)

  • @angular stuff rc5
  • forms to 0.3.0
  • router to rc.1

[ ] Do an npm install to fetch the new packages
[ ] Run ng serve to prove the backward compatible action is working
[ ] Add app.module.ts in root.

[Read More]

Angular 2 Challenge Day 3 - Components within Components

In today’s episode, we’re moving from “page thinking” to “component thinking” as we explore nesting Angular components within one another.

It’s also time to start getting our Twitter vibe happening using some magic stuff from Semantic UI

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the cheat sheet to follow along at home…

[ ] Twitter - in component terms rather than page terms
[ ] ng generate component menu
[ ] Add the <app-menu></app-menu> markup
[ ] import { MenuComponent } from './menu';
[ ] directives: [ MenuComponent ]
[ ] Rinse and repeat for Feed
[ ] Add layout magic from Semantic Menus

Here are the CDN links for Semantic UI that I used:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.css" >

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>

<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.js"></script>
[Read More]

Angular 2 Challenge Day 2 - Where Things Go, SystemJS and Component Trees

Day 2 is now live and we hack some properties on our first component (as well as learn how Angular’s component model hangs together).

Three big ideas on today’s show:

  1. Where everything goes in an AngularJS CLI application
  2. What SystemJS is, and how it bootstraps your main app code
  3. How Angular components are structured with html, css and components (think “backing beans”)

Lots of groundwork laid today for the next episode where we hack our first component tree.

I’m also updating a YouTube Playlist of all the episodes as they come out.

Cheat sheets below if you’re interested in following along at home.

[ ] We now have a Git Repo which I will tag day1, day2, etc
[ ] Review we introduced angular-cli ng new & ng serve
[ ] Talk through the directories
[ ] SystemJS - Bootstrapping our application
[ ] Main.ts bootstraps our App for the browser

[Read More]

Angular 2 Challenge Day 1 - Node, Code and Angular CLI

Well I have to get marks for getting started.

The first episode is now live where I talk about NPM, VSCode, and the Angular CLI

Here’s the cheat sheet of the episode if you’re keen to type the commands we run through:

[ ] Download NodeJS and NPM from Nodejs.org
[ ] mkdir nodeme
[ ] npm init .
[ ] npm install –save lodash
[ ] npm install –save-dev gulp
[ ] npm install -g angular-cli
[ ] ng help
[ ] ng new twit-ng
[ ] ng serve
[ ] Download Visual Studio Code or WebStorm or IntelliJ
[ ] Quick review of what we’ve done

Tomorrow we’re talking about project structure and we get coding!

[Read More]

The "Learn Angular 2 in 21 Days" Challenge

Ok. Let’s file this one under “bite off more than you can chew, then chew hard”.

Without a Goal You Can't Score

I’m committing to produce 21 bite-sized episodes covering the basics of Angular 2 as I learn them. The general idea is that we can build a bit of community to encourage one another to dig deep for 21 days and get a good sense of the framework (one coffee at a time).

The 21 Day Plan for Learning Angular 2

My scratchy outline for the series is:

  1. Getting Installed / Background on the JS community. Dev toolchain.
  2. Inside a blank Angular 2.0 project. What all the files are. What lives where.
  3. Writing your first component. Selectors, Templates (internal/external), Styles (internal/external)
  4. Introducing (events) and [properties]
  5. TypeScript quickstart
  6. Models and Data Binding
  7. Refactoring Components (parent/child)
  8. Communicating between components
  9. Introduction to Services and dependency injection
  10. Unit Testing services
  11. Routing architecture and basic menu action
  12. Routing for deep linking with parameters to URLs
  13. Working with Http and CRUD operations (and mocks)
  14. Forms and Validation with Component Binding
  15. Forms using the Forms Builder API
  16. Material design
  17. Integrating 3rd Party JS and Component Libraries
  18. Working with Observables and Promises and Reactive Programming
  19. Linting, Code Coverage and Quality Tools
  20. Integration Testing
  21. Bundling and Minifying with WebPack

It’s going to be super fun!

If you’re keen, head on over to my YouTube Channel, and subscribe to stay up to date with the action.

I’m going to try and blog up the outlines of the daily vlog here, but who knows how I’ll keep up.

Always up for a challenge…

[Read More]

Java Devs are going to love Angular 2

Last week I did my first full day of hacking on an Angular 2 application. I’ve been wanting to get into Angular2 for a while, having hacked a bit of Angular back in the day.

I wasn’t a massive Angular 1 fan, but I really love what’s happening in the Angular 2 space. Having worked my way through the (excellent) getting started application, there’s a few things that immediately jump out at you.

Java/DotNet guys are going to love this!

To be honest, this is the first JavaScript framework I’ve used that feels immediately familiar for an enterprise developer - it feels entirely non-JavaScripty, designed for scale and (actually) feels very much like Enterprise Java.

Angular 2 All The Things

What makes me say that?

  • TypeScript is all kinds of wonderful. It’s not just “strongly typed JavaScript” - it’s an altogether more wonderful experience for an enterprise dev. You have real interfaces, subtypes, scoping, annotations - and all with great IDE support. It feels like JavaScript written for scale. And it must be - the Azure Portal rocks over a million lines of the stuff.
  • Angular itself has a consistent framework feel - with all the things Java devs are used to - Annotations, Dependency Injection, Services, Taglibs, Mockability, Unit and Intergration testing.
  • Components everywhere. I know everyone rags on JSF, but the component stuff in JSF 2.0 was really just so great. Binding a table to a List<Employee>. Oh baby. I can really see Angular developing an awesome ecosystem of that kind of thing. And writing components to do that sort of thing really is an “every dev” level of complexity - not for rock stars.
  • Excellent documentation and a great style guide to get your application structured in a consistent way.
  • Lots of momentum - have already found Stack Overflow answers to the common kinds of errors that I’ve encountered - but the error messages themselves are pretty great.
  • Good CLI support. The existing angular-cli project gives you great bootstrapping and component template creation.
  • Awesome IDEs. VSCode is a rocking cross-platform editor with completions, and WebStorm takes things to a whole new level (and is super cheap - or if you’ve already licensed Intellij IDEA all the same goodness is baked in).

So what’s the learning plan for a Java dev?

Everyone learns things differently - and you’re probably the best judge of what will work for you. But we all appreciate some motivation to get started, so feel free to follow along the path I’m blazing:

  • Subscribe to my YouTube channel. It’ll pump you up. And I’m just about to start a 21 day series on Angular2 for Java Devs. It’s going to be dodgy. But I’m all about “don’t worry, be crappy” as a philosophy for taking action.
  • The Angular 2 Quickstart on the Angular site is a great place to just get a taste
  • The Tour of Heroes is a longer-form tutorial, but gives you a pretty good vibe for a larger Angular 2 app with some CRUD/REST action
  • If you want to buy a resource, I’m really enjoying the Ng2-Book.
  • Best of all.. commit to build a small hobby project! And blog your journey to keep us posted!
[Read More]

Using CloneDeploy for Imaging Windows 10 Workstations

I know all the rage is around VMs and Docker these days, but there are still some of us that have to manage imaging real physical workstations - in my case the ones we use in our mobile training labs (for our rocking Aussie Git Course, for example).

In the past we’ve used Acronis SnapDeploy, but since our current version (4) wasn’t working on Windows 10, and the upgrade options were bamboozling, I decided to do a bit of a scan to see what’s been happened in the space in the last little while.

The end result is that we’ve moved to an Open Source cloning and imaging app called CloneDeploy, and it’s all kind of awesome.

CloneDeploy - Browser Based Image deployment on Windows 10

What’s to love? Here’s eight things!

Well, for one, it it’s browser based, and runs fantastic on IIS and Windows 10. I really don’t want to have to boot a VM to run an imaging solution, and this one works just great out of the gate on Windows 10. Someone has taken the time to make that a great experience. Thank you, someone!

Secondly, the install process was completely turnkey. Run the exe, then point your browser at http://localhost/clonedeploy. Done. All the config is browser-based, in a nice friendly, responsive GUI.

Thirdly, I can easily change the paths for image storage locations onto a bigger disk. This is a big deal for me. My OS boots off an SSD, but I have big storage drives in there that are slower, but perfect for storing images. That’s all supported. And nicely documented.

Fourthly, it does a great job of compressing images. My typical workstation images compress down to about 10Gb which is Windows plus a bunch of standard training apps (VS Code, SourceTree, the Browsers, Markdown tooling, Java, Node, etc, etc). That’s pretty tidy for a reimage.

Fifthly, it runs like lightening being served off my old PC. Imaging is really superfast (a few minutes), and ditto for deploys. It looks like it’s using Linux partclone magic under the covers, but whatever it’s doing it’s super fast.

[Read More]

A night of debugging at CJUG

Our last Canberra Java User Group had a theme of “Debugging” and Tim gave a great talk based around the book “The 9 Indespensable Rules of Debugging”.

Debugging: The 9 Indispensable Rules for Finding Even the Most Elusive Software and Hardware Problems

You can checkout Tim’s slides on github for a quick overview.

Lots of cool ideas in there - many that you’ve heard before - but a few really stuck with me:

  • changing one thing at a time
  • validating the change
  • debugging at the finest point of granularity
  • rubber ducking

Introducing The VLog…

I had my GoPro with me, so I thought I’d take the opportunity to vlog it up and give you a bit of a vibe for our local JUG and the stuff we talk about. It’s a little scratchy as I learn how Premiere works - but it’s a bit of fun.

I’m hoping to get into Vlogging a little more this year (now that I actually have time to edit the stuff), so please Subscribe to my Channel to get me in your feed.

If you live in (or near) Canberra, checkout our Meetup.com page, and make sure you come along to our next event (it’s on Android apps next month and it’s going to be a cracker!).

[Read More]

The Great Gap Year Project

It’s been over 20 great years…

I’ve been in client-facing consulting for over 20 years. I started on the University Helpdesk in 1993 - and loved the client time, but was busting to use my programming skills. I took a job in R&D on Web tech and I’ve never looked back. Counting it off, I’ve been in Enterprise/Web Development for at least 20 years. Man, I must be old!!!!

That’s a long time to be hacking on enterprise software, in a mainly Government environment (with a few years hiatus for various Startup projects), so this year, with my wife back at work as a Clinical Psychologist, and with my recruiting company providing a steady (small) passive income…

I’m taking a gap year!

(Or a Sabbatical, if my parents ask)

“Life is short. Do stuff that matters.”

Or so the startup quote goes. And I think that’s right on.

Do Stuff That Matters

I’ve worked on lots of great projects in my time, and they’ve given a bunch of users a bunch of joy. That feels great!

But I’ve also worked on a lot of software which, for one reason or another, never saw the light of day.

[Read More]

From Lumia to Nexus, and from Microsoft to Microsoft

I’ve spend the last two years in the Windows Phone ecosystem, and I’ve had a (mostly) wonderful time. The UI is buttery smooth, the hardware is solid (a little too solid in the case of the Lumia 930), and the A list apps are (mostly) all there.

But it’s time to move back to Android. At least for the next season.

Here’s some of my thinking.


flickr photo shared by Janitors under a Creative Commons ( BY ) license

My next season is Java and Google-centric

I entered the Microsoft Mobile ecosystem because I was day-jobbing in DotNet (had a wonderful time, but that’s the topic for next time).

I picked up a Windows Phone because I thought it would be good to drink deep of the platform. And to be honest I was shocked how great the UI on Windows Mobile is - seductively good (and certainly miles ahead of Android at the time - circa ICS).

It was a fun season - even though I only created a few sample apps and nothing worth publishing. I learned heaps about WPF, Azure, Keystoning and other MS tech. And enjoyed my time on the platform.

In this next season, I’ll be doing tons of Java work and getting into Kotlin in a big way (a popular choice for Android devs, apparently). I’ve also started subscribing to YouTube Red and making plenty of use of my Chromecast.

It’s going to be a Java/Google deep dive. With a little Node/Azure on the side ;-)

[Read More]

Deleting Windows 10 Recovery Partitions

Just a short post to document some of the things I came across in Windows 10 recently when trying to delete recovery partitions on a freshly migrated SSD boot drive.

Have you noticed that you can right click on the recovery partition but don’t get any delete options?

It’s time to roll up the sleeves and unleash some commandline magic. The basic gist is:

  • Find the disk number and partition you want to delete in Disk Manager
  • Run the DISKPART tool
  • Make Magic Happen with Commandline ITPRO skills

Finding the Disk Number and Partition Number

First, you’ll need find the disk you want to re-partition. You can use the Disk Manager that comes up when you right click on “This PC” in explorer and select “Manage…”

Find the disk number and partition in the GUI

See those “Disk Number” labels on the left? Make a mental note. You’ll need that info shortly..

Deleting Protected Paritions with DISKPART

Time to startup a windows commandline as admin. If you’ve never done that before, click on the Windows menu in the bottom left and type command. The search will display “Command Prompt”. Right click on that icon and choose “Run as administrator”.

[Read More]

A day with Vision Australia doing WCAG2

I’ve never really taken the time to get on top of WCAG2, ARIA and all the cool accessibility stuff that’s surrouding the modern web. So it was time to set that right!

I spend the day yesterday with Pierre from Vision Australia doing their Web Accessibility Techniques training package.

It was great to get the skillset, but more importantly it was great to get the heart for this work and what a huge difference it makes for people who are blind, deaf or need low vision assistance.

And the basic changes are all so doable! Even for a accessibility noob like myself. And definitely within every developer’s reach.


flickr photo shared by davehalb under a Creative Commons ( BY-NC-ND ) license

Big Takeway: Good page structure is its own reward

I was really stressed that this course would mean a massive deep dive on html5 articles and sections and other major semantic restructurings to make screen readers happy. It turns out (that to screen readers at least), a lot of that stuff is just more clutter to read to users. And a lot of accessibility users don’t actually like them!

But using consistent heading levels across your app is a game changer. And easy to implement!

Start small: h1 -> h2 -> h3 - Just keeping consistent and making sure you only go down one heading level at a time. Using that as your semantic “page skeleton” for logical groupings makes everything way better for a screen reader user to navigate your site via hotkeys that move between headings.

And making good use of html lists for listy things, and consistent labels for your form elements can make a real difference. All things we are probably doing anyway!

[Read More]

A Handful of Markdown Hacks

I do love working in Markdown.

I find it gets me out of “edit mode” and into “create mode” a lot easier. No distracting formatting to obsess over, and just lots of clean text to work on. And I can edit it with anything.

In fact, I love it so much, I moved this blog to Hexo last year to give myself an experience of writing it in more seriously. And it’s been a great experience. Everything is just text!

I’ve just finished Wes Bos great (and free) course on Mastering Markdown - and I learned a whole bunch of new Markdown hacks and thought I’d share a few that were new to me.


flickr photo shared by othree under a Creative Commons ( BY ) license

I’ve definitely been doing linking harder, not smarter. I’ve been using the common version of Markdown linking that everyone knows and loves:

I'm loving the [Mastering Markdown](http://masteringmarkdown.com/) course.

Which is fine, but adds a lot of visual clutter, and isn’t very DRY. In the course I learned that you can use literals instead of links, then dereference them later. Which is awesome in reducing visual clutter AND making your links easier to update.

So now I’ve switched to this style to simplifying my world even more:

[Read More]