I have built or maintained a number of custom WordPress themes over the last few years and I’m big on making testing/validation as easy as possible. I’ve had some experience with unit testing through my Symfony and Python work and I wanted to do the same with WordPress. However, testing the look and feel of a website doesn’t easily fall within the scope of unit tests. When I first heard people talking about style guides, it felt like an intriguing and natural solution to this problem… But how to make use of it?
Category: Web
I get a geeky sense of enjoyment from finding uses for HTML’s dl element. I think part of it comes from my desire to categorize and describe things. There are 2 variations on the same use case that I typically come across.
Notes from UofI Web Con 2015
It’s spring here in Champaign-Urbana, which means it’s time for the Illini Marathon and WebCon. I didn’t get to participate in the former this year (good thing too because a severe thunderstorm rolled through mid race), but I did go to WebCon. Here are my (very) rough notes and take aways from the sessions I went to.
Making clickable table rows accessable
This particular issue came up for me at work. The project in question uses AngularJS and bootstrap. We had a table where the rows were already clickable and opened up a modal popup (id = #recordModal) to edit the record. However, it was not accessible via the keyboard.
<table class="zebra record-list" cg-busy="'tracker'">
<tbody>
<tr ng-repeat="record in list
data-toggle="modal" data-target="#record-modal"
ng-click="editRecord(record)">
<td>{{ record.field1 }}</td>
<td>{{ record.fieldN }}</td>
</tr>
</tbody>
</table>
Notes from UofI WebCon 2014
This past April, I attended the UofI Web Conference. This was the first conference I’ve attended that was directly applicable to my current job… and it was excellent! What follows is a quick brain dump of my notes from the conference.
As part of a Django App I’m building, I wanted to be able to scale a list of numeric values that also happened to be fractions. Furthermore, I wanted to do this completely in browser without incurring a call to the server each time I needed to recalculate. To accomplish this, I found a library on github that nicely handles doing math with fractions (Ratio.js), then manually modified the HTML table’s DOM where the values to be scaled were stored/displayed. The following was a proof of concept, and I make no claims that this is the best way to do this.
My own thoughts…
As a person diving back into the web world, I found this book an incredibly helpful and invigorating read. The examples in the book are intuitive, easily conveyed, and reinforced; but they do require some prior knowledge of HTML/CSS. From a technical perspective, Ethan focuses on 2 main ideas: relative/flexible sizing of a page’s physical layout and media queries to define different behaviors within different (width specific) contexts. When I finished the book, I was excited not only at the prospect of rereading it, but also about reading many of the articles he references and to hack on my own learning projects for some hands on experience. I cannot remember the last time I read a programming book with that much interest.
Getting up to speed on HTML5
As I’ve been reading up on HTML5, I have found these links particularly helpful:
- HTML 5 differences from HTML4
- Dev oriented HTML5 spec
- Presentation on new HTML5 features (Blog | YouTube)
- Canvas element cheat sheet
- 23 useful online HTML5 tools
Recently, I picked up this book because I’ve wanted to learn CSS but haven’t found any online tutorials to my liking. It bills itself as being for a beginner to intermediate level and is geared for people who want a simple guide for quickly learning CSS. Going into this experience, I would say I knew enough HTML to consider myself an intermediate user. I decided to work my way through the book in sequential order and build my own pages from scratch rather than use the examples provided on the web. After finishing, these are my impressions of the book: