All posts by Jure

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.

CC BY Jef Safi - https://www.flickr.com/photos/jef_safi/5896490052/

Architecting scalable WordPress Themes that are easy to maintain

WordPress Themes are like good computer games – easy to learn, but difficult to master (Bushnell’s Law). Unless you start writing them from scratch, you don’t appreciate good structure.

WordPress Template Hierarchy diagram displays all the possibilities we have:

wp-template-hierarchy

While it explains, how things are working, it also shows how many different templates we need to create.

There is an alternative approach – we can use get_template_part. That way the core of your theme resides in index.php and specific template partials.

Your index.php should like this:

or more high level:

File 28-06-15 18 27 42

For each custom post type, create a template part inside partials/content-{post-type}.php. If it doesn’t exist, WordPress will load partials/content.php.

This approach has several benefits:

  • You don’t have to repeat the header and loop code for every template, reducing the amount of code repetition.
  • You can reuse template parts in other parts of the side (e.g. search results or custom archive pages).
  • If you write good generic fallback for template partials, you can have a first prototype of the theme running much faster.

Excellent starter theme that follows this design is _s (underscores) theme.

2015-06-18 10.48.02

Notes from mloc.js 2015 – JavaScript Conference

It’s easy to get stuck in a filter bubble of technologies that we use to solve our problems. Good conference will challenge your view on how you solve problems and present novel concepts. Mloc.js (million lines of JavaScript) was such a conference. Main idea behind the talks was how to manage projects with such a wast code bases.

Things I learned, that will influence my future projects:

  • Reactive programming is growing and it looks it’s going to stay. One way bindings and data flows make it much easier to manage state in Single Page Applications.
  • One way bindings with immutable data, fit well with functional programming. A lot of new experiments are in FP domain.
  • Compile to JavaScript is the way forwared. ES6 is nice, but currently the money is on building better tooling, instead of staying with JavaScript. TypeScript looks like a good starting point. Having types allows for better static analysis and IDE integration.
  • Concepts like graceful degradation and progressive enhancement are out. The only context in which people care about HTML is for Search Engines. If you can render good enough version of Website for Google – you don’t have to worry about anything else.
  • It seems that new solutions target only evergreen browsers.

I do see a lot of challenges. We’ll have to train people to understand FP. Now it’s a good time to pick up your Haskell book, once again.

I’ll also have to switch my tooling to TypeScript and replace jQuery with another layer of abstraction on top of it.

Jay for the speed of progress and the fact that I now how to learn completely new skills, while still staying ‘just’ a web developer.

Notes from OpenData Ljubljana Meetup

CHUp4emVEAAXOil

Sometimes people look back at certain points in time and say – we were too early. When we started doing work on OpenData in Slovenia in 2010, there was interest but no critical mess yet (just a handful of people showed up for meetup).

But this time, it went much better. ~25 people showed up, despite not having a clear agenda – just a topic of OpenData. Many years of efforts of different individuals and organisations worked!

What we learned:

  • Slovenian Ministry of Public Information is continuing their efforts on NIO Portal and they’re developing now solutions and policies related to Open Data. There were more personal discussions on how we can help them with these efforts.
  • There were other people present from different Ministries and Government Services that were all championing Open Data within their institutions.
  • Developers are using different Open Data tools and projects within their institutions. They promised to keep us updated, once they’re ready to release it to public.
  • Journalists are still trying to figure out how to position Data Journalism/Visualisations within the failing Newspaper industry in Slovenia.
  • http://danesjenovdan.si/ are working on much better version of http://www.delajozate.si/
  • ARSO (Slovenian Weather Agency) has a Data Portal: http://gis.arso.gov.si/geoportal/catalog/main/home.page

Given the big amount of interest, I’ll try to organise another event in the fall, with talks and a bit more structure.

Special thanks to Podcrto, FMF and everyone that shared the news and attended.

(Photo by Crt Ahlin).

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.