When I started this blog I had intended that there would be a fair amount of Go content. As I sat down to write the first article, I had to embed a game record in the form of an SGF file in here. Currently there’s a wonderful open source SGF view/player/creator call eidogo. But when I tried embedding it here, the theme didn’t feel just right, and the mobile UX was a bit poor.
Soooo, I started my own from scratch; and I am now presenting: SGF.js. Instead of using an image-based board, I use a giant grid of divs with some abuse of CSS pseudo-elements to render the board. This way, the board completely variable in it’s size and can be made fully reponsive to any device.
The aim of this project is a viewer for playing-back game records (and will be for the forseeable future), so it’s not as as feature-rich as eidogo. But now, a demonstration; here is a game I reviewed for the Go Teaching Ladder.
(;FF[4]GM[1]SZ[19]ST[2]CA[UTF-8]AP[SGFC:1.16]
PB[brightston]
BR[7k]
PW[bluetalon]
WR[6k]
KM[0.5]
DT[2013-12-20]
PC[IGS-PandaNet]
RE[B+6.5]
RU[Japanese]
C[J: Hi my name is Jay and I will be reviewing this game. My comments start with "J:"]
;B[pp];W[dd];B[pc];W[dp];B[cn]TR[fq]C[J: From a direction standpoint, the approach from F3 aims to build up a large framework synergizing with the right side. C6 aims to break up white's left side.]
;W[fq]TR[cl]C[J: pincer at C8 also possible];B[bp];W[cq];B[ck]
;W[qe];B[qg]C[I wasn't really sure how to respond here. Black's position seemed really good on the right.
J: The idea of R15 is that it aims at reducing black's top right corner, so you must expect black pincer to keep the right side.]
(;W[nd]TR[qc][od][pd][oe][of][pg]C[J: O16 is not a normal move after this pincer. The followup after O16 doesn't look interesting for white either. See variation.
J: Many many variations start from this position with sny of the triangled moves. I will go over some common sequences. See variations.]
;B[pe];W[pf]
(;B[qf];W[pd];B[oe];W[od];B[qd]
(;W[qc]TR[re][dp]C[J: white missed a good opportunity here to descend since white has the ladder.]
;B[re]
(;W[pb]TR[rd]C[I think W got a decent position here.
J: Since there are no ko threats in the opening, trading S16 first is ok too.]
;B[rc];W[qb]TR[lc]C[J: The top right position doesn't feel good for white since black has sente, and M17 for black later can attack this group.]
;B[cf]TR[fc][mq]C[Unsure how to respond here again.
J: not correct direction for black. Black should approach from the wider F17 side or make a large enclosure with N3.]
;W[df]TR[jd]C[J: D14 is usually played when white has a stone around K16. The advice given to me a long time ago, was to forget about this move until you reach dan level.]
;B[dg];W[ef];B[ce]
(;W[cd]LB[cd:A][eg:B];B[fc]C[J: very good sense by black, since C9 indirectly helps D13 stones.]
;W[ec];B[fd];W[de];B[jc];W[cg];B[bg];W[ch];B[bh];W[ci];B[bi]
;W[bd];B[bf];W[eh]C[J:result is even.];B[jq]TR[hq][mq]C[J: Black should either enclose with N3 or attack with H3. K3 is lukewarm.]
(;W[on]TR[qn]C[J: P6 is uncalled for. Too high, without effect on black's corner or side. A simple approach at R6 is enough. See variation.]
;B[mp]TR[np]C[J: O4 is safer for black.];W[qq]TR[on]C[J: These two stones don't work well with each other.]
(;B[pq]TR[qp]C[J: R4 is possible for black. See variation.]
;W[qp];B[po];W[qo];B[pn];W[rm];B[qk];W[ql]TR[lc]C[J: white is pretty much settled. There's no need to continue here. M17 is a move that protects the top white group while putting pressure on K17 group.]
;B[pl];W[pr];B[or];W[qr];B[qm];W[qn]TR[rl]C[J: R6 should be at S8.]
;B[rl]TR[on]C[Was hoping to use aji of marked stone somehow.
J: This is why P6 was too high in the first place.
J: allowing black to capture R8 is a big loss, as black is very strong now, and white must reduce from the outside.]
;W[cj]TR[on];B[bj];W[dk];B[cl];W[id]C[J: hard to see what can be gained from this attack.]
;B[ic];W[hd];B[hc]TR[fb]C[Here I thought maybe I'd go for influence but connecting the two stones seemed really small at this point.
J: black can connect with F18 instead.];W[lc];B[fb];W[eb];B[ea]
;W[da];B[fa];W[db];B[jd]C[I had to reduce black's thickness somehow, was unsure where.]
;W[mf]C[J: N14 is a large reduction of the right side.];B[je]
;W[hq]C[I was behind on terrotory, although this seemed like a bad move since it provoked b83.
J: H3 is ok. Black's H3 is a harsh attack on F3 group.];B[jo]
;W[jr]C[J: K2 is a good reduction.]
(;B[ir]TR[kr]C[J: black J2 feels to be too greedy. See variaion.]
;W[iq];B[kr];W[jp];B[kq];W[kp];B[lp];W[ko];B[lo];W[kn];B[ln]
;W[km];B[hr];W[gr]C[J: this result is good for white.];B[dl]
C[J: E7 is faster.];W[bq];B[bo];W[ml];B[om];W[en]C[Seems close now.
J: yup.];B[fl];W[gm];B[aq];W[ar];B[ap];W[br];B[ge]TR[gf]C[J: G14 is bigger, looking to peep F13 later.]
;W[os];B[nr];W[kb];B[jb];W[hk];B[gg]TR[ng]C[J: black should defend O13 now.]
;W[hi];B[gi]C[J: not sure why G11.];W[gj];B[fi];W[ji]TR[mj]
C[Maybe I should have jumped into black's potential on the right side here.
J: N10 would be a good way to start reducing black and enclose the center.]
;B[mj]TR[nh]C[Black defends. I think I still had a chance to invade.
J: yeah, black's potential looks bigger than white's.];W[kk]
;B[ng];W[nk];B[nj];W[ok];B[oj];W[nf];B[of];W[mg];B[nh];W[mk]
;B[mh];W[ek];B[el];W[pk];B[pj];W[ns];B[ms];W[ps];B[fg];W[eg]
;B[ei];W[di];B[hh];W[ih];B[ig];W[jg];B[jf];W[hs];B[js];W[sn]
TR[rb]C[J: S18 is larger.];B[rb];W[md];B[kg];W[jh];B[le];W[ra]
;B[gl];W[hl];B[fm];W[fn];B[fk];W[dn];B[ej]C[Oops];W[dh];B[dj]
;W[co];B[bn];W[cp];B[lj];W[kj];B[mm];W[lm];B[nm];W[ja];B[ia]
;W[ka];B[kc];W[mb];B[ld];W[lf];B[kf];W[li];B[mi];W[dm];B[cm]
;W[fh];B[gh];W[sl];B[sk];W[sm];B[lh];W[ki];B[lk];W[ll];B[ff]
;W[ae];B[af];W[be];B[gk];W[gs];B[is];W[hj];B[sb];W[qa];B[ol]
;W[tt];B[tt];W[tt]C[J: I think the result of this game stems from some weird moves like P6 and O16. My suggestion for you would be to study joseki now for memorization, but to recognize common shapes and approaches.
J: Thanks for showing me this game.])
(;B[kr];W[ir];B[jl]C[J: if black had simply L2, he can take the large move of K8.]
))
(;B[qp];W[pq];B[oq];W[or];B[nr];W[nq];B[op];W[mr];B[np];W[ns]
;B[pk]C[J: This is one way for black to work with his top wall to make a framework.]
))
(;W[qn];B[np];W[rp];B[qq];W[qk]TR[lp][lq]C[J: this is enough. There is still weakness around M3 for later.]
))
(;W[eg]LB[cd:A][eg:B];B[dh];W[id]))
(;W[rd];B[qe];W[rc]))
(;W[re];B[rd];W[of]
(;B[ne];W[me];B[nf];W[ng];B[mf];W[lf];B[mg];W[mh];B[lg];W[kg]
;B[lh];W[li];B[kh];W[jh];B[ki];W[kj];B[ji];W[ii];B[jj];W[jk]
;B[ij];W[hj];B[ik];W[il];B[hk];W[gk];B[hl];W[hm];B[gl];W[fl]
;B[gm];W[gn];B[fm];W[em];B[fn];W[fo];B[en];W[dn];B[eo];W[ep]
;B[do];W[co])
(;B[se]C[J: So black has to connect under instead.];W[ne];B[rf]
;W[qn]C[J: black is forced into a funny looking shape, white is strong on the outside and has sente.]
)))
(;B[oe];W[qf];B[qd];W[pg];B[jc]TR[qe][pf][qf][pg]C[J: white's four stones ares lonely, and black's top side is growing.]
))
(;W[qc]C[J: R17 is a way to try to settle the corner quickly.]
;B[qb];W[pd];B[oc];W[rc];B[md];W[rb]C[J: White is settled, black has sente.]
)
(;W[oe]C[J: Moving out with P15 starts a fight.];B[nd]TR[ld]
[ph];W[ld];B[ne];W[pg];B[qh];W[nf];B[mf];W[ng];B[le]TR[jd][qk]
C[J: fight will continue for a while.]))
It’s a bit rough around the edges, and in a very very alpha stage, but try looking at this in a mobile browser!