It’s pretty great but aside from the WordPress handbook, there are only few tutorials available for Gutenberg development as of the moment. This is the main reason I’ve decided to pitch in and help out with creating tutorials starting from custom attributes and controls. These tutorials are the ones I’ve learned by actively participating on Gutenberg development on Github. I also used these methods on CoBlocks and EditorsKit plugins.

Bit.dev and Storybook are two quite different tools. At first glance, it might seem that both provide a visual showcase for your UI components, and can be used to visually document and organize UI components. That is true, but that’s only a small part of what each of these tools can provide.

Using multiples of 8 to define dimensions, padding, and margin of elements.

Я уже несколько лет живу в Шотландии. На днях я опубликовал в своем Facebook-е серию статей про плюсы и минусы жизни тут. Статьи нашли большой отклик среди моих друзей, и поэтому я решил, что это может быть интересно более широкому IT-сообществу. Так что — выкладываю на хабре для всех желающих. Я смотрю с “программистской” точки зрения, поэтому часть пунктов в моих плюсах и минусах будет специфичной для программистов, хотя многое применимо к жизни в Шотландии независимо от профессии.

When design systems are the source of truth and subscribers have easy access to code, it's important that code is well-tested. Lindsey shares how we unit test our Sass and how you can too.

Andrey Sitnik on the past, the present and the future of PostCSS: a state of the union address on the 5th anniversary.

The core of React is components. You can nest these components like you would nest HTML tags, which makes is easy to write JSX since it resembles markup.

When I first learned React, I thought “Use props.children and that’s it. I know everything about children” Boy, was I wrong.

Because we’re working with JavaScript, we can change children. We can send special properties to them, decide if we want them to render or not and generally manipulate them to our will. Let’s dig into the power of children in React.

We assessed different tools and products, settling on the following tech stack:

• Gatsby
• Storybook
• Prismic
• Shopify
• Firebase

Parcel is a very powerful compiling/process/whatever JavaScript tool that can automate your entire workflow and very easily. It’s based on a zero-config ideology. It’s not entirely zero-config but it has “sane” configs for 90% of use-cases.

Recently I had some fun implementing an image carousel for Pinafore. The requirements were pretty simple: users should be able to swipe horizontally through up to 4 images, and also pinch-zoom to get a closer look.

In this blog post we are going to look at another icon library, FontAwesome, and how to add it to your Ionic application. FontAwesome is a popular icon library and provides over 1500 icons for free. For $60 a year you get additional access to more than 3500 icons, total over 5000 icons.

Following this pole on Twitter I thought I’d take a look at spinning up a project using Parceljs.

I’ve used Gulp for years and Grunt before that. Parcel seemed like a logical progression. That, plus, I still don’t have the stomach to try and get Webpack working!

Parcel is touted as ‘zero configuration’ and although that is largely true, if you are moving from Gulp there are definitely some things you need to keep in mind.

The best request is the one that never happens: in the fight for fast websites, avoiding the network is far better than hitting the network at all. To this end, having a solid caching strategy can make all the difference for your visitors.

That being said, more and more often in my work I see lots of opportunities being left on the table through unconsidered or even completely overlooked caching practices. Perhaps it’s down to the heavy focus on first-time visits, or perhaps it’s a simple lack of awareness and knowledge? Whatever it is, let’s have a bit of a refresher.

Recommended by The Bell

Упражнения для глаз с точки зрения доказательной медицины

This article is not intended for seasoned React pros, but rather, those of us who make websites for a living and are curious how React can help us reason about updating user interfaces. I’ve been intrigued by React for some time, and now that it has gained some standing in the community as well as good reviews, the time to learn it seemed justified. There are so many new technologies constantly emerging in front end development that it’s sometimes hard to know if effort into learning something new will pay off. I’ll spend this article going over what I think some of the most valuable practical takeaways are so that you can get started.

Ever made an app that is impossible to use? There's a chance you have. Technology users are a diverse bunch, which means that some of your users are using your app much differently than you WOULD EXPECT. That's where accessibility comes in: Designing for everyone regardless of disability. Here are some tips and resources to get you started.

Modern frameworks have brought on a paradigm shift for developers in which products are built by combining a series of smaller components into complex systems which can adapt to different contexts and devices. This makes the code easier to maintain, and the entire system more flexible.

For a variety of legitimate reasons, many designers have not caught on to this paradigm shift as quickly as developers. We are missing a mental model for creating the pieces that make up these interfaces independently from their environment/pages/screens/viewports etc.

One such approach is Atomic Design.

If you’ve signed in to FutureLearn recently, you’ll notice that what were your “My courses” are now “Your courses”. Our Interaction Designer Alla Kholmatova explains the thinking behind this user interface (UI) change. via Pocket

Bret Brautigam wrote a thought provoking article on how adding a human voice to a computer could be a form of skeuomorphism. This idea made me wonder… Is any form of conversational design Skeuomorph to some extent? via Pocket