Gsoc 2016 Neverland #4 #5

These passed two weeks were so stressful. My plan for mid-term is Neverland can build a WordPress theme.

As I mentioned in Gsoc 2016 Neverland #3 I have to choose between Sage or Underscore.
Sage is DRY but it also means that designers must seperate their theme into many smaller parts. And that also means we have more works to do.
So I choose Underscore. It’s not DRY, it’s just skeleton theme so I can adopt quickly. And one more reason I choose it because it is from .

There is a pitfall that Underscore(_s) require you rename all _s tag to your theme name I search for a underscore theme generator but there aren’t any promised packages.

Now the hardest part comes. I was thinking so much about how a WP theme is built from static html. Should I wrap the html with WP code or should I inject the html into WP code. You can think it’s not different. But it’s so much different when you actually code.
After tried and failed, I came up with a solution. I used mustache tags for both _s and html files. I used sublime and replace all the _s tags with mustache tags {{themeName}}. After that I deleted most of code in _s replace it with some tags like {{{ body }}},{{{content}}} … In blueprint files, I defines some tags like {{{article__author}}},{{{article__author--link}}} … (I follow BEM methodlogy). So basically rendered steps are like this:

  1. Neverland replaces {{themeName}} with the theme Name and copy all files from workers to buildings folder.
  2. Neverland renders {{{ body }}},{{{content}}} … with the corresponding files body.mustache,content.mustache
  3. Finally Neverland renders {{{article__author}}}, {{{article__author--link}}} … with WP tags like <?= get_the_author() ?>, <?= get_the_author_link() ?>

With this approach the designers have to care about the tags {{{article__author}}} … In the future, maybe I will use DOM parser to identify the content automatically so the designers dont have to know the tags.

And here is the results:

Screen Shot 2016-06-24 at 13.31.24

HTML theme

Screen Shot 2016-06-24 at 13.41.14

WP theme – Homepage

Screen Shot 2016-06-24 at 13.41.55

WP theme – Single post page

As you can see, it is working. But there are still many works to do.

Thanks for reading.


Gsoc 2016 Neverland #3

I tend to write a blog post every Thursday but I was late this week.

Two weeks have passed. Here is what Neverland can do for now:

  • Create a new theme:
  • Delete a theme:
  • Compile sass for a theme:
  • “Watch” a theme, but for some reasons it doesnt output the stdout from BrowserSync:
    in order to see the output, you have to run gulp:

It runs but still  need a lot of works to clean the code.

And  I was facing the harder part: how to organize the default WordPress theme. I has been thinking of the WP default themes: tweentyfourteen, tweentyfifteen, tweentysixteen … ? It was so confused so I was coming to ask my Jedi Master and his answer was:
“I would probably more base it on a framework based theme”
“What is a `framework based theme` ?”
“Like underscores, or something more specific, like sage

It was the first time I’ve ever heard about them. Sounds interesting.
Sage is more than a theme. It adopts many modern development tools like Sass, Gulp, Bower and it’s DRY. On the other hand, Underscore is just a starting simple theme.

“Your choice” he said.

It’s for this week.

p/s: I’ve just won a LaraconUS 2016 ticket but I dont have enough money to go. If you are interested, leave your email here 😉LaraconUS2016


Gsoc 2016 Neverland #2

I have been spending about one week thinking about how I should structure the templates and the themes, so you can build themes for WP, Drupal … with only one Html theme.

“It’s the hardest part” my mentor said. And if you can solve that problem, the rest will be easier.

At first I tried to find a “clean way”. I think it’s hard at the moment so I have just changed my mind. I  seperate a theme into many parts like hearder, navbar, footer … like the current Neverland does. I have a folder called architect and I put skeleton files in here. When an user want to make a new theme, they can run a command like node neverland new theme.
And the flow is: you run build command, it calls the architect, the architect reads the blueprints, and tell the workers how to build, and finally put the results in building folders.

During the creation of neverland command, I found an interesting node package . It’s useful for making command line tool.

It’s for this week.

Gsoc 2016 Neverland #1

So it started.

After recovering from the “marathon” final exams (4 subjects a week), I’m getting back to Neverland.

One crazy idea which about building Neverland again from scratch is naming folders. I call it “crazy” because I was thinking about Neverland and Peter Pan story. Yes !!! I pretended naming the folders like Tinker Bell, Hook …

Of course it’s just my imagination. My first commit on gsoc branch is almost folder structure. Now it’s more express.

Before taking the next step, I considered reading the old source code again. And I’ve discovered some problems with some packages. As I had a chatting with my mentor about npm ecosystem, it is growing quickly and yet npm packages arent fully mature. Some packages are out of date or unmaintained or having new version (it’s fast too).

The core package is which we are using is Gulp – a common package for frontend dev. We had to choose whether gulp3 or gulp4. Finally the answer was gulp3 and we are ready to update to gulp4 anytime.

And for some deprecated packages, we are looking for another packages or finding a way to hack around.

GSoC 2016 – I made it

On April 23, I received the Congratulation mail from Google.

I hadnt known about the GSoC until this event

As you can see, that event took place right before the GSoC student application deadline. After going home from the event, I was researching a lot about the organizations and projects. I was nervous about choosing a project.  So many projects and requirements …

After hours and hours, I finally decided to writing a proposal for this project:
For now I still think my proposal isnt good enough.

My mentor, Ingo, is very kind and he’ve helped me so much till now. His story about this project is also interesting .

My proposal has been accepted. I was happy and suprised.

Now let’s your code rock the summer.