DEV Community: Eddort

Introducing Quarkly – instrument for React devs and designers, that will help you optimize your workflow

Eddort — Sat, 07 Nov 2020 20:19:27 +0000

Hello world! Ideologically, Quarkly.io is a project dedicated to ease the life of web developers and designers. In this post, I will briefly tell you how we make it possible.

First, let’s take a look at how a typical web app workflow looks like in 2020. There is a team, it has a designer and a developer. The former creates a design spec in Figma. The latter creates a design based on this spec, and transfers the theme. Then, the developer shows the results of his work to the designer in Storybook. Designer checks and approves it – if everything is fine, he creates mockups, and the developer uses the components from the spec to markup the final layout.

So, to summarize:

Make a spec in Figma
Adjust the environment for development
Create an ui-kit
Approval
Create a Figma mockup
Markup
Adjust the assembler
Get web app

And now - let's imagine that you have optimized all these processes, and get it like this:

Designer makes specs and mockups, and the developer helps with the logic (not always necessary – there are skeleton components)
Get an app in 1 click

And all this is available right now with Quarkly!

Working on our product, we always wanted to simplify the website or app creation process, while at the same time provide a competitive end-results, with clear, easy-to-read code.

Quarkly allows creation of websites and webapps with both the mouse and the code – you have the pros of responsive editing, but at any moment you can open the code editor, and manually edit your app code manually. And everything will be synchronized perfectly.

Design tool + IDE + Module builder + Publisher

Designers can work in Quarkly the same way as they are used to in Figma – they will find many familiar things in the interface. For developers, we have a module assembler in all its glory: hmr, npm-modules.

Result of your common work is cbeing synchronized with GitHub (how could we forget versioning?), and can be published on Netlify with just one click.

Additionally, you can always export your project as “create-react-app” or to Gatsby.

So, straight from the box, you get all the necessary optimizations, important for the modern webdev, and all that – without a single line in bash :)

What powers Quarkly

In short, or project based on well-known instruments. React, for example. It looks logical – we in Quarkly believe and promote utility, speed and functionality of React, and the Quarkly itself is on React to double down on our commitment to these principles.

We choose MobX as a state-manager. I strongly recommend you to take a closer look at it, if you haven;t done it before for whatever reason. Using it, we were able to significantly speed up our development speed. Also, we made our own equivalent of Logux for it, but more powerful (Undo, Redo and versioning). In the future,we will make the source code of this module available on GitHub, and will tell you more about it.

Styles are done with css-modules – if we are talking about static ones. Dynamic ones are written using our lib Atomize.

Assembler – here everything is simple – Webpack (CRA), but with one detail: Assembler that is responsible for assembling user modules, is our own original development. We can tell you more about it if you are interested.

One of our other cool features is code generation. It is, traditionally, also our own inventions, based on Babel – but the code printing part is heavily augmented.

About the future

Our end goal – to create a useful tool, that will optimize the entire cycle of website and app development. We work on reducing the entry bar and increasing the abstractions level, so that everyone be able to create their own website – in style.

P.S.

One of our most important tasks at this moment, is forming a community. If Quarkly interests you – we will be happy to welcome you in our community on Spectrum or in Discord.

Also, today we start the Open Beta and launch on Product Hunt. We will appreciate your support! To read more, follow this link.

Why We Gave Up on the Idea of Using Styled System to Create Components, and Invented a New Wheel

Eddort — Wed, 10 Jun 2020 14:35:15 +0000

Hi everyone! My name is Alex. I’m one of the founders and lead developer at Quarkly. In this post, I’d like to share with you how the concept of atomic CSS, which we follow, together with the disadvantages of styled-system functionality (and rebass in particular) inspired us to create our own tool that we call Atomize.

A Few Words About Us

Our Quarkly project is a mix of a graphic editor (like Figma and Sketch) and website builder (similar to Webflow), complemented by features of traditional IDE. We’ll be sure to elaborate on Quarkly in a separate post, as there is plenty to tell and show, but today we’ll focus on the details of the Atomize tool.

Atomize is the heart of the whole project, as it allows us to solve tasks that would be difficult or even impossible to handle using styled-system and rebass. At the very least, the latter solution is much less elegant.

If you don’t have time to read the entire post now, check out a brief description of Atomize on our GitHub.

And to make your introduction to our tool even more fun, we are launching a contest to build React components using Atomize. You can find out more at the end of this post.

How It All Started

When we got down to developing this tool, our team’s task was to give users the opportunity to code on two components, but without the need to have a separate CSS file. This was to keep the code as minimalistic as possible while retaining all CSS features in contrast to inline styles.

The task was far from ground-breaking and, at first sight, could be easily solved with the help of styled-system (and rebass). But its functionality turned out to be limited for us. Or rather, we ran into the following problems:

inconvenient breakpoints
no option to write styles for hover, focus, and other behaviors
mechanism for working with themes wasn’t as flexible as we needed

Briefly About Atomize

Here are the key Atomize features:

minimalistic interface
option to use variables from the theme in composite CSS properties
support for hover and any other pseudo-classes
short aliases for each property (like in emmet)
opportunity to set styles for a specific breakpoint, all while keeping the markup readable

That being said, Atomize is intended for two main purposes:

creation of components that support atomic CSS and themes
creation of widgets for the interactive editing in the Quarkly project

Atomize. A User Manual

Before you start working with Atomize, you need to set up dependencies:

Atomize serves as a wrapper around a styled-component and has a similar API.

Just call the method using the name of the required element:

As a result, we get the React component that can take any CSS in the form of properties.

To make it easier to use, we developed the system of alias properties. For example, bgc === backgroundColor

To see the full list of properties and aliases, follow this link.

Plus, we added the mechanism of inheritance in React:

Themes

This, I think, should be explained in more detail.

Quarkly themes are based on CSS variables. The key feature of Quarkly themes is that variables from themes can be reused both in props and themes. You don’t need to use additional abstractions, like template functions, and no additional editing is needed by the user.

To use variables from a theme, just describe the property in the theme and call this property using the prefix "--".

The variables can be used both in JSX:

(The color #04080C is available through the --colors-dark property)

And in the theme itself:

(We reused a variable from the colors by including it in the borders theme)

The shorter syntax is used for colors in the JSX markup:

Themes have breakpoints for working with media expressions.
Any property can be prefixed with a breakpoint key name.

You can find the source code here.

Effects

The main difference between Atomize and the styled system is the "effects".

What are they and why do you need them?

Well, imagine you create a Button component, change its color and border and then… you realize you don’t know how to assign styles to hover, focus, etc. This is where effects come to the rescue.

When creating a component, just transfer an object with the configuration:

The key is the prefix in the name of the property, and the value is a CSS selector. This is the same way we implemented pseudo-classes.

Now, if you specify the hover prefix for any CSS property, it will be applied to a certain effect. For example, when you mouse over it:

You can also combine effects with media expressions:

A Few Examples

Let's build several interesting components to illustrate the features I’ve described above.

Here are two examples:

Everybody loves Pokémon, don’t they? :)

In the second example, we used most of the functionality, as well as the external API.

Wait! There's More

The second purpose of Atomize, as I mentioned above, is to create widgets in Quarkly based on custom React components.

All you have to do is wrap your component in Atomize and describe its configuration so that Quarkly can understand which properties can be interactively edited:

The configuration fields for the component look like this:

effects – defines browser pseudo-classes (hover, focus, etc.)
description – component description that will appear when you mouse over its name
propInfo – configuration of controls that will be displayed on the right panel (Props tab)

How to specify the props to be displayed on the right panel (Props tab):

Possible control options:

input
select
color
font
shadow
transition
transform
filter
background
checkbox-icon
radio-icon
radio-group
checkbox

One more example, where we’ve added our custom component to the system and can now edit it interactively:

Yay! You’ve made it to the end :) Thanks for reading!

And Now It’s Contest Time!

We put our heads together and decided there’s no better way to fuel the community's interest in our Atomize tool than by following a path that’s as simple and logical as Atomize itself — a contest!

All information about the deadline, rules and prizes is available on the official contest website.

But in short: to enter and win, you need to come up with a new (or find an existing) interesting and useful component and adapt it to Atomize requirements. And if your component gets added to Quarkly, you can count on some extra prizes from the team :)