r/graphic_design - How to keep consistent spacing of elements within boxes?
Strategy

How to keep consistent spacing of elements within boxes? : g…


I am learning to use Affinity Publishing and I need to align text within these boxes. The problem I have is I don’t know how to always keep the text box the same distance from the top and left sides of the box.

Any ideas or tips? In the past, I would manually draw out a small line and lay that out between elements to keep them consistent. But, I feel there must be an easier way.

I also don’t know how to properly ask this question, is there a term for what I’m looking for?

r/graphic_design - How to keep consistent spacing of elements within boxes?

The text here are not the same distance from the box they are contained in. How do I make them consistently spaced?



Source link

Visual components of Clarity library
Strategy

The Most Popular Angular UI Libraries To Try in 2021


Introduction

Angular is one of the most popular JavaScript web frameworks. Angular’s approach to organizing the programmer’s work involves hiding the execution of various service operations in the depths of the framework, giving the developer convenient tools built on the basis of internal mechanisms. Angular, like React, encourages the use of components and splitting the application interface into small reusable chunks.

We’ve made a list of libraries for Angular, which you may find useful in your next or current project. Most of them are designed for Angular2+, however, some of them are suitable for older versions of the framework. One of the advantages here is that you can extract individual components from Angular libraries and use them in a project without installing the entire library.

Clarity

Clarity is an open-source design system created by VMware that has 6.2K stars on GitHub. It is a combination of UX design guidelines, an HTML/CSS framework, and Angular components. Clarity provides developers with a rich set of high-performance data-bound components. A huge number of interactive elements can be implemented by using this library. Among them, there are accordion, date picker, login, signpost, timeline, toggle, and many others.

Visual components of Clarity library

Visual components of Clarity library (source: https://clarity.design/) 

Login component of Clarity library

Login component of Clarity library (source: https://clarity.design/) 

Timeline component of Clarity library

Timeline component of Clarity library (source: https://clarity.design/) 

Material

Material is an official Angular component library that implements Google’s Material Design concepts. This library has 21.2K stars on GitHub. These UI components can be thought of as code examples, written according to the guidelines of the Angular development team. Among the interactive elements that can be implemented by using this library, there are autocomplete, form field, progress spinner, slider, stepper, tabs, and others.

Visual components of Material library

Visual components of Material library (source: https://material.angular.io/) 

NGX Bootstrap

The NGX Bootstrap library has about 5.3K stars on GitHub. Here you can find basic components that implement the capabilities of the Bootstrap template written specifically for Angular. It is suitable for developing desktop and mobile applications and is designed with extensibility and adaptability in mind. One of the features of this library is a variety of element forms. Among the element forms that could be added to your application, accordion with custom HTML, various forms of carousels, pager pagination, and different ratings deserve special mention.

Custom HTML component of NGX Bootstrap library

Custom HTML component of NGX Bootstrap library (source: https://valor-software.com/ngx-bootstrap/) 

Basic carousel component of NGX Bootstrap library

Basic carousel component of NGX Bootstrap library (source: https://valor-software.com/ngx-bootstrap/) 

Prime NG

Prime NG is a library that includes an extensive set of more than 70 UI components. At the same time, different types of styling are available here, for example, Material Design and Flat Design. Prime NG has approximately 6.6K stars on GitHub and is used by companies such as eBay, Fox, and many others. All this suggests that this library is worth the attention of those who are looking for a suitable set of components for their project. The library also includes the following features: different forms of fields, various buttons, menu forms, messages, toasts, a timeline, and many others.

Forms of Field component of Prime NG library

Forms of Field component of Prime NG library (source: https://www.primefaces.org/primeng/) 

Forms of Button component of Prime NG library

Forms of Button component of Prime NG library (source: https://www.primefaces.org/primeng/)

Forms of Menu component of Prime NG library

Forms of Menu component of Prime NG library (source: https://www.primefaces.org/primeng/) 

The message, Toast and Timeline components of Prime NG library

The message, Toast and Timeline components of Prime NG library (source: https://www.primefaces.org/primeng/) 

NG Bootstrap

NG Bootstrap, a popular library that includes Bootstrap 4 style components for Angular, has around 7.7K stars on GitHub. It serves as a replacement for the angular-UI Bootstrap project, which is no longer supported. NG Bootstrap has a high level of test coverage and no third-party JS dependencies. The features that deserve to be highlighted are datepicker with various options, different progress bars, basic table stylings, different toasts, and others.

Datepicker component of NG Bootstrap library

Datepicker component of NG Bootstrap library (source: https://ng-bootstrap.github.io/) 

Progress bar component of NG Bootstrap library

Progress bar component of NG Bootstrap library (source: https://ng-bootstrap.github.io/)

Table component of NG Bootstrap library

Table component of NG Bootstrap library (source: https://ng-bootstrap.github.io/)

Forms of Toast component of NG Bootstrap library

Forms of Toast component of NG Bootstrap library (source: https://ng-bootstrap.github.io/)

Teradata Covalent UI Platform

Teradata Covalent UI Platform has over 2.2K stars on GitHub. This library allows making code more easy-to-read with the help of style guides and design patterns. Thanks to the present configuration of this platform, developers can concentrate on the app functionality rather than on customization, and make the development process faster.

The Atomic Design Principles involve modular design and unite smaller components into bigger ones. This platform successfully follows these principles and, as an example, unites buttons into forms. Among other interesting features, there are user profiles, breadcrumbs, steppers, a text editor, and others.

User profile component of Teradata Covalent UI Platform library

User profile component of Teradata Covalent UI Platform library (source: https://teradata.github.io/covalent/v3/#/)

Stepper component of Teradata Covalent UI Platform library

Stepper component of Teradata Covalent UI Platform library (source: https://teradata.github.io/covalent/v3/#/)

Text editor component of Teradata Covalent UI Platform library

Text editor component of Teradata Covalent UI Platform library (source: https://teradata.github.io/covalent/v3/#/)

Nebular

Nebular has 6.9K stars on GitHub. It is a customizable component library that makes the application development process much simpler. Nebular has six visual themes and a big number of different customizable components. Also, it is worth mentioning that it has security modules that offer authentication and security layers for APIs. Among its components, there are steppers, spinners, chats, registration forms, and others.

Stepper component of Nebular library

Stepper component of Nebular library (source: https://akveo.github.io/nebular/)

Spinner component of Nebular library

Spinner component of Nebular library (source: https://akveo.github.io/nebular/)

Chat component of Nebular library

Chat component of Nebular library (source: https://akveo.github.io/nebular/)

Registration form component of Nebular library

Registration form component of Nebular library (source: https://akveo.github.io/nebular/)

Onsen UI

The Onsen UI Library is a popular solution for developing hybrid and mobile apps for Android and iOS by using JavaScript. This library has 8.3K stars on GitHub, it uses bindings and allows you to use different visual styles.

Among other Onsen UI features, there are action sheets, alert dialogs, various buttons, popovers, and many others.

Action sheet component of Onsen UI library

Action sheet component of Onsen UI library (source: https://onsen.io/angular2/)

Alert dialog component of Onsen UI library

Alert dialog component of Onsen UI library (source: https://onsen.io/angular2/)

Forms of Button component of Onsen UI library

Forms of Button component of Onsen UI library (source: https://onsen.io/angular2/)

Popover component of Onsen UI library

Popover component of Onsen UI library (source: https://onsen.io/angular2/)

NG-Zorro

Components from the NG-Zorro library are fully typed in TypeScript. The goal of this project is to provide developers with high-end components for creating Ant Design style user interfaces. This interesting library was created by Chinese developers, it has about 7.4K stars on GitHub.

Its features include menu bars, page headers, sliders, avatars, and many others.

Forms of Page Header component of NG-Zorro library

Forms of Page Header component of NG-Zorro library (source: https://ng.ant.design/docs/introduce/en)

Forms of Slider component of NG-Zorro library

Forms of Slider component of NG-Zorro library (source: https://ng.ant.design/docs/introduce/en)

Forms of Avatar component of NG-Zorro library

Forms of Avatar component of NG-Zorro library (source: https://ng.ant.design/docs/introduce/en)

Vaadin

Visual elements from the Vaadin library are designed to bridge the gap between Angular components and Polymer elements. This library supports Material Design and contains components suitable for mobile and desktop development. It should be noted that its components are stored in separate repositories.

Other notable features are split layouts, buttons, app layouts, upload Forms, and many others.

App Layout component of Vaadin library

App Layout component of Vaadin library (source: https://vaadin.com/)

NG Semantic-UI

The NG Semantic-UI library includes 27 components and has about 1K stars on GitHub. It is based on the popular Semantic-UI front-end solution, presented as components for Angular applications.

It includes such tools as cards, loaders, accordions, menus, and many others.

Card component of NG Semantic-UI library

Card component of NG Semantic-UI library (source: https://ng-semantic.herokuapp.com/#/)

Forms of Menu component of NG Semantic-UI library

Forms of Menu component of NG Semantic-UI library (source: https://ng-semantic.herokuapp.com/#/)

NG2 Charts

The NG2 Charts is a library, which has 1.9K stars on GitHub. It gives the developer Angular directives for creating six types of charts, with the properties based on chart.js. This library can be used to render large datasets and display lists.

It supports line charts, bar charts, doughnut charts, radar charts, pie charts, polar area charts, bubble charts, scatter charts, and others.

Line Chart of NG2 Charts library

Line Chart of NG2 Charts library (source: https://valor-software.com/ng2-charts/#/LineChart)

Bar Chart of NG2 Charts library

Bar Chart of NG2 Charts library (source: https://valor-software.com/ng2-charts/#/LineChart)

Doughnut Chart of NG2 Charts library

Doughnut Chart of NG2 Charts library (source: https://valor-software.com/ng2-charts/#/LineChart)

Radar Chart of NG2 Charts library

Radar Chart of NG2 Charts library (source: https://valor-software.com/ng2-charts/#/LineChart)

Pie Chart of NG2 Charts library

Pie Chart of NG2 Charts library (source: https://valor-software.com/ng2-charts/#/LineChart)

Polar Area Chart of NG2 Charts library

Polar Area Chart of NG2 Charts library (source: https://valor-software.com/ng2-charts/#/LineChart)

Bubble Chart of NG2 Charts library

Bubble Chart of NG2 Charts library (source: https://valor-software.com/ng2-charts/#/LineChart)

Scatter Chart of NG2 Charts library

Scatter Chart of NG2 Charts library (source: https://valor-software.com/ng2-charts/#/LineChart)

Conclusion

Despite the fact that usage of Angular is reduced, according to the latest research of State of JS, many professionals still prefer Angular development thanks to its advantages over other frameworks. So, it is very important for future applications to follow all the design trends and be on the same wavelength as users. With the help of libraries that allow you to implement visual elements fitting your application, you can create an outstanding app that your users will love. 



Source link

r/graphic_design - Client wants opposite logos for regular and b&w versions?
Strategy

Client wants opposite logos for regular and b&w versions? : …


I’m doing an internship for a nonprofit where I’m building their brand. I made a basic graphic to illustrate the context.

I presented my client (5 people) two logo concepts, Logo A and Logo B; they’re exactly the same, except A is outlined while B is filled. They want B1 for their regular logo but prefer A2 for the b&w version.

If I agree to their request, will it be weird/incorrect in the long run? If so, how can I convince them otherwise? I’ve yet to come across logos before where a regular filled version has an outlined b&w version.

r/graphic_design - Client wants opposite logos for regular and b&w versions?



Source link

Looking to identify this logo
Strategy

Looking to identify this logo


Looking to identify this logo

Sorry for the blurry picture, I'm looking to identify this "The Rocket" patch. Looks like it's from the 60s or 70s, I've googled for hours and haven't found anything.

https://preview.redd.it/yw0byw3lk6s61.png?width=1450&format=png&auto=webp&s=0d9efdfd6c564b0dc936f27edc8aa432726a257b

submitted by /u/yodableu
[comments]



Source link

Headless Form Submission With the WordPress REST API
Strategy

Headless Form Submission With the WordPress REST API


If you’re building a WordPress site, you need a good reason not to choose a WordPress form plugin. They are convenient and offer plenty of customizations that would take a ton of effort to build from scratch. They render the HTML, validate the data, store the submissions, and provide integration with third-party services.

But suppose we plan to use WordPress as a headless CMS. In this case, we will be mainly interacting with the REST API (or GraphQL). The front-end part becomes our responsibility entirely, and we can’t rely anymore on form plugins to do the heavy lifting in that area. Now we’re in the driver’s seat when it comes to the front end.

Forms were a solved problem, but now we have to decide what to do about them. We have a couple of options:

  • Do we use our own custom API if we have such a thing? If not, and we don’t want to create one, we can go with a service. There are many good static form providers, and new ones are popping up constantly.
  • Can we keep using the WordPress plugin we already use and leverage its validation, storage, and integration?

The most popular free form plugin, Contact Form 7, has a submission REST API endpoint, and so does the well-known paid plugin, Gravity Forms, among others.

From a technical standpoint, there’s no real difference between submitting the form‘s data to an endpoint provided by a service or a WordPress plugin. So, we have to decide based on different criteria. Price is an obvious one; after that is the availability of the WordPress installation and its REST API. Submitting to an endpoint presupposes that it is always available publicly. That’s already clear when it comes to services because we pay for them to be available. Some setups might limit WordPress access to only editing and build processes. Another thing to consider is where you want to store the data, particularly in a way that adheres to GPDR regulations.

When it comes to features beyond the submission, WordPress form plugins are hard to match. They have their ecosystem, add-ons capable of generating reports, PDFs, readily available integration with newsletters, and payment services. Few services offer this much in a single package.

Even if we use WordPress in the “traditional” way with the front end based on a WordPress theme, using a form plugin’s REST API might make sense in many cases. For example, if we are developing a theme using a utility-first CSS framework, styling the rendered form with fixed markup structured with a BEM-like class convention leaves a sour taste in any developer’s mouth.

The purpose of this article is to present the two WordPress form plugins submission endpoints and show a way to recreate the typical form-related behaviors we got used to getting out of the box. When submitting a form, in general, we have to deal with two main problems. One is the submission of the data itself, and the other is providing meaningful feedback to the user.

So, let’s start there.

The endpoints

Submitting data is the more straightforward part. Both endpoints expect a POST request, and the dynamic part of the URL is the form ID.

Contact Form 7 REST API is available immediately when the plugin is activated, and it looks like this:

https://your-site.tld/wp-json/contact-form-7/v1/contact-forms/<FORM_ID>/feedback

If we’re working with Gravity Forms, the endpoint takes this shape:

https://your-site.tld/wp-json/gf/v2/forms/<FORM_ID>/submissions

The Gravity Forms REST API is disabled by default. To enable it, we have to go to the plugin’s settings, then to the REST API page, and check the “Enable access to the API” option. There is no need to create an API key, as the form submission endpoint does not require it.

The body of the request

Our example form has five fields with the following rules:

  • a required text field
  • a required email field
  • a required date field that accepts dates before October 4, 1957
  • an optional textarea
  • a required checkbox

For Contact Form 7’s request’s body keys, we have to define them with the form-tags syntax:

{
  "somebodys-name": "Marian Kenney",
  "any-email": "[email protected]",
  "before-space-age": "1922-03-11",
  "optional-message": "",
  "fake-terms": "1"
}

Gravity Forms expects the keys in a different format. We have to use an auto-generated, incremental field ID with the input_ prefix. The ID is visible when you are editing the field.

{
  "input_1": "Marian Kenney",
  "input_2": "[email protected]",
  "input_3": "1922-03-11",
  "input_4": "",
  "input_5_1": "1"
}

Submitting the data

We can save ourselves a lot of work if we use the expected keys for the inputs’ name attributes. Otherwise, we have to map the input names to the keys.

Putting everything together, we get an HTML structure like this for Contact Form 7:

<form action="https://your-site.tld/wp-json/contact-form-7/v1/contact-forms/<FORM_ID>/feedback" method="post">
  <label for="somebodys-name">Somebody's name</label>
  <input id="somebodys-name" type="text" name="somebodys-name">
  <!-- Other input elements -->
  <button type="submit">Submit</button>
</form>

In the case of Gravity Forms, we only need to switch the action and the name attributes:

<form action="https://your-site.tld/wp-json/gf/v2/forms/<FORM_ID>/submissions" method="post">
  <label for="input_1">Somebody's name</label>
  <input id="input_1" type="text" name="input_1">
  <!-- Other input elements -->
  <button type="submit">Submit</button>
</form>

Since all the required information is available in the HTML, we are ready to send the request. One way to do this is to use the FormData in combination with the fetch:

const formSubmissionHandler = (event) => {
  event.preventDefault();

  const formElement = event.target,
    { action, method } = formElement,
    body = new FormData(formElement);

  fetch(action, {
    method,
    body
  })
    .then((response) => response.json())
    .then((response) => {
      // Determine if the submission is not valid
      if (isFormSubmissionError(response)) {
        // Handle the case when there are validation errors
      }
      // Handle the happy path
    })
    .catch((error) => {
      // Handle the case when there's a problem with the request
    });
};

const formElement = document.querySelector("form");

formElement.addEventListener("submit", formSubmissionHandler);

We can send the submission with little effort, but the user experience is subpar, to say the least. We owe to users as much guidance as possible to submit the form successfully. At the very least, that means we need to:

  • show a global error or success message,
  • add inline field validation error messages and possible directions, and
  • draw attention to parts that require attention with special classes.

Field validation

On top of using built-in HTML form validation, we can use JavaScript for additional client-side validation and/or take advantage of server-side validation.

When it comes to server-side validation, both Contact Form 7 and Gravity Forms offer that out of the box and return the validation error messages as part of the response. This is convenient as we can control the validation rules from the WordPress admin.

For more complex validation rules, like conditional field validation, it might make sense to rely only on the server-side because keeping the front-end JavaScript validation in sync with the plugins setting can become a maintenance issue.

If we solely go with the server-side validation, the task becomes about parsing the response, extracting the relevant data, and DOM manipulation like inserting elements and toggle class-names.

Response messages

The response when there is a validation error for Contact Form 7 look like this:

{
  "into": "#",
  "status": "validation_failed",
  "message": "One or more fields have an error. Please check and try again.",
  "posted_data_hash": "",
  "invalid_fields": [
    {
      "into": "span.wpcf7-form-control-wrap.somebodys-name",
      "message": "The field is required.",
      "idref": null,
      "error_id": "-ve-somebodys-name"
    },
    {
      "into": "span.wpcf7-form-control-wrap.any-email",
      "message": "The field is required.",
      "idref": null,
      "error_id": "-ve-any-email"
    },
    {
      "into": "span.wpcf7-form-control-wrap.before-space-age",
      "message": "The field is required.",
      "idref": null,
      "error_id": "-ve-before-space-age"
    },
    {
      "into": "span.wpcf7-form-control-wrap.fake-terms",
      "message": "You must accept the terms and conditions before sending your message.",
      "idref": null,
      "error_id": "-ve-fake-terms"
    }
  ]
}

On successful submission, the response looks like this:

{
  "into": "#",
  "status": "mail_sent",
  "message": "Thank you for your message. It has been sent.",
  "posted_data_hash": "d52f9f9de995287195409fe6dcde0c50"
}

Compared to this, Gravity Forms’ validation error response is more compact:

{
  "is_valid": false,
  "validation_messages": {
    "1": "This field is required.",
    "2": "This field is required.",
    "3": "This field is required.",
    "5": "This field is required."
  },
  "page_number": 1,
  "source_page_number": 1
}

But the response on a successful submission is bigger:

{
  "is_valid": true,
  "page_number": 0,
  "source_page_number": 1,
  "confirmation_message": "<div id='gform_confirmation_wrapper_1' class='gform_confirmation_wrapper '><div id='gform_confirmation_message_1' class='gform_confirmation_message_1 gform_confirmation_message'>Thanks for contacting us! We will get in touch with you shortly.</div></div>",
  "confirmation_type": "message"
}

While both contain the information we need, they don‘t follow a common convention, and both have their quirks. For example, the confirmation message in Gravity Forms contains HTML, and the validation message keys don’t have the input_ prefix — the prefix that’s required when we send the request. On the other side, validation errors in Contact Form 7 contain information that is relevant only to their front-end implementation. The field keys are not immediately usable; they have to be extracted.

In a situation like this, instead of working with the response we get, it’s better to come up with a desired, ideal format. Once we have that, we can find ways to transform the original response to what we see fit. If we combine the best of the two scenarios and remove the irrelevant parts for our use case, then we end up with something like this:

{
  "isSuccess": false,
  "message": "One or more fields have an error. Please check and try again.",
  "validationError": {
    "somebodys-name": "This field is required.",
    "any-email": "This field is required.",
    "input_3": "This field is required.",
    "input_5": "This field is required."
  }
}

And on successful submission, we would set isSuccess to true and return an empty validation error object:

{
  "isSuccess": true,
  "message": "Thanks for contacting us! We will get in touch with you shortly.",
  "validationError": {}
}

Now it’s a matter of transforming what we got to what we need. The code to normalize the Contact Forms 7 response is this:

const normalizeContactForm7Response = (response) => {
  // The other possible statuses are different kind of errors
  const isSuccess = response.status === 'mail_sent';
  // A message is provided for all statuses
  const message = response.message;
  const validationError = isSuccess
    ? {}
    : // We transform an array of objects into an object
    Object.fromEntries(
      response.invalid_fields.map((error) => {
        // Extracts the part after "cf7-form-control-wrap"
        const key = /cf7[-a-z]*.(.*)/.exec(error.into)[1];

        return [key, error.message];
      })
    );

  return {
    isSuccess,
    message,
    validationError,
  };
};

The code to normalize the Gravity Forms response winds up being this:

const normalizeGravityFormsResponse = (response) => {
  // Provided already as a boolean in the response
  const isSuccess = response.is_valid;
  const message = isSuccess
    ? // Comes wrapped in a HTML and we likely don't need that
      stripHtml(response.confirmation_message)
    : // No general error message, so we set a fallback
      'There was a problem with your submission.';
  const validationError = isSuccess
    ? {}
    : // We replace the keys with the prefixed version;
      // this way the request and response matches
      Object.fromEntries(
        Object.entries(
            response.validation_messages
        ).map(([key, value]) => [`input_${key}`, value])
      );

  return {
    isSuccess,
    message,
    validationError,
  };
};

We are still missing a way to display the validation errors, success messages, and toggling classes. However, we have a neat way of accessing the data we need, and we removed all of the inconsistencies in the responses with a light abstraction. When put together, it’s ready to be dropped into an existing codebase, or we can continue building on top of it.

There are many ways to tackle the remaining part. What makes sense will depend on the project. For situations where we mainly have to react to state changes, a declarative and reactive library can help a lot. Alpine.js was covered here on CSS-Tricks, and it’s a perfect fit for both demonstrations and using it in production sites. Almost without any modification, we can reuse the code from the previous example. We only need to add the proper directives and in the right places.

Wrapping up

Matching the front-end experience that WordPress form plugins provide can be done with relative ease for straightforward, no-fuss forms — and in a way that is reusable from project to project. We can even accomplish it in a way that allows us to switch the plugin without affecting the front end.

Sure, it takes time and effort to make a multi-page form, previews of the uploaded images, or other advanced features that we’d normally get baked right into a plugin, but the more unique the requirements we have to meet, the more it makes sense to use the submission endpoint as we don’t have to work against the given front-end implementation that tries to solve many problems, but never the particular one we want.

Using WordPress as a headless CMS to access the REST API of a form plugin to hit the submissions endpoints will surely become a more widely used practice. It’s something worth exploring and to keep in mind. In the future, I would not be surprised to see WordPress form plugins designed primarily to work in a headless context like this. I can imagine a plugin where front-end rendering is an add-on feature that’s not an integral part of its core. What consequences that would have, and if it could have commercial success, remains to be explored but is a fascinating space to watch evolve.



Source link

r/graphic_design - EBOOK QUESTION: EPUB Error Question: OPF-054
Strategy

EPUB Error Question: OPF-054 : graphic_design


Anyone experienced with ebooks and publishing on IngramSpark?

I’ve finished exporting an ebook but when I upload to IngramSpark the system gives me this error. I assumed that there was a problem with the date I entered in the metadata in InDesign prior to exporting, but I removed the date entirely and it still gives the same error.

Perhaps the date needs to be formatted a specific way? Or maybe I’m completely wrong and the error is something else?

Thanks!

r/graphic_design - EBOOK QUESTION: EPUB Error Question: OPF-054



Source link