React WP theme: Creating dumb components

In today’s post, we will look at Bootstrap blog template and create React dumb components out of it. Nothing too fancy, just some copy pasting and refactoring. After completing the steps in the article, we’ll be ready to create the smart components, plug the dumb ones into them and have a working blog theme!

Continue reading “React WP theme: Creating dumb components”

WP Calypso First Impression

WP Calypso is the newest addition to Automattic’s open source projects. It took both the WordPress and the web communities by storm this week — everyone is talking and writing about it now. But what it really is? Does it deserve the attention it gets?

I was surprised when I first heard about Calypso on Monday. Even more, plenty of questions started to pop up in my mind, namely:

  • How does it relate to WordPress.org?
  • How is it different from WordPress.org?
  • How can I use it on my self-hosted WP blog?
  • Why should I care? It’s an Automattic’s project after all.

…and some others, especially more technical ones. Well, I’ll do my best and will explain “everything” in today’s article. Have a nice read!

Continue reading “WP Calypso First Impression”

React WP theme: Smart vs Dumb components + React Router

In the third installment of our “How to make a React-powered WP theme” tutorial, we create the starting point of our React-powered WordPress theme. I’ll show you what all we need to import in order to have a working application. We’ll also talk about how to properly divide the React components into smart and dumb ones.

Continue reading “React WP theme: Smart vs Dumb components + React Router”

Impressions from the 1st day of Reactive2015

I just came home from the first day of the two-day conference about reactive programming and the React ecosystem. Man, I’m pretty pumped up! It was magnificent, and my brain hurts a bit. Here are my feelings from the day:

Figure 1: Not everything is a JSON document. Tweet link
Figure 1: Not everything is a JSON document. Tweet link

Continue reading “Impressions from the 1st day of Reactive2015”

React WP theme: structure, Node packages and Webpack

In the second part of our tutorial, we’ll be talking about the theme’s initial folder/file structure, installing required Node packages, configuring Webpack and setting up a Node development server with hot reloading. I’ll show you how to properly bootstrap a Redux-powered WordPress theme. If you want to see how the project will look at the end of this article, look at its GitHub repository (branch 1_structure_node_webpack).

Continue reading “React WP theme: structure, Node packages and Webpack”

Learn React + Flux at Udemy for free + more React goodies

React is everywhere. Everybody is talking about it. Companies are migrating their front-ends to React. Applying for a JavaScript programmer position? Better to know React then!

In all seriousness, React is an awesome library for building UIs. If you use Facebook, then you have already seen it in action — the whole chat is written in it. But what is it all about? Well, I’ve written about it very briefly before (link, link). The Internet is full of articles describing its prowess. However, there are plenty of people who prefer watching videos, listening to an experienced developer explaining it, instead of having to spend weeks of hard reading. And I got something special for you. Two things actually.

Continue reading “Learn React + Flux at Udemy for free + more React goodies”

React single-page WordPress REST API theme tutorial

Uh-oh, such a buzz-wordy title. I know, I know. But it’s true — I’m going to publish a series of articles on building a simple single-page WordPress theme powered by React, WP REST API, and other bleeding-edge front-end technologies. The tutorial will be focused primarily on the JavaScript things, pushing design, accessibility and flexibility sideways. It will contain a lot of new technologies and things so don’t worry about not learning something new.

Continue reading “React single-page WordPress REST API theme tutorial”

Front-end development with WordPress

Although WordPress is created in PHP, nowadays, a lot of themes and plugins make use of JavaScript to create feature-rich, responsive, client-side sites. Some go as far as to use WordPress only as a store of data, making the whole site a single page (SPA) and everything in JavaScript. The WP REST API project, which simplifies the communication between front-end and back-end of a WordPress-powered site, helps this trend quite a lot. Although there are plenty of sites and tutorials describing how to create SPAs, for newcomers it is a jungle of tools, frameworks, libraries and other stuff. In this article, I’ll give you an overview of the current state of front-end web development and describe my story of how I got to use them. For more in-depth texts, follow the links and Google the technologies.

Continue reading “Front-end development with WordPress”

How to work with WordPress Trac

Undoubtedly, WordPress Core would benefit from a larger number of active developers. The system, especially Trac1, might be, however, too complicated for newcomers to work with. That goes for me too. Do you know what’s the best way to learn something? Write an article about it, of course. That’s what I’m going to do: write a post about what the Trac is, how to use it and so on. I’m going to use a lot of screenshots to accomplish the task with an ease.

Figure 1: Trac homepage
Figure 1: Trac homepage

Continue reading “How to work with WordPress Trac”

CSS the right way with Sass preprocessor

Sass is awessome. Since our first date, I’ve been (ab)using her in all the projects. She gives you superhuman abilities, far beyond the reach of what classical CSS has to offer. Sadly, she can’t be found in many WordPress themes and I don’t understand why. Is she not hot enough for the majority of WordPress developers? Perhaps she too complicated for them. Luckily for you, my dear readers, I’ve lived with her long enough to experience all her quirks and me being a friendly fella, I’m going to share them with you.

sass-logo

Alright, enough fun, let’s get serious. Ever wondered how it’s possible that some front-end developers are that exceptionally fast and always smiling? In today’s article, I’m going to teach you their secret weapons. We’re going to talk about Sass, the most popular CSS preprocessor; what, why and how. Don’t worry too much, I assure you Sass is quite easy to understand and learn to use. If you have some CSS skills, you’ll find Sass straightforward to get hold of.
Continue reading “CSS the right way with Sass preprocessor”