Category: JavaScript

Buddy Webinar #14: WordPress Block Development

Over two weeks ago, I had the pleasure to join Maciek Palmowski (WordPress Ambassador at Buddy) to record the 14th episode of Buddy Webinar. We presented how to automate block development to elevate your WordPress projects to a higher level. This is what we covered:

  • How to start WordPress block development.
  • How to leverage JavaScript developer tools for WordPress plugin and block development.
  • How to automate your development workflow to maximize confidence in the codebase and monitor its health.
  • How to configure a pipeline in Buddy to automate the development process.
Continue reading Buddy Webinar #14: WordPress Block Development

WordSesh APAC 2020

It’s been a while since I gave a talk at the WordSesh APAC online conference in March 2020. Initially, I had nearly the same presentation prepared to deliver on the stage at the first-ever WordCamp Asia event a few weeks earlier. Unfortunately, the conference got canceled due to the COVID-19 pandemic concerns, and I didn’t have a chance to visit Bangkok, Thailand.

I presented how the JavaScript ecosystem has flourished in recent years, creating a wide range of opportunities for contributors working on the Gutenberg project. I also explained many of the architectural decisions made to ensure the transition is as smooth as possible for those familiar with developing WordPress products and services.

Continue reading WordSesh APAC 2020

WordCamp India 2021

My lighting talk from the WordCamp India online event is now available on YouTube. I presented how to make the most of the scaffolding command, which will let you save hours when building the first block. I also talked about the set of WordPress block development tools from the team behind Gutenberg that was designed to make the whole experience more streamlined.

The presentation was largely inspired by an article published on my blog two months ago. If you prefer reading, check out the How to Start Block Development with Scaffolding post.

Continue reading WordCamp India 2021

How to Start Block Development with Scaffolding

Can you believe that it’s been two years already when Gutenberg got included in the WordPress core? In the meantime, the block editor has matured significantly. Using blocks steadily remains the primary approach to enrich the way users create content with WordPress. Some new exciting options let you defer the decision to build custom blocks. Those are among others  Block Directory, block patterns, or the preexisting reusable block feature. Indeed, they speed up the process of publishing posts and pages. However, I don’t plan to discuss here these types of capabilities.

Instead, I want to focus on the case when you decide to build a block. You might ask, why would you want to do it? Before anything else, it can be just for fun or to learn what the block editor has to offer. Later, it usually doesn’t take much time to discover that the WordPress core is missing a service integration you want or a layout element you often use. In the future, possibilities will become endless when the block-based full site editing rolls out.

Continue reading How to Start Block Development with Scaffolding

WPBlockTalk April 2020

A first WPBlockTalk live event happened two weeks ago, and it was a blast! You could see speakers from all across the WordPress community, from theme designers to plugin developers to the people who’ve been key to designing and developing the block editor itself. I played my role in it, and you can already watch two talks where I appeared.

Continue reading WPBlockTalk April 2020

Adding Formatting Buttons to the Block Toolbar in Gutenberg

In April last year, I had a lot of fun doing a live coding session for the WordPress Block Editor. The demo was hosted by Birgit Pauli-Haack as part of the Gutenberg Times, Live Q & A series. I paired with Zac Gordon, an educator at JavaScript for WordPress with a ton of Javascript online courses for WordPress developers. This is what we covered:

We explored how to customize format controls like bold or italics and extend the block toolbar with your control allowing to change the color of the selected text.

Continue reading Adding Formatting Buttons to the Block Toolbar in Gutenberg

JavaScript for WordPress Conference 2019

In my presentation from the JavaScript for WordPress Conference, I talked about how you can grow your JavaScript and related skills through building with WordPress. You can watch the recorded video on YouTube.

There is also a written version of the same talk published on my blog a few months back. If you prefer reading, check out the Growing JavaScript Skills with WordPress post.

Continue reading JavaScript for WordPress Conference 2019

Growing JavaScript Skills with WordPress

This is a written version of the talk I gave at the JavaScript for WordPress conference on July 12th.

WordPress has always been recognized as a very welcoming platform for developers at any level of expertise. The block editor introduced in WordPress 5.0 release is not only an entirely new editing experience for users, but it also redefines the way plugins and themes are developed.

In this post, I want to explain many of the architectural decisions that have sought to make the transition as smooth as possible for those familiar with WordPress development. I will discuss all the tooling that the Gutenberg project uses behind the scenes to benefit from the massive growth of the JavaScript ecosystem. Finally, I’d like to demonstrate how you can leverage the same software in your projects using the @wordpress/scripts npm package to improve your skills.

Continue reading Growing JavaScript Skills with WordPress

Starter kit and reusable scripts

The JavaScript ecosystem has reached a very interesting point in its history. There are members of the community overwhelmed by the learning curve required to start a new project and based on that they express JavaScript fatigue. There are also contradicting opinions announcing renaissance of JavaScript because it became truly general purpose language and dominated front-end development. So the question is, how to take advantage of all existing tools but at the same time change the first impression in a way that makes the following joke irrelevant:

Continue reading Starter kit and reusable scripts

Migrating to Jest test runner

I have already shared my comparison of two JavaScript testing solutions where I admitted that I favor Jest over Mocha. Back then, I listed all major differences between those tools summarized with advantages and disadvantages of migrating to Jest:

Pros:

  • Simpler API, less boilerplate code.
  • Flexible and easy configuration.
  • Test files executed in isolation.
  • Advanced watch mode.
  • Snapshots support = easier start with testing.
  • Code coverage.

Cons:

  • Another migration.
  • Mocha has still a bit better performance (according to my quick tests).

My analysis got very positive feedback, with only a few little concerns, so I got encouraged to take action and verify the assumptions stated. I picked two different projects to play with to ensure both of them will uniformly benefit from using Jest.

Continue reading Migrating to Jest test runner