UIUX Design Trends 2024

UI/UX Design Trends of 2024

UX Design


As technology continues to evolve, so does the landscape of UI/UX design. In 2024, designers are pushing the boundaries and redefining the user experience through innovative and user-centric approaches. In this blog post, we’ll explore the exciting UI/UX design trends that are shaping the digital world in 2024.

Immersive Augmented Reality (AR) Experiences:

Augmented Reality has moved beyond the realm of gimmicks and into practical applications. UI/UX designers are leveraging AR to create immersive experiences that seamlessly blend the digital and physical worlds. From enhanced navigation to interactive product demonstrations, AR is becoming a powerful tool to engage users on a deeper level.

Voice User Interfaces (VUI):

With the rise of smart speakers and virtual assistants, VUI is gaining prominence in UI/UX design. Designers are focusing on creating intuitive voice interactions that provide a natural and efficient way for users to interact with digital interfaces. Voice commands are becoming more sophisticated, offering a hands-free and accessible user experience.

Neomorphic Design:

Building on the popularity of minimalism, neomorphic design is making waves in 2024. This design trend combines skeuomorphism and flat design, creating interfaces with soft shadows, subtle gradients, and a tactile feel. Neomorphic design brings a sense of realism to digital interfaces while maintaining a modern and clean aesthetic.

Intelligent Microinteractions:

Microinteractions are no longer just about adding delightful animations. In 2024, designers are incorporating AI-driven microinteractions that respond intelligently to user behavior. From personalized feedback to predictive actions, these microinteractions enhance user engagement and create a more dynamic user interface.

Dark Mode Evolution:

Dark mode has become a staple in many applications, but in 2024, designers are taking it to the next level. Dynamic dark modes that adapt to the user’s environment, customizable dark mode themes, and creative use of color gradients are enhancing the visual appeal while providing a comfortable viewing experience in low-light conditions.

Biometric Authentication Integration:

With an increased focus on security and user privacy, biometric authentication is becoming a standard feature in UI/UX design. Designers are seamlessly integrating fingerprint, facial recognition, and other biometric authentication methods to enhance the security of digital platforms while ensuring a frictionless user experience.

Data Visualization for Actionable Insights:

As data becomes more integral to decision-making, UI/UX designers are emphasizing clear and interactive data visualizations. Whether it’s in analytics dashboards or financial applications, compelling visual representations of data empower users to make informed decisions quickly and effortlessly.


The UI/UX design landscape in 2024 is an exciting blend of technological innovation, user-centric principles, and aesthetic evolution. From immersive AR experiences to the subtle elegance of neomorphic design, designers are shaping the digital future with a focus on creating seamless, engaging, and intelligent user interfaces. Embracing these trends will not only keep digital platforms relevant but will also elevate the user experience to new heights. As we navigate the ever-evolving world of technology, the principles of user interface and experience design remain at the forefront of creating meaningful and impactful digital interactions.


UX Design Trends 2023

UX Design

As we begin the new year, it’s important for designers to stay on top of the latest trends in user experience (UX) and user interface (UI) design. Here are some key trends to watch for in 2023:

Minimalism: With the rise of digital clutter, minimalistic design will continue to be popular in 2023. This approach emphasizes simplicity and functionality, using clean lines, negative space, and a limited color palette.

Microinteractions: Microinteractions are small interactions that take place within a larger interface. They add a layer of engagement and delight to the user experience. Expect to see more of these subtle animations and interactions in 2023.

Voice and gesture control: As technology advances, we will see more interfaces that can be controlled by voice and gestures. This will lead to a more natural and intuitive way of interacting with digital devices.

Virtual and augmented reality: With the increasing popularity of virtual and augmented reality, expect to see more interfaces that incorporate these technologies. This will create new opportunities for immersive and engaging experiences.

Personalization: Personalization will be a key trend in 2023. As data collection and analysis become more sophisticated, designers will be able to create more personalized experiences for users. This will involve tailoring content, layout, and functionality to individual preferences and behavior.

Accessibility: Accessibility will continue to be a key concern in 2023. Designers will need to ensure that their interfaces are accessible to users with disabilities, using techniques such as high contrast, large text, and alternative forms of input.

As designers, it is important to stay informed about the latest trends in UX and UI design. By staying ahead of the curve, we can create interfaces that are not only visually pleasing but also functional and intuitive.


UX Design Trends 2022

UX Design

What will be the UX and UI trends of 2022? It’s possible that this may be the year we return to ‘normal,’ but it’s more probable that it will be a new normal. Covid-19 has permanently altered the way we do business in the digital age. All of these things happened even though we were confined to our own houses. It was simply a little different method of doing them. With the widespread use of Zoom meetings, it’s now easier than ever to do business on both the virtual and physical worlds.

We’re increasingly relying on digital services, but how are we utilizing them and what are we planning to use next year? There are a number of trends that we believe will have a significant impact on how people work and create in the year ahead.


Dark Mode

UI UX Trends 2022 include a return to a dark mode or theme, after the popularity of a white backdrop with plenty of white space in 2021.

The use of a dark theme is not new. Apps and websites are increasingly allowing users to choose between a bright and dark mode with a high degree of contrast. It was determined that the White House’s official website enables visitors to choose between low contrast light and high contrast dark modes, for example, in a quick accessibility audit.


Animations and 3D Visualizations

The three-dimensional art of 3D design is one of the top UI UX trends of 2022, and it’s here to stay. As the global economy continues to open up, you’ll need this for your firm.

Create 3D animations if you can! It used to be that animations were a source of frustration for designers and developers due to the time and data they consumed throughout the development process. This is no longer a problem.


Optimized for Multiple Screen Sizes and Pixels

Creating a collection of attractive icons isn’t the only thing a designer does on a daily basis, especially if you’re new to graphic design, UI design, or UX design.

In order to accommodate a wide range of screen sizes and pixel counts, an interface must be designed by a designer. Wearable devices, mobile devices, tablets, tiny displays, foldable devices, laptops and desktops, huge screens, extra-large screens and TV all need to be taken into consideration by designers.


Minimizing the Amount of Information

Until recently, the term “super app” was exclusive to Asia. Tencent’s WeChat is without a doubt the first mover in the race for super-apps, merging services like as chat, social networking, payment, e-commerce, food delivery, cab-hailing and many more into one app.

The Tencent strategy is being replicated by other Asian companies because of their geographical advantages. Think of Grab in Malaysia and Singapore, Gojek in Indonesia, and the like.

As a result of this, we’re seeing a number of the world’s biggest companies developing their own super-apps. Using the Gmail app as an example, Google has combined the Gmail, Meet, and Hangout Chat applications into a single app. To compete with Tiktok, Twitter and YouTube are both introducing “Spaces” and “Shorts,” respectively.


Final Words

There will be various standards in use in the markets in 2022 and beyond because of persistent trade barriers and trade wars. As a consequence, the requirement and relevance of UX localization worldwide will be heightened.

UX Design Trends 2021

UX Design Trends 2021

UX Design

UX design is a field that changes rapidly over time. The designers need to keep themselves updated about the latest trends they should follow in designing the products. After doing research, I have organized a list of UX trends that designers need to take care of in 2021 to bring intuitive products to the market.

1. Video interactions

The pandemic has changed the way we interact and communicate in a direction that was never done before. The video conferencing tools are getting popular among users and everyone feels it is a safe and convenient option to do their tasks.

The education sector is focusing more towards effective online teaching methods, corporate organizations are switching their jobs to remote positions, telemedicine industry is providing people facility to contact their doctors through video calls, online shopping has become the next future. People have realized that everything is possible and even safer and faster through video interactions.


2. Advanced personalization

Personalization is a way to design and present the customized content to a user as per their information that apps and sites collected using their personal details, navigation history, order history, etc.

The purpose of personalization is to give the user a feeling of familiarity and self-worth when he visits an app or a website. The organizations are working hard in collecting the required data, analyzing it correctly, and providing the user only the information that he wants to see.




3. Useful visualization

Presenting complex data into a format that is easy to understand for users has always been a challenge for designers.  Beautiful and useful visualization designs are always trending for websites and apps. To make them more attractive and understandable, it is required to provide meaningful interactions so that users can explore them and reach towards the desired decisions.

The pandemic has given more popularity to data visualizations as people trust the representations to know about the real situation and make decisions accordingly.


4. Voice UI

We have seen that popular companies like Apple, Android and Google have already implemented the voice-based search to move towards touchless interfaces. The trend is getting popular and UX designers should start thinking to provide an addition of voice-based interactions in their products as this is still a unique feature to attract users.

Due to the pandemic situation in 2020, touchless interfaces are considered as a safe option to communicate with the world using different devices and voice UI is the one towards which designers are moving fast.


5. Augmented reality apps

The work on Augmented Reality (AR) technology has started for many years, however, it spreads quickly when Apple with ARKit 4, Google with ARCore, and Facebook with  Oculus VR has introduced ways to develop amazing AR apps for users.

Nowadays AR has impacted many industries including education, healthcare, travel, entertainment, food, automotive, retail and many others. Based on a report there will be approximately 57.1 million VR users in the United States only during 2021. With the help of AR technology, companies can perform all collaboration and communication easily using virtual conferences.


6. UX Writing and Microcopy

UX writing and microcopy help brands and companies to use a style of writing and messaging that are best suitable to their users. The companies do specific hiring just to make a tone and language that helps to create a good relationship with users.

In 2021, the trend of using a tone that is closer to human natural understanding will be at its peak. The goal is to achieve a user-friendly writing service for your website or app instead of technical and formal languages. This communication style is referred to as a human-centered language that prefers to stick with more casual language.




The year 2021 seems to be an era of great innovation and exciting products. The UX designers should take advantage of the latest trends to design experiences and this is the need of the hour. Learn new skills and knowledge to develop interfaces for the upcoming technologies including augmented reality, virtual reality and voice interfaces.

Users’ expectations change rapidly and keeping yourself updated to the latest trends is the only way to succeed. Remember, the end goal remains the same, to make a product that is easy to use and helps users to achieve their goals effectively and efficiently.

How do you master web design?

How do you master web design?

UX Design

1. Do not center everything. Doing so will just give your web design a scattered and disorganized look. When it comes to layout, centering tends to waste so much space. Try to maximize space. It is there for a purpose. Do not overlook that purpose.

In a nutshell, use space with cautiousness so as not to appear scattered at the same time not crowded. Use columns for better organization. That way, the contents are easy to read and the images will not appear as an eyesore.

2. To make your page more attractive, apply an efficient contrast. Contrast can be applied to color, size, value and weight of an image. Contrast has something to do with the clearness, brightness and volume of an image, logo or graphics. It can also be applied to texts and other objects of the web design. If you get it right, your web design will look organized and easy to scan. Be assured that the viewers will not find it hard to glance and search your sites contents.

3. Be sure that sections are well separated. It must be easy to trace and the contents are easy to read. To distinguish one section from the other, you can use different colors or a thin line will do. Using borders is also a good remedy. Another option is to use blank buffer zones. This is somewhat similar to the concept of borders and dividing lines the only difference is that you are creating invisible lines to separate the parts of a page.

4. If web design is the queen, the king must be the content. Thus, to make your site functional, make sure that the information is tight and full. So not waste the space. Put something in it to make it productive.

Bear in mind that your site is not mainly to entertain their eyes. It is there to cater to their needs, answer their queries and tickle their fancies.

6 Tips To Best Computer Buy


6 Tips To Best Computer Buy

Buying a new computer can become a tedious task these days as many of us tend to get confused or simply don’t know how to choose the best computer from the wide range available. Here are 6 tips for best computer buy:

1. The first and logical thing to do is determine exactly where you will be using your computer from. Do you plan to use it at home, or do you travel with business often? After you answer this question you know if you want a desktop computer or a notebook.

2. The next thing to do is to determine your budget. There is a wide range of both desktop and notebook computers to choose from so they can cover any budget. Desktop computers can cost anywhere between $500 and $2000 (Note that many sites don’t list the monitor in the cost, so read carefully before clicking the checkout button), while notebooks between $800 – $2000+. Decide on how much money are you willing to spend and continue to the next step.

3. Now it’s time to determine what will you be using the computer for. Are you buying it for your kid to play video games, watch movies or do you plan to use it for work or internet surfing? Of course, you can buy a computer and use it for all of those things but for example, if you plan to use it just for business then you needn’t buy a computer with the best video card on the market.

4. Are you going to store photos, Microsoft Office documents, mp3 files, video files, etc.? You need to think about this to determine what hard drive your computer needs. If you’ll be using it to store photos and Office files then you need something in the range of 60GB but no more. If you plan to store many video and audio files then a 220GB hard drive would be more appropriate.

5. Another very important thing to consider, which many people overlook, is how often do you replace your computer? This is very important because most new computers come with a special OEM license for Microsoft software. As this license cannot be used on any other computers, if you change your computer often then it would be a waste of money to buy each end every one of them with the software and pay for it every time. If you change your computer often it would be wise to purchase a retail copy of the Microsoft software and save money.

6. Buy a ready-made computer or create your new computer by selecting all the parts yourself? In my opinion, if you’re a person who changes their computer often then buying a ready-made one is the perfect choice for you. If you don’t plan on changing the computer then it would be wise to create it yourself at a local store or even on some sites on the internet. This is because all the big computer companies use proprietary components and if you buy a ready-made one it is usually harder to upgrade later.

Introduction and Getting Started with GatsbyJS



Introduction and Getting Started with GatsbyJS

GatsbyJS is a free, open-source React-based static site generator.  It is specifically built with performance in mind and delivers 2-3x fast results as compared to same kind of applications built using different tools.


Before you start working with Gatsby, it’s better to have some prior knowledge of JavaScript, ES6, React and obviously HTML and CSS.

Misconceptions about Gatsby:

It is a general misconception about Gatsby which may be due to the slogan that it’s a static site generator which makes people think, what if we have to use dynamic content? Brace yourselves, everyone, because the answer is YES! You can use dynamic content without any problem in Gatsby.

Get Started:

So now as we know what Gatsby is, let’s get started:

First of all, you should have the latest version of NodeJS installed on your system. If you don’t have Node installed, you can visit the NodeJS website (link provided at the bottom) to install Node.

Now open the terminal and install Gatsby CLI:

npm install -g gatsby-cli

This command installs Gatsby CLI globally on your system.

Gatsby CLI will help us use specific functionality like creating a new website, running development server and creating production build, etc.

Now let’s create a new project using CLI. Run the following command in terminal:

gatsby new gatsby-site-name

This command will generate a new website for us which is ready to run (no configuration required whatsoever) HURRAAAYYY!

Running Development Server:

In order to start the development server, use the following command in terminal:

gatsby develop

It will start a hot-reloading development environment on port 8000. You can access the website using URL: localhost:8000

Project Breakup:

By now you have installed and seen the running demo website. Time to explore the code doesn’t you think! Open project in your favorite text editor, I prefer Visual Studio Code, but you can choose whichever code editor you feel comfortable with.

Once you will open the project on the code editor, you will see the following project structure:

|-- / node_modules
|-- /src
    |-- / components
    |-- Images
    |-- /pages
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js
|-- package.json

Notable files/folders and their definitions:

  • node_modules — contains all of the installed modules and packages
  • gatsby-config.js — configure options for a Gatsby site, with metadata for the project title, description, plugins, etc.
  • gatsby-node.js — implement Gatsby’s Node.js APIs to customize and extend default settings affecting the build process
  • gatsby-browser.js — customize and extend default settings affecting the browser, using Gatsby’s browser APIs
  • gatsby-ssr.js — use Gatsby’s server-side rendering APIs to customize default settings affecting server-side rendering
  • src/components — this folder contains the components and some essential components that you need are created by default here like header and layout.
  • src/images — contains images for your website
  • src/pages — website pages will reside in this folder

Pages, Routing and Internal page linking:

The most important question that comes to our mind now is how pages and routing work.

When you create a new file under the src/pages folder, file name automatically becomes the path of that page. For example, if the file name is “test_page”, page route will become “localhost:8000/test_page”.

Now next question that comes to our mind is how internal page links work. Although you can use an HTML anchor tag if you have some prior knowledge of React, your answer should be a big NO.  If you will use anchor tag, it will destroy the whole purpose of Single Page Application (SPA) as it will reload the page.

Gatsby offers us a very elegant solution for page linking. It has a built-in <Link> component which enables linking internal pages and offers a performance boost by using the preloading features. This means if you are on a certain page that contains the Link tag, Gatsby will preload the page defined in that tag for a smooth user experience.


import React from "react"
import { Link } from "gatsby"

const Page = () => (
      Check out my <Link to="/blog">blog</Link>!

      {/* Note that external links still use `a` tags. */}
      Follow me on <a href="https://twitter.com/gatsbyjs">Twitter</a>!

In the example mentioned above, you can see the basic usage of Link tag. In order to use it, you must import the Link component and in the link tag, you must define “to” attribute for the destination link. Link tag offers tons of cool features too like active link class and active link styles etc, but as the scope of this article is just an intro and is meant for beginners so we are not going to discuss them here. You can check out the official Gatsby documentation for more details.

Gatsby Plugins:

Gatsby is designed to be extensible so it offers tons of cool features in the form of plugins. The advantage of using Gatsby plugins is that they offer prepackaged integration into the core Gatsby APIs to save you time and energy, with minimal configuration.

You can install these plugins (https://www.gatsbyjs.org/plugins/) as node packages and add functionality to your website.

Installation and Configuration:

To install the Gatsby plugin, just run the nom install command with the name of the plugin:

npm install --save gatsby-transformer-json

In order to make the plugin work, you also have to add the plugin name in a gatsby-config.js file in plugins array.

module.exports = {

  plugins: [`gatsby-transformer-json`],


If the plugin takes options, you can also define them here too.

Using Third-Party Plugins:

Plugins offered by Gatsby are just an added feature, it doesn’t mean that it is mandatory only to use these plugins. If you want to install other third party plugins/packages like Axios, lodash, etc, you can install and use them too.

Generating files for deployment on the server:

Once your website is created, obviously you want to deploy it on the server. Run the following command in terminal:

gatsby build

Once done, you will find all the files required for deployment in the public directory at the root of the project.

Important Links:






How to Setup Angular Project for Beginners

How to Setup Angular Project for Beginners


In the last couple of years, we have seen that Single Page Applications (SPAs) and UI frameworks have taken over the JavaScript world by storm. Today we have multiple frameworks and libraries options ranging from React to Angular and many more.

 So, let’s discuss how to get started with Angular, how to install it and take a quick overview of the structure of the default bootstrap project.


Commonly referred to as “Angular 2+” or “Angular v2 and above” is a Typescript-based open-source web application framework used to develop Single Page Applications (SPAs).

Angular CLI:

Angular CLI (Command Line Interface) was introduced with Angular. As the name specifies, it is a command-line tool for creating angular applications. It is recommended to use angular CLI for creating angular applications as you don’t need to spend time installing and configuring all the required dependencies and wiring everything together. It also provides other features like building and running application etc.

Angular CLI can be installed using the following command in a command prompt:

npm install -g @angular/cli

You must have a Node Package Manager (NPM) installed to install angular CLI. If you don’t have NPM installed, it can be downloaded from the Node website for free (https://nodejs.org/en/download/).

Angular Project Setup:

To set up the angular project we will use Angular Command Line Interface (CLI). Open the command prompt and go to the location where you want to create the project. Run the following command:

ng new hello-world

Now navigate to the directory (cd hello-world), you will see that CLI has created a bootstrap project with multiple files and folders. Run the project using the following command:

ng serve

The angular project use port 4200 by default. You can see the default project by opening the following link in your browser:


IDE for Angular:

You can use any IDE which you like and comfortable working with. Visual Studio Code is also a very good option; it is free and gives tons of built-in options and plugins to work with Angular.

Angular Bootstrap Project Overview:

In the angular bootstrap project created by CLI, you will see multiples files and folders. Let’s take a quick overview of what these files and folders do.

  • e2e (End to end): This folder contains testing files for the high-level test of a feature.
  • node_modules: This folder contains all the modules and plugins required for your project. Any plugin you will install later using npm will also go in this folder.
  • src: This folder contains the main logic of your website. It is subdivided into folders like ‘app’ folder where all the components will be created, assets folder for your images, fonts, etc. Environment folder contains files for production and development by default. Your styles file is also placed in this folder.

Outside these folders on the root, you have your angular.json file for configuration and package.json file which contains information regarding all the installed packages.


As already mentioned, Angular uses typescript, so what is typescript! Typescript is a superset of JavaScript with more features than vanilla JavaScript, it is strongly typed and provides features like Classes and Interfaces, etc. Typescript cannot run directly in the browser, it is first compiled by Angular CLI into JavaScript and then it runs in the browser.

How Angular application gets loaded:

By now you must have checked the bootstrapped angular app created using Angular CLI in your browser. Now you must be wondering how the app gets loaded. Let’s solve this mystery and see how the magic happens.

If you open the src folder, you will see Index.html file, open it in the editor and you will see following tags:


These tags represent the base component of our application. Logic written in this base component will be populated in these tags. Now the question is that how will this happen?

If you open the main.ts file you will see the following line:

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

Using this line we are letting angular know that which module you have to load when you start. This AppModule is located in app folder under src folder. Now if you open app.module.ts file you will see that we are importing AppComponent file at the top and passing it to the bootstrap array. This bootstrap array contains all the components which angular should know when it starts.

Now open app.component.ts file. Here you will see app-root selector and AppComponent class declaration which I am sure you are now familiar with.


These are the building blocks of angular application. Angular application is composed of multiple components.

When you generate a component it will give you following files:

  • Component styles file (component_name.component.css)
  • Component template file (component_name.component.html)
  • Component typescript file (component_name. component.ts)
  • Component unit test typescript file (component_name. component.spec.ts)

Component style file contains all styles specific to component, template file contains the HTML template, Typescript file contains the business logic and Unit test file contains the Unit tests.

Component TypeScript File Deep Drive:

Typically a component typescript file looks like this:

import {Component} from '@angular/core';

selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']

export class AppComponent {
//logic goes here

Component typescript file is basically a typescript class file where all your business logic resides. We can divide it into three sections. First the Imports section where you import all the modules or packages required. Secondly the component metadata section declared using @Component where we define the component configuration logic like what will be the selector, its template path and styles path. Third is the business logic section, this is the class which contains all our logic.

Angular Modules:

You must have noticed an app.module.ts file in the app directory and must be wondering what this file do. Angular uses components to build web pages and modules to bundle these components into packages. Angular modules are defined by @NgModule decorator, like @Component decorator, typescript does not know about @NgModule decorator either. So we will import it from the @angular/core package as we imported @Component.

Angular module typically looks like this:

   declarations: [AppComponent],
   imports: [BrowserModule ],
  providers: [],
   bootstrap: [AppComponent]

Declarations array contains the component class names and imports array contains names of other modules. Other modules can either be Angular’s built in modules or modules created by user. Modules is an advance topic so we will discuss it later in detail.




ACF PHP vs. JSON Overview

This article list the pros and cons of ACF JSON and ACF PHP. This article already assumes you know what ACF and WordPress is, and have working knowledge of the WordPress directory.

I was recently given the pleasure of researching the pros vs. cons of ACF (Advanced Custom Fields) PHP vs. JSON export to identify future maintenance of existing WordPress stack utilizing ACF.  Prior to this project I have always been taught to use the ACF JSON export when working with multiple devs. Even in my research ACF JSON seemed to be the solution to managing your ACF with multiple devs. My assumption based on my research was to use ACF JSON for collaboration among other devs. But in previous projects maintaining ACF utilizing JSON I found syncing issues and fields would go missing between environments.

In addition utilizing the ACF JSON feature with Git we would run into issues with version control. I found to be the real benefit of the ACF JSON is you get to use the nice ACF JSON GUI in the WP-Admin which can make for easier for development but if you are willing to take make the effort, utilizing the ACF PHP to maintain isn’t so bad. Plus utilizing the ACF PHP export it allows for easier version control with Git, and control of the ACF instead of exposing them in the WP-Admin for Administrators (Note: you most likely can control ACF viewing in the WP-Admin utilizing functions.php file). For now going moving forward with future projects I will try to maintain ACF utilizing PHP and see how it goes, can always change in the future.

ACF PHP Pros and Cons

Pros​ of ACF PHP

  • It does help with binding field logic to a theme.
  • This feature is a one-way export.
  • Allows for greater control via customfields.php
  • May avoid Git versioning conflict
  • May avoid ACF JSON syncing issues

Cons​ of ACF PHP

  • ACF PHP export does not help with version control and local development? – Not neccarsily, see pros above.
  • To perform CRUD (create, updated, delete) on existing ACF there isn’t a way to do this. ​- Has to be done via PHP, see here.
  • Now, there is a plugin that enables you to do this, but ACF doesn’t do it by default https://github.com/BeAPI/ACF-PHP-Recovery
  • Because of the one-way export, once it has been exported and transferred to another environment, you cannot easily change or extend the ACF settings.​ – Again you can register fields via the PHP export
  • Also, this method doesn’t work well with merging two different setups that has been developed separately.
  • A field group in PHP file will not show up in the ACF admin unless you import a JSON file.

ACF JSON Pros and Cons

Pros of ACF JSON

  • If you only require a solution for distribution across multiple environments, please familiarize yourself with the local json feature as this solves the issue with minimal effort.
  • Local JSON is a new feature added in version 5 which saves field group and field settings as .json files within your theme. The idea is similar to caching, and both dramatically speeds up ACF and allows for version control over your field settings!
  • The real power in ‘local JSON’ is the ability to sync changes. This allows multiple devs to work on a project, use git to push / pull files, and keep all databases synchronized with the latest field group settings!
  • JSON field groups will be available for sync when either the JSON field group does not exist in the DB, or when the JSON field group contains a higher ‘modified’ value (within the JSON array) than the DB post’s modified date.
  • When fields groups are detected for synchronization, you will see a new tab above the field group list where you can select the groups to be imported.
  • ACF’s Local JSON feature can dramatically boost performance when it comes to your custom fields. It works similar to caching in that it saves both field group and field settings as a .json file on your web server.

Cons of ACF JSON

  • ACF JSON Conflicts with Syncing and Git versioning.
  • Keep ACF field groups out of the production site’s database.
  • Only make changes to field group settings locally.
  • Hide the ACF Field Groups admin page on the production copy of the site.
  • Good article on possible conflicts with JSON: https://www.awesomeacf.com/how-to-avoid-conflicts-when-using-the-acf-local-json-feature/ and why we should follow the above instructions.

This article was put together by the following resources:

Conclusion of ACF JSON vs. PHP

It’s really depends on the project and your personal preference. Do you want to make the development harder on yourself/team, to avoid versioning/syncing issues with ACF? Or do you want to have easier CRUD via WP-Admin GUI? The choice is up to you, be flexible and figure what works out for you and your team.



Stop Struggling with JavaScript


Are you a front-end developer who is struggling to truly understand JavaScript? Or maybe you are UI/UX designer working with a front-end developer who is an advanced JavaScript developer. Regardless where you are at in your professional web dev/design career, JavaScript is an important language to at least have some basic understanding of.

I have even avoided JavaScript for a portion of my web career just because I was either assigned to projects that did not require my full attention to the language or was able to work with other front end developers who were able to assist me with that portion of the project. I have even written about JavaScript and other web anxiety.

Beyond HTML, CSS, PHP and WordPress

But recently I had to put my foot down and fully indulge in the JavaScript language because I wanted to advance my career beyond HTML, CSS, PHP, and WordPress.  I have spent indulging in physical books, e-books, audiobooks, videos, and online courses. They say that “10,000 hours” in anything makes you an expert and that is what I set out to do.  Here’s what I have spent doing to truly understand the JavaScript and break any fear of the language:

JavaScript Books:

Below is a list of books that have helped me truly understanding programming and the JavaScript language, I especially recommend that You Don’t JS Series By Kyle Simpson. I personally enjoyed the hard copies of the book because I enjoy highlighted and making physical notes in the book but there are of course free digital copies on github.

JavaScript Audiobooks:

I have a long commute to and from work some days. So beyond podcasts, I enjoy audiobooks too. Now I know what you may be thinking? JavaScript audiobooks? How? Why? It’s not all about writing code, all though that is the fun part, sometimes. It’s also about understanding the overall concept of it.

These are just some of the many ways I am improving my JavaScript skills. So, whatever it’s you are afraid to learn or don’t think you can’t learn, just consume yourself in for 10,000 hours and eventually you will get it.