Category Archives: Tech

Jeff Kubina - https://flic.kr/p/eACKE

How to Super Charge your WordPress with Microservices

Confession: I’m amazed at the authoring experience that WordPress provides. Users are productive from the first hour and UI doesn’t get in their way. The story is similar for developers, if you stay inside the world of theme development. Try to do anymore complex and with tests, and it gets complicated. That is where (micro)service oriented architecture can help us.

At the Open Education Consortium, we use a mix of all the different approaches.

1. Let the WordPress call external API’s

wp1

At OEC, we provide functionality of Course search. While I could build it inside WordPress, it wouldn’t be optimal. I’ve developed it in Django with REST Framework. We get API Documentation for free and our Main WordPress site is using the same calls as everyone else.

To call an external API, you’ll need to extend template_redirect, init,
and query_vars actions and filters.

This way, you can format output inside your WordPress theme.

2. Let the Javascript call external API’s

wp2

This is not strictly WordPress, but it solves the other half of the problems you might have. If you don’t need to have output visible to Search Engines, you can render it with JavaScript. In one example, we’re showing a map of where our members are. We have a separate portal, where members can edit their contact information.

On WordPress side, Leaflet library calls the GeoJSON endpoint and displays it on the map. The data is always up to date and we’re using the best tool for the job.
This portal then exposes GeoJSON API, that Leaflet then displays.

3. Embed your WordPress output

wp3

For our Directory feature, I needed a flexible membership system. I ended writing it in Django with Solr. Django provides powerful form editing, that I didn’t want to replicate inside WordPress.

What I ended doing, is that I exposed API from WordPress with header and footer HTML. That way Django can just include 3rd party content. It also simplifies keeping the themes in sync.

I could do it using iframes, but then I would have problems with urls and the size of iframe content.

There is also a possibility for a future upgrade. Because we’re running on the same domain, we can read cookies from WordPress. This would allow us to check if user is logged into WP Dashboard and elevate their privilages inside Django app.

Conclusion

Modern Web applications are moving away from monolithic, one size fits all, solutions. While it’s common to see such infrastructure in the backend, it’s time that we start embracing it also on user facing sites. I wish some of the infrastructure inside WordPress, would make it easier, but I guess that’s an opportunity for a new library.

tomster2

How to approach learning new Framework and not get overwhelmed

It’s that time of year where everything old is new again. JavaScript is the hottest kid on the block and it is time to update my approach to writing complex Web Applications. Django and WordPress are fine, but they are safe choices that do most of the computation on the server. What I want to learn is, if it’s easier to make Single Page Applications.

After I realized last year that Angular 1, does not work for me – I decided to give Ember.js a try. Their web site resonated with me. It tells a story of community driven framework. It felt like Django, but with JavaScript. It’s also a huge framework that felt overwhelming the first I tried to follow their official tutorial. It also does not help that they are in a middle big transition to a major 2.x release.

After not making much progress in first two days, I have decided to change my approach. I opted for a complete submersion into Ember.js community.

There are several steps and mistakes I made along the way:

  • First mistake was trying to build a new app, while learning fundamentals. Too many new things and wrong assumptions on my part.
  • I stopped reading about fundamentals from tutorials on blogs. They’re just too short for someone without prior experience to understand what’s going on.
  • I bought a book – (Ember Cli 101) and forced myself to do all the examples in book. By typing them out – no copy/pasting. As Kathy Sierra tells us, we learn best when we write good examples of code.
  • Writing the code (and making mistakes) helped me learn ecosystem. It’s also a good practice in how to use build-in debugging tools, what do coding errors look like and how to fix them.
  • I started listening to podcasts with Core Team members. They provide a general overview of ideas that are usually skipped at technical talks.
  • I started listening to talks given at different (Ember) conferences in the last year. It helped me understand the terminology and the technical challenges that community is facing. They’re also great source of inspiration for the kind of apps, that people are building.
  • I started lurking on official IRC channel. It turns out, that if you read Q/A that goes in there, you’ll learn answers for problems you don’t have yet. That way it’s easier to identify later.
  • I’ve started to follow the discussion forums. It’s a good way to see longer discussions on common topics.
  • I’m starting to read different bug reports and RFC’s in Github.

All these activities are happening in parallel. After a week, I now know how to read the documentation and how to solve issues. I also understand what to watch out for and rough roadmap for the framework. I have yet to write my first app from scratch, but now I have example app that I can borrow code from.

To make it easier for other developers that are coming to Ember.js ecosystem, I’ve started documenting my journey as I Learn Ember.js.

So that was first 30 hours of deliberate practice with Ember.js. Several hundred to go.

Photo CC by Nahuel Hawkes - https://www.flickr.com/photos/nahuefox/12862209904/

How to fix Ubuntu font from Google Fonts on OS X

If you are Web site owner and would like to fix this for your site, repackage the Ubuntu font under a different name and serve it from your site. You’ll lose Google’s CDN, but your OS X users will be happier.

For about a year, a few sites would always display broken Š character on my Chrome in OS X. Example:

broken-s

Debugging this lead me to a rabbit hole of bugs in different upstream sources. My first reaction was that Google Fonts serves bad font. But that doesn’t explain why it appears only on OS X.

So I started thinking – what if broken font is coming from my computer. It turns out that it’s common for Open Source applications to install Ubuntu font. It also means that because the way web font rendering works, it will always try to use local version. This almost always makes sense, since local fonts can be much better then your web optimized subset.

So to fix this, disable Ubuntu font from Font Book Application. If you realise later that you need it, you can enable it again.

disable-ubuntu-font

But what’s the core reason for this breakage? OS X Font rendered has a problem with the way font is built. Some of the tables in the font are too large. Launchpad tracks this bug at #1334363. It will soon be one year old, with no resolution yet.

If you are Web site owner and would like to fix this for your site, repackage the Ubuntu font under a different name and serve it from your site. You’ll lose Google’s CDN, but your OS X users will be happier.

All solutions are bad, but I’m confident that in another year Apple can fix font renderer or that Ubuntu will repackage font.

https://flic.kr/p/gXBR1t

Why Learning a new Technology is Hard

About a decade ago, I’ve discovered that I have to reinvent myself every 2 – 3 years to keep up with the speed of technology. During that time I’ve managed to learn a lot of new languages and frameworks. But I also failed at a lot of them.

Talking to newcomers to the field and observing my own patterns, I now know how to succeed.

How to Learn a new Technology
How to Learn a new Technology

It’s all about having a Project. Passionate developers are always tinkering with something. A new gadget, framework or a pet project.

But what happens when the chasm between project and new technology is too wide?

In the last year, I’ve trying to learn functional programming. While I understand the basics, I still haven’t figured out how to get to the level where I can build something that’s useful to me. The books and tutorials that I tried, focus on areas that are too far away from my everyday work.

Next time, I will have to make sure that I find a tutorial that’s like the ones that worked.

Django Girls Tutorial

I’m impressed with this tutorial. It allows student to build a full web site and deploy it online, without wasting time on unimportant details. For each components she learns, she has an opportunity to go back later and explore it further.

I think this is the best approach on how to introduce the full-stack of web technologies. She doesn’t even need to know what technology she wants to study. When a mentor is present, it provides a good opportunity for more discussion on a wide range of topic.

Recordings of Workshops

I think workshops (or live tutorials) are the right approach to the problem of having a project. Instead of building your own, presenter guides you through building an example project. Extra explanations make it understandable but not too complex.

Python community is recording most of the workshops at different events and posting them online. This makes it easy for a wider group of people to get into the field.

When you’re following the tutorial on video, you can adjust the pace to your own level. There is also a high chance, that a participant will ask the same question that you have while watching the video.

One of the best tutorials I’ve found, is Wes McKinney’s tutorial on Python Pandas. It’s over 3 hours long and it will take you a week to do it at home. But it teaches you enough to see the full power of framework and its potential. After that you can read the book and learn all the details.

Conclusion

I don’t think Learning things the Hard way is the best approach for newcomers. It’s just like teaching grammar, and leaving out the culture. As mentors we should do a better job of explaining how different parts fits together and not focus on semantics.

What was the best tutorial that helped you learn something difficult?

Is there are practical tutorial to ClojureScript?

Theme Hybrid is a better WordPress theme framework

I recently had a chance to work on a number of WordPress related projects and I was pleasantly surprised as the platform had matured in every possible way since the early 2.x releases.

Today I just wanted to post a brief note to people who are still using random WordPress templates to base their derived templates on: please don’t do that to yourself. Most of the free themes are old, don’t have good customization options and are badly structured.

You’ll be much better off if you:

  • Read about Child themes – http://codex.wordpress.org/Child_Themes
  • Invest into a customizable theme – my preferred choice is Theme Hybrid but there are a number of other options. It costs 25USD/year to get access to support forums and tutorials that have saved me many hours of Googling.
  • Read their docs about how to override theme with custom style.css and functions.php

This means that you’ll often be able to make really great custom child theme with just a few lines of css and a few filters.