Create React application
Strategy

How to Build a CRUD Application Using React and Django


In this tutorial, we are going to build a CRUD application for storing books with React and Django. CRUD stands for Create, Read, Update and Delete, so basically this app would work like a library shelf where we can take a look at each book data being able to modify as we want or need.

Technologies Used

For this application, we will be using two very popular solutions for building user interfaces and APIs. The user interface of the application will be built using React – prior knowledge of React is not required for this tutorial.

The back-end for this application will be built using Django, which is a high-level Python web framework that encourages rapid development and clean pragmatic design. Building APIs in Django is made easy using the Django Rest Framework.

We’ll be building the application in three stages:

1. Creating the front-end in React

2. Creating the APIs in Django 

3. Connecting the front-end with the APIs

Getting Started: Configuring the Development Environment

For this tutorial, we will be using the Eclipse IDE with the CodeMix plugin installed. However, feel free to follow along in any IDE that supports both React and Python development.

  • Download Eclipse IDE here
  • CodeMix can be installed from the Eclipse marketplace or via genuitec.com.
  • If the React pack isn’t already installed, install it using the CodeMix Extension Browser(Help > CodeMix Extensions). It can also be installed directly from the Eclipse marketplace.

If you’re looking for an IDE to take on development with frameworks like Angular, React, and Vue.js, or languages like Python and Rust, CodeMix has you covered. Codemix is compatible with all Eclipse-based IDEs and tools, such as MyEclipse, Spring Tools Suite, and JBoss Tools.

Also, we need to have Python installed in our system, so let’s be sure about having it correctly installed. It can be downloaded here.

Creating the Front-End In React

We will create our React application using the CodeMix wizard.

To create the application, navigate to File > New > Project > CodeMix > React Project.

Enter react-book-app as the name of the application in the dialog box that appears, then click finish.

Create React application

Create React application

The folder structure for your new CodeMix-created react application will look like:

Folder structure

Folder structure

Additional Packages

As you can see from the folder structure, there is no node_modules folder. Hence, we need to install the node packages. Using Terminal+, run:

npm install

We will be using bootstrap and fontawesome for some additional styling and for some icons.

Add the following to the <head> section in src/index.js:

Building the Interface

React is a component-driven library. So we need to break our app into different components. Here is the interface we are trying to build:

Interface

Interface

The interface can be broken into different components:

Book Dashboard Component: This is the parent component in the application. It contains the book listing component and the Toggleable Book Form Component.

Book Listing Component: This component is saddled with the responsibility of listing all books that have been created in the application. It contains a list of Editable Book Components.

  • Editable Book component: Renders a Book component and a Book Form component. If the edit icon is clicked, then the Editable Book component will render a Book Form component that allows books that have been created to be edited.
  • Book component: This component shows the details of the book.
  • Book Form component: This component shows a form that allows a book to be created or edited.

Toggleable Book Form Component: This component has the responsibility of creating new books. When the  +  button is clicked, the Book Form component will be rendered which enables us to create a new book.

The application will be able to handle all 4 CRUD (Create Read Update Delete) operations.

Creating Components

We will create the components hierarchically — from the parent component. The first component to be created is the Book Dashboard component.

Modify src/index.js to look like:

As seen above, the BookDashboard component stores the books in state. The books are then passed as props to the BookList component along with some functions to handle book deletion and updates.

BookDashboard also renders ToggleableBookForm and passes a function as prop which will handle book creation. React should be immutable, so we go to our handler functions:  createNewBook ,  updateBook,  deleteBook  which update the state without mutating the initial contents of a book.

Next, we need to create the BookList component. For that, add the following code to index.js.

The  BookList component receives books as prop, maps over it and returns an array of EditableBook components which is then rendered. EditableBook is a component that renders a Book or a BookForm if the user clicks the edit book button on the  Book component. It is a stateful component that stores the edit mode status in state and using that value, knows which component to render.

The book component receives the details about the book as props. It also receives some functions which handle the clicking of the edit button and the delete button.

Let’s create the Book and  BookForm components.

The Book component just renders the markup for displaying books. 

All the data it needs and handlers for edit and delete actions are gotten from the parent component — EditableBook .

The BookForm component, on the other hand, renders a form that contains the book details from props for an update operation. 

For a create operation, which will be handled by ToggleableBookForm, no props will be sent the form is made reactive by calling setState when the input field is modified. We do this by creating different handlers for each field and listen for the change event.

The function to handle submit events on this form will be sent as a prop from the parent component —  EditableBook or ToggleableBookForm.

The last component to be built is the ToggleableBookForm, this component will be used for creating books.

As described earlier, ToggleableBookForm renders a button which the user clicks to create a book. When the button gets clicked, the BookForm component is rendered.

Finally, we render the BookDashboard component using ReactDOM.

Reloading the browser, the book app should be functioning as expected.

Functioning Book app

Functioning Book app

Our app works!!!

However, the data is not persisted when the page reloads. This is because the data is stored in data structures in our application — state. To persist the data, we need some kind of data storage solution that our React app can communicate with. To do this, we will build a simple REST API with Python using the Django framework.

Building The Books API with Django

We’ll create the books API using Django. Let’s create a new dummy project:

New dummy project

New dummy project

If you don’t have pipenv installed already, you will need to install it by running the following in the terminal:

pip install pipenv

Using the integrated terminal, activate the pipenv shell to create the Django project:

pipenv shell

When done, run the following commands to install Django and Django REST Framework:

Next, we create a Django project and create a Django app.

This will create new folders in the  books-api folder. Update INSTALLLED_APPS in settings.py to include books and django-rest-framework.

Our database model will just contain the Book Model. Add the following to models.py.

Book model

Book model

Our Book model contains 4 fields: title, description, author, and created_at.

  • The title field stores the title of the book.
  • The description stores the description of a book.
  • The author field stores the author of the book.

These fields will be provided from our frontend — the react app we built earlier.

  • The created_at field will be auto inserted based on the time the book is created.

Run the following command to create the necessary migrations and tables.

In Terminal+,  ensure you are at books-api/booksApi/ then run:

Next, we will create a serializer. Serializers are used to convert our data to JSON which will be returned when we visit the endpoints.

Next, we update views.py to add our API views.

Finally, we need to add our endpoints. Create a  urls.py in books-api/booksApi/books

And update books-api/booksApi/booksApi/urls.py to look like:

Start the Django server by running the snippet below in Terminal+:

The endpoint is can now be viewed at http://localhost:8000/api/books/. Before we consume the API in our react app, we need to solve one issue that will probably arise — CORS. Run the following to install a package to help with CORS:

When that is done, add the following to the list of INSTALLED_APPS in settings.py as we did earlier. We will also need to add some new middleware.

And finally, add the line below to allow all origins to access the API:

Run the server using the integrated terminal:

Consuming the API with React

We will be using fetch to consume the books API. Add the following to index.js:

As seen above, we remove the initial content of the books array and we just initialize it with an empty array.

Using  componentDidMount hook, we fetch the content of the book api and on line 10, update the state to use the data recieved. Currently, there is no book in the database, so every call to http://localhost:8000/api/books/ will return an empty array.

Update the  createNewBook function to use the API for book creation:

 createNewBook sends a POST request to the books API with the book data gotten from the form. The API responds with the newly created book containing some additional data like id and created_at. 

Next up, we need to modify books — update. To update a book, we need to send a PUT request.

As seen above, we are sending a put request to the url/<bookId>. This shows which book we are looking to update. If the update is successful, we update the state.

We are using the same state update mechanism as before. You might want to send another request to fetch all the books from the API but that will take more time.

The last method to modify is the delete action, just like this:

The delete action is probably the simplest. We send a DELETE request to the same URL as used for update, the delete action does not return any data so we can just update the state.

App running on Live Preview

App running on Live Preview

Conclusion

With this functional CRUD application, we have just learned how to build a simple REST API using the Django framework, and a frontend in React which consumes the API. In case you want to take a closer look at the code, take a look at the Github repository for the React codebase, and for the Django API.

If you haven’t tried CodeMix yet, go and experiment with all the features it has to offer! Be part of the community with the CodeMix Insiders program, or use the integrated LiveChat to receive full support from the CodeMix team right inside your IDE.

Have any questions or suggestions about this article or any of our services? Let us know your thoughts via Twitter or through the CodeMix forums. Happy Coding!





Source link

Creating a new project
Strategy

React Bootstrap Table With Searching and Custom Pagination


Introduction

In this article, we will learn how to use the React Bootstrap Table in React applications.  I will also explain how we can implement pagination, searching, and sorting in this Table. 

Prerequisites

  • We should have the basic knowledge of React.js and Web API.
  • Visual Studio and Visual Studio Code IDE should be installed on your system.
  • SQL Server Management Studio.
  • Basic knowledge of Bootstrap and HTML.

Implementation Steps

  • Create a Database and Table.
  • Create Asp.net Web API Project.
  • Create React App.
  • Install React-bootstrap-table2.
  • Implement Sorting.
  • Implement Searching.
  • Implement Custom Pagination.
  • Install Bootstrap.
  • Install Axios.

Create a Table in the Database

Open SQL Server Management Studio, create a database named “Employee”, and in this database, create a table. Give that table a name like “Employee”.

  

Now add some demo data in this table.

Create a New Web API Project

Open Visual Studio and create a new project.

Creating a new project

Creating a new project

Change the name to MatUITable.

Changing name to MatUITable
Changing name to MatUITable

 Choose the template as Web API.

Selecting Web API as the template
Selecting Web API as the template

Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data

Adding new item
Adding new item

Click on the “ADO.NET Entity Data Model” option and click “Add”. 

Adding a new data model
Adding a new data model

 Select EF Designer from the database and click the “Next” button. 

Selecting EF Designer
Selecting EF Designer

 Add the connection properties and select database name on the next page and click OK. 

Adding connection properties and selecting database
Adding connection properties and selecting database

Check the “Table” checkbox. The internal options will be selected by default. Now, click the “Finish” button.

Finishing project creation
Finishing project creation

Now, our data model is successfully created.

Right-click on the Controllers folder and add a new controller. Name it “Employee controller” and add the following namespace in the Employee controller.

 

Now, add a method to fetch data from the database. 

Complete Employee controller code

Now, let’s enable CORS. Go to Tools, open NuGet Package Manager, search for CORS, and install the “Microsoft.Asp.Net.WebApi.Cors” package. Open Webapiconfig.cs and add the following lines.

Create a ReactJS Project

Now, let’s first create a React application with the following command.

 

Install bootstrap by using the following command.

Now, open the index.js file and add a Bootstrap reference.

 

Now, install the Axios library by using the following command. Learn more about Axios.

Install React Bootstrap table by using the following command:

 

Now, right-click on “src” folder and add a new component named “Bootstraptab.js”. 

Now, open the Bootstraptab.js component and import the required reference. Add the following code in this component. Run the project by using npm start and check the result:

 Initial output

Initial output

Click on the button to check sorting in table 

Implement Searching

Install the following library to add searching in this table.

 
Now, add the following code in this component.

Run the project by using npm start and check the result:

 Searching implemented

Searching implemented

Demonstrating search functionality

Demonstrating search functionality

Implement Pagination

Install the following library to add pagination in this table.

Now, add the following code in this component.

Run the project by using npm start and check the result:

Pagination implemented
Pagination implemented

By default, it shows 10 records per page, so let’s create a function to add custom page size. Add the following code in this component and check. 

Run the project by using ‘npm start’ and check the result. Now, create a new component Bootstraptab1.js and add the following code in this component:

Now, open app.js file and add the following code:

Run the project by using npm start and check the result: 

final output
Pagination implemented

Summary 

In this article, we learned how we add React Bootstrap Table and show data in that table using Web API in ReactJS applications. We also learned how to implement sorting, searching, and pagination in the table.



Source link

CSS2JS
Strategy

CSS2JS


To add inline styles on an element in JSX, you have to do it in this object syntax, like:

<div style={{
  fontSize: 16,
  marginBottom: "1rem"
}}>
  Content
</div>

That might look a little weird to us folks who are so used to the CSS syntax, where it is font-size (not fontSize), margin-bottom (not marginBottom), and semi-colons (not commas).

That’s not JSX (or React or whatever) being weird — that’s just how styles are in JavaScript. If you wanted to set the font-size from any other JavaScript, you’d have to do:

div.style.fontSize = "16px";

I say that, but other APIs do want you to use the CSS syntax, like:

window.getComputedStyle(document.body)
  .getPropertyValue("font-size");

There are also lots of CSS-in-JS libraries that either require or optionally support setting styles in this object format. I’ve even heard that with libraries that support both the CSS format (via template literals) and the object format (e.g. Emotion), that some people prefer the object syntax over the CSS syntax because it feels more at home in the surrounding JavaScript and is a bit less verbose when doing stuff like logic or injecting variables.

Anyway, the actual reason for the post is this little website I came across that converts the CSS format to the object format. CSS2JS:

Definitely handy if you had a big block of styles to convert.

Direct Link to ArticlePermalink

The post CSS2JS appeared first on CSS-Tricks.



Source link

Post image
Strategy

Progressive overload – need help! : graphic_design


Hey Reddit,

This idea comes from a need that i encountered in the gym and i’m sure that a lot of people do. Anyone of you who tries to take the gym more seriously know that in order to progress you need to load more weight with time and then the problem of consistently tracking your progress pops, and after countless notes and notebooks I got tired of it. So my solution was this page.

Note that the How to use section is just for this reddit upload for you guys to understand better, but basically this page will be printed in a way that you can draw on it and then delete it with a marker. So the weight is different between each client.

What you do is mark the first (most left) weight and rep count, and over time you progress the reps and when you get to the end of the rep range, you up the weight and start the reps all over again.

Post image

So i want you to see it from the graphics designers perspective and maybe give me your thoughts of how to make it more appeal to the eye.

If anyone thinks he can help, pm me and ill send you the .ai file to experiment with.

Thank you and be safe&healthy.



Source link

Accessibility and testing in Angular and Ember
Strategy

Accessibility and Testing in Two Popular SPA Frameworks


I love working with JavaScript frameworks. But what I love most is building an interactive user interface with flawless accessibility. You have to be user-centric while developing apps because overlooking an end-user’s perspective often leads to a half-baked idea. Considering this point of view, I found gold in Ember and Angular. These frameworks are great for building single-page applications and take accessibility to an extra mile. 

Angular is built with extensive capabilities to build bug-free applications with its supportive architecture. Ember, on the other hand, has got everything sorted for writing the tests to keep a consistent best practice in dealing with test cases among different modules of an application. For more details on different aspects of these two javascript frameworks, you can refer to our blog: Ember vs Angular: Comparing Two Popular SPA Frameworks.

Let’s discuss accessibility and testing in both frameworks in brief.

Accessibility and testing in Angular and Ember

Accessibility and testing in Angular and Ember

Accessibility and Testing in Ember  

In my opinion, accessibility should be a crucial consideration while building applications. Adding accessibility features at the end or in the middle of a project can be frustrating and can even make it complex to understand. For example, Ember allows you to add attributes, such as “lang” in the language declaration. 

Developers can add attributes at the beginning of the project or can even edit the index file later. As compared to other frameworks, Ember has simplified the problem of accessibility by providing proper attributes to the project. It also allows you to declare the attribute as a parent for defining a different language in some cases.

Ember bifurcates testing into two main categories:

  • How fast can testing be executed?
  • For which part of the application the testing is conducted/designed?

To address these aspects, Ember conducts three types of testing:

  • Unit tests.
  • Rendering tests.
  • Application tests.

It gives you the power to write tests and be productive from day one. You can be confident that your app will be correct today and for years to come. The developers working on building applications should understand the importance of writing tests to optimize iterations that happen over time. 

Ember advances other frameworks at several points, such as:

  • Facilitating testing object methods in unit testing.
  • Using tests such as Setup test to validate controllers.
  • Extending the scope of the application route and providing a command to generate a route application.
  • Testing components, helpers, and relationships for a flawless framework.

Accessibility and Testing in Angular    

The web is used by different audiences, including those who have visual or motor disabilities. There’s a variety of assistive technologies available that make it easier for these groups to interact with web-based software applications. Besides, designing an application to be more accessible generally improves the experience for all users.

“The Angular team values Accessibility, but a framework by itself cannot guarantee accessibility out of the box. The Angular Components team at Google has been developing high-quality Angular Components and the Angular CDK (Component Development Kit), which includes several tools to improve accessibility.” – Zama Khan Mohammed, Software architect and Technical Author

Angular is capable of creating accessible applications with the use of proper tools and practices. 

For example, Angular developers, using tabindex, role, and ARIA can make the most out of accessibility features for any application built with Angular. Additionally, AR headbands allow you to play games just by looking at the screen. 

Here’s what Uri Shaked, Google Developer Expert says on Angular Accessibility:

“You should take advantage of ARIA for building accessible applications with Angularjs. In addition, angular-material, a Material Design component library, has built-in support for accessibility, so if you use it, you get some accessibility support out of the box.”

Uri Shaked on accessibility in Angular

Uri Shaked on accessibility in Angular

Angular has made it easy for developers to code and test with the use of dependency injection to stimulate requests. It also provides proper abstraction in the document object model to avoid the direct manipulation of the DOM. 

Angular is written by keeping testability in mind. Although developers will have to learn how they can make the most out of the framework. 

It also provides the ‘one-file-one-module’ principle to manage the order of the modules while testing. Users need more facilitation, accessibility, and smart operability in their apps. It allows you to write modular logic units and clear documentation more easily. I always keep a practice to use a combination of unit testing and Angular, which helps me in finding the flaws easily and at earlier stages. 

Angular makes testing trouble-free by providing prominent application parts. Angular allows developers to manipulate the application parts so that the testing can be more conceptualized and implemented. The framework makes testing accessible so that the developers can load the necessary services and perform effective testing.

The Angular community understands the scope of applications well, and of course, it is growing with time. While Angular has good proximity to unit testing, it is not difficult for developers to improve on the code’s orthogonality. And that is the reason that Angular applications are less likely to resist change and welcome updates so quickly. 

With this, Angular provides the base for handling the increasing size and complexity of the application and has made it to the list of practical approaches of testing. 

Angular also has built test runners, like Protractor, to perform end-to-end testing and simulate user interfaces. These rich and stimulating app interactions make applications robust and an easy go-to for usability.

Both these SPA frameworks support two major causes of stable applications i.e., accessibility and testing. I like Angular for its robustness for maintaining accessibility and Ember for its readiness to add accessibility features. So which one would you choose for building your next SPA? 





Source link

Neumorphism and CSS | CSS-Tricks
Strategy

Neumorphism and CSS | CSS-Tricks


Neumorphism (aka neomorphism) is a relatively new design trend and a term that’s gotten a good amount of buzz lately. It’s aesthetic is marked by minimal and real-looking UI that’s sort of a new take on skeuomorphism — hence the name. It got its name in a UX Collective post from December 2019, and since then, various design and development communities have been actively discussing the trend, usually with differing opinions. Chris poked fun at it on Twitter. Adam Giebl created an online generator for it. Developers, designers, and UX specialists are weighing in on the topic of aesthetics, usability, accessibility, and practicality of this design trend.

Clearly, it’s stricken some sort of chord in the community.

Let’s dip our toes into the neumorphism pool, showcasing the various neumorphic effects that can be created using our language of choice, CSS. We’ll take a look at both the arguments for and against the style and weigh how it can be used in a web interface.

Neumorphism as a user interface

We’ve already established that the defining quality of neumorphism is a blend of minimalism and skeuomorphism. And that’s a good way to look at it. Think about the minimal aesthetic of Material Design and the hyper-realistic look of skeuomorphism. Or, think back to Apple’s design standards circa 2007-12 and compare it to the interfaces it produces today.

Nine years of Apple Calendar! The image on the left is taken from 2011 and exhibits the look and feel of a real, leather-bound journal, said to be inspired by one on Steve Jobs’ personal yacht. The right is the same app as shown today in 2020, bearing a lot less physical inspiration with a look and feel we might describe as “flat” or minimal.

If we think about Apple’s skeuomorphic designs from earlier in the century as one extreme and today’s minimal UI as another, then we might consider neumorphism as something in the middle.

Alexander Plyuto has championed and evolved neomorphic designs on his Dribbble account. (Source)

Neumorphic UI elements look like they’re connected to the background, as if the elements are extruded from the background or inset into the background. They’ve been described by some as “soft UI” because of the way soft shadows are used to create the effect.

Another way to understand neumorphic UI is to compare it to Material Design. Let’s use a regular card component to draw a distinction between the two.

Notice how the Material Design card (left) looks like it floats above the background, while the neumorphic variation(right) appears to be pushed up through the background, like a physical protrusion.

Let’s break down the differences purely from a design standpoint.

Quality Material Design Neomorphism
Shadows Elements have a single or multiple dark shadows around them.  Elements have two shadows: one light and one dark.
Background colors An element’s background color can be different than the background color of the parent element. Background colors must be the same (or very similar) as the background color of the parent element.
Edges Elements can be rounded or squared. Rounded edges are a defining quality.
Borders There are no hard rules on borders. Using them can help prevent elements that look like they are floating off the screen. Elements can have an optional subtle border to improve contrast and make the edges a bit sharper

That should draw a pretty picture of what we’re talking about when we refer to neumorphism. Let’s move on to how it’s implemented in CSS.

Neumorphism and CSS

Creating a neumorphic interface with CSS is seemingly as easy as applying a regular box-shadow property on any element, but it’s more nuanced than that. The distinctiveness of a neumorphic UI comes from using multiple box-shadow and background-color values to achieve different types of effects and variations.

Neumorphic box shadows

Let’s do a quick refresher on the box-shadow property first so we can get a better understanding. Here’s the syntax:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

Following options can be adjusted:

  • Horizontal offset: A positive value offsets shadow to the right, while a negative value offsets it to the left.
  • Vertical offset: A positive value offsets shadow upwards, while a negative value offsets it downwards.
  • Blur Radius: The length of the shadow. The longer the length, the bigger and lighter the shadow becomes. There are no negative values.
  • Spread Radius: This is another length value, where larger values result in bigger, longer shadows.
  • Color: This defines the shadow’s color, just as we’d do for the CSS color property.
  • Inset: The default value (initial) results in a drop shadow. Using the inset value moves the shadow inside the frame of the element, resulting in an inner shadow.

We can apply multiple shadows using comma-separated box-shadow values. Up to four values can be concatenated, one for each side of the box.

box-shadow: 20px 20px 50px #00d2c6, 
            -30px -30px 60px #00ffff;

The following shows the box-shadow property values for a neumorphic UI element. Individual offset, blur and opacity values can be adjusted to be higher or lower, depending on the size of an element and the intensity of the effect that you’re trying to achieve. For neumorphism, it’s required to keep the shadows soft and low contrast.

As we’ve mentioned before, a core part of neumorphic elements is the use of two shadows: a light shadow and a dark shadow. That’s how we get that sort of “raised” effect and we can create variations by changing the “light source” of the shadows.

Two positive and two negative offset values need to be set. Taking this into account, we get the following four combinations, simply by changing the placement of each shadow.

Let’s use CSS variables to keep the values abstract and better understand the variations.

box-shadow: var(--h1) var(--v1) var(--blur1) var(--color-dark), 
            var(--h2) var(--v2) var(--blur2) var(--color-light);
Light Source Positive Values Negative Values
Top Left --h1, --v1 --h2, --v2
Top Right --h2, --v1 --h1, --v2
Bottom Left --h1, --v2 --h2, --v1
Bottom Right --h2, --v2 --h1, --v1

We can use inset shadows to create yet more variations. Unlike drop shadows that make an element appear to be raised from beneath the background, an inset shadow gives the appearance that the element is being pressed into it.

We can change if the element is extruded from the background or inset into the background by applying the initial (not apply the option at all) or inset, respectively.

Let’s keep our light source as the top left and only toggle the inset option to see the difference.

Background colors

You might have noticed that the box-shadow values change the look of the edges of a neumorphic element. So far, we haven’t changed the background-color because it needs to be transparent or have the same (or similar) color as a background color of an underlying element, such as the element’s parent. 

We can use both solid and gradient backgrounds. Using a solid color background on the element can create a flat surface sort of look, when that solid color is the same as the color of the underlying element. 

On the other hand, using subtle gradients can change how the surface is perceived. As with the box-shadow property, there is alight and a dark value in a gradient. The gradient angle needs to be adjusted to match the light source. We have the following two variations when using gradients:

  • Convex surface variation:  The surface curves outwards where the gradient’s lighter section is aligned with the shadow’s lighter section, and the gradient’s darker section is aligned to the shadow’s darker section.
  • Concave surface variation:  The surface curves inward where the gradient’s lighter section is aligned to the shadow’s darker section, and the gradient’s darker section is aligned to the shadow’s lighter section.
.element {
  background: linear-gradient(var(--bg-angle), var(--bg-start), var(--bg-end));
  box-shadow: var(--h1) var(--v1) var(--color-dark), 
              var(--h2) var(--v2) var(--color-light);
}

Neumorphism in practice

Let’s see how Neumorphism performs when applied to a simple button. The main characteristic of a neumorphic interface is that it blends with the background and does so by having a similar or same background color as the underlying element. The main purpose of many buttons, especially a primary call-to-action, is to stand out as much as possible, usually with a prominent background color in order to separate it from other elements and other buttons on the page.

The background color constraint in neumorphism takes away that convenience. If the background color of the button matches the background color of what it’s on top of, we lose the ability to make it stand out visually with a unique color.

We can try and adjust text color, add a border below the text, add an icon or some other elements to increase the visual weight to make it stand out, etc. Whatever the case, a solid background color on a neumorphic button seems to stand out more than a gradient. Plus, it can be paired with an inset shadow on the active state to create a nice “pressed” effect.

Even though the solid color on a neumorphic button calls more attention than a gradient background, it still does not beat the way an alternate color makes a button stand out from other elements on the page.

Taking some inspiration from the real-world devices, I’ve created the following examples as an attempt to improve on the neumorphic button and toggle concept. Although the results look somewhat better, the regular button still provides a better UX, has much fewer constraints, is more flexible, is simpler to implement, and does a better job overall.

The first example was inspired by a button on my router that extrudes from the device and has a sticker with an icon on it. I added a similar “sticker” element with a solid color background as well as a slight inset to add more visual weight and make it stand out as closely as possible to the ideal button. The second example was inspired by a car control panel where the button would light up when it’s in an active (pressed) state.

Let’s take a look at some more HTML elements. One of the downsides of neumorphism that has been pointed out is that it shouldn’t be applied to elements that can have various states, like inputs, select elements, progress bars, and others. These states include:

  • User interaction: Hover, active, focus, visited
  • Validation states: Error, success, warning, disabled

UX and accessibility rules require some elements to look different in each of their respective validation states and user interaction states. Neumorphism constraints and restrictions severely limit the customization options that are required to achieve the different styles for each possible state. Variations will be very subtle and aren’t possibly able to cover every single state.

Everything looks like a button! Notice how the input and button look similar and how the progress bar looks like a scrollbar or a really wide toggle.

It’s hard to see which elements are clickable! Even though this is the simplest possible example that showcases the issue, we could have added extra elements and styles to try and mitigate the issues. But as we’ve seen with the button example, some other types of elements would still perform better in terms of UX and accessibility.

It’s important to notice that Neumorphic elements also take more space (inside padding and outside margin) due to the shadow and rounded corners. A neumorphic effect wouldn’t look so good on a small-sized element simply because the visual effects consume the element.

The ideal element for neumorphism are cards, or any other static container element that doesn’t have states based on user interaction (e.g. hover, active and disabled) or validation (e.g. error, warning, and success).

In his highly critical article on neumorphism, Michal Malewicz (who helped coin “Neumorphism” as a term) suggests adding Neumorphic effects to the cards that already look good without it.

So the only way it works OK is when the card itself has the right structure, and the whole extrusion is unnecessary for hierarchy.

See?

It works well when it can be removed without any loss for the product.

Accessibility and UX

We’ve seen which elements work well with neumorphism, but there are some important rules and restrictions to keep in mind when adding the effect to elements.

First is accessibility. This is a big deal and perhaps the biggest drawback to neumorphism: color contrast.

Neumorphic UI elements rely on multiple shadows that help blend the element into the background it is on. Using subtle contrasts isn’t actually the best fit for an accessible UI. If a contrast checker is scanning your UI, it may very well call you out for not having high enough contrast between the foreground and background because shadows don’t fit into the equation and, even if they did, they’d be too subtle to make much of a difference.

Here are some valid criticisms about the accessibility of a neumorphic design:

  • Users with color blindness and poor vision would have difficulty using it due to the poor contrast caused by the soft shadows.
  • Page hierarchy is difficult to perceive when the effect is overused on a page. No particular element stands out due to the background color restrictions.
  • Users can get confused when the effect is overused on a page. Due to the extrusion effect, it’s difficult to determine which elements users can interact with and which are static.

In order to achieve a good contrast with the shadow, the background color of what a neumorphic element sits on shouldn’t get too close to the edges of RGB extremes (white and black).

Now let’s talk UX for a moment. Even though Neumorphic UI looks aesthetically pleasing, it shouldn’t be a dominant style on a page. If used too often, the UI will have an overwhelmingly plastic effect and the visual hierarchy will be all out of whack. Ae page could easily lose its intended structure when directing users to the most important content or to the main flow.

My personal take is that neumorphism is best used as an enhancement to another style. For example, it could be paired with Material Design in a way that draws distinctions between various component styles. It’s probably best to use it sparsely so that it adds a fresh alternative look to something on the screen — there’s a diminishing return on its use and it’s a good idea to watch out for it.

Here’s an  example where neumorphic qualities are used on card elements in combination with Materialize CSS:

See, it can be pretty nice when used as an accent instead of an entire framework.

That’s a wrap

So that was a deep look at neumorphism. We broke down what makes the style distinct from other popular styles, looked at a few ways to re-create the effect in CSS, and examined the implications it has on accessibility and user experience.

In practice, a full-scale neumorphic design system probably cannot be used on a website. It’s simply too restrictive in what colors can be used. Plus, the fact that it results in soft contrasts prevents it from being used on interactive elements, like buttons and toggle elements. Sure, it’s aesthetically-pleasing, modern and unique, but that shouldn’t come at the expense of usability and accessibility. It should be used sparsely, ideally in combination with another design system like Material Design.

Neumorphism is unlikely to replace the current design systems we use today (at least in my humble opinion), but it may find its place in those same design systems as a fresh new alternative to existing cards and static container styles.

References





Source link

Catalogue Idea
Strategy

Catalogue Idea


Catalogue Idea

Hello everyone!

I'm kind of new to web design, and I'm trying to create an online catalog of sorts for the company I work for. I've been trying to get inspire for a design to make it look good, and I stumbled across this.

My question is this, is there a way to code something like this without each one being images? I'd like to have the cut off corners on the images and on the bottom bar of each cell. Or if you have catalog ideas that look good that would be easier, I'd appreciate those as well.

Thanks in advance!

https://preview.redd.it/h475und10pn41.png?width=390&format=png&auto=webp&s=2ce84a3d1cb10be689b0398bfef565997b0e8b87

submitted by /u/Combustabl3L3mon
[comments]



Source link