Category: JavaScript

How to Start Block Development with Scaffolding

Can you believe that it’s been two years already – long before the pandemic started – when Gutenberg got included in the WordPress core. In the meantime, the block editor has matured tremendously. As of today, it offers several options that let you defer the decision to build custom blocks. I recommend you get familiar with functionalities like Block Directory and block patterns. In addition to that, it was always possible to use UI controls to share content between posts with a reusable block feature.

However, in this tutorial, I want to focus on the case when you decide to build a block yourself. I’m about to present the official WordPress block development tools designed to make the whole process more streamlined.

Continue reading How to Start Block Development with Scaffolding

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 2019 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 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

React Native EU 2017 – my selective recap

I had an opportunity to attended React Native EU 2017 conference last month. This 2 days long event took place in my hometown Wrocław, Poland. It was a very interesting experience for me because I’m a frontend developer. I don’t have any working experience with React Native and the only mobile project I worked on was built using Apache Cordova. Anyway, I found many of the talks very attractive and I wanted to highlight some of them in this post.

Continue reading React Native EU 2017 – my selective recap

Picking Jest over Mocha – testing tools comparison

At Automattic we use Mocha to run all tests written for Calypso project which powers WordPress.com. It also includes end-to-end tests, which live in their own repository. We have been using this setup for over 3 years now. I think it is a good moment to revisit this choice. I found this unit testing tools comparison very helpful when evaluating alternatives. I strongly agree with the conclusions shared by Martin Olsson in his article:

Staying with Javascript, I think it’s hard to ignore the momentum behind Jest. I would be awesome if someone fixed #2059 though. Then again, Mocha seems to work well enough for a lot of people.

Continue reading Picking Jest over Mocha – testing tools comparison

Time to get interactive as a performance measure

I have already published one post about Progressive Web Apps (PWA) a few months back. It looks like Google is investing a lot of efforts to make it a new standard of building websites. At the last Google I/O, there were a few announcements made related to making PWA a default feature in a few popular boilerplates and CLIs for libraries like React, Preact, Polymer or Vue. I recommend watching the following presentation by Addy Osmani:

Continue reading Time to get interactive as a performance measure

React as a cross-platform UI

I got very excited when watching this talk for React Europe by Leland Richardson:

Continue reading React as a cross-platform UI