Javascript Clean Code Principles

One of the books that has most influenced my life is The Elements of Style by Strunk and White. I took a technical writing class in college where we closely studied its recommendations. The book is short and contains over 100 side-by-side comparisons of less effective and more effective writing.

Reading it made me realize that I learn well by example and comparison. I’ve long wanted to write an article that shows less effective and more effective programming approaches by comparison for those who also learn well by comparison.

Today I’m going to lay out what I’ve found to be the most important principles for writing clean code. In the first section, the examples are written in JavaScript, but they apply to almost every language. In the second section, the examples are specific to React.

Before we start the side-by-side comparisons, I want to make a recommendation that needs no side-by-side view.

Use prettier

If you have not heard of it, prettier is an automated code formatting tool. The idea is that you add a prettier config file to your project, and request all your teammates or contributors to enable an IDE plugin that re-formats code on save.

Never again will my team have an argument about tabs vs spaces or 80-column wrap vs 120-column wrap. It will also settle disputes about what types of quotes to use, whether to use semicolons or what spacing to use around brackets.

Prettier was created for JavaScript, JSX, and JSON, but it has plugins for HTML, CSS, md, XML, YAML, toml, PHP, python, ruby, java, shell and many more

My favorite thing is that I concentrate on code and not on formatting. I can quickly add code without proper newlines or spacing and then watch prettier magically format the new code.

Let’s start

Each recommendation below has a very short description and a code example so you can compare more effective vs. less-effective approaches.

Exit early when possible

When writing a function, consider the negative outcomes that would allow you to exit early from the function. You’ll find your code has fewer indentations and is easier to read.

Be expressive, not clever

Of the two functions below, which would you rather come across in a project? Maybe the first one is clever and concise, but how much time does it take you to tweak the functionality?

Make variable names descriptive

When you write code, you may have only one thing on your mind. But when you come back later to look at code, descriptive variable names are very helpful.

Prefer for-of loops

for-of loops have some advantages over for-i, forEach and for-in loops:

Fewer characters
Ability to continue, return or break from the loop
Easier to read and follow

Prefix booleans with verbs such as “is” and “has”

Verbs help set a boolean apart from other types.

Avoid double negatives.

Sometimes they’re subtle and lead to cheeky bugs.

Avoid using “!” with “else”

Instead, use the positive form in the if condition.

Prefer string interpolation over concatenation

It’s almost always more readable to interpolate.

Avoid using the ternary operator to a return boolean value

In return statements, ternary operators are redundant.

Use try-catch with await

async await makes code more readable than a tree of .then() calls. But don’t forget that you need to catch rejections that await-ed values might throw.

Avoid using “magic” numbers

Any number or string that has a non-obvious meaning should be declared as a separate, descriptively named variable.

Avoid declaring functions with more than 2 arguments

Arguments should have a logical order. When you have 3 or more arguments, the order is often not obvious. Yes, we have intellisense in our IDE, but save some thought cycles by accepting “named” arguments if appropriate.

Prefer objects to boolean arguments

Code that calls the function will be cleaner and more obvious.

A Section on React

JSX and React have their own challenges that deserve some extra attention.

Declare DOM only once per function

You can take one of three approaches to avoid it:

Break components into smaller units
Use && as a stand-in for if blocks
Use the ternary operator for if-else blocks

Make your own wrappers on top of UI libraries

Your project might rely on MUI or another UI library for all it’s components. But keeping your UI consistent can be challenging if you have to remember sizes, colors and variants. In the example below, the project wants to always use medium outlined buttons in MUI.

Mind the guard operator

In Javascript, && is the guard operator not a boolean operator; it returns the first operand that is truthy.

A final word

Writing clean code takes practice. Be a code craftsman and take the time to learn good principles and make good habits.

The post Javascript Clean Code Principles appeared first on Flatlogic Blog.

Angular Material Admin Template Update

Angular Material Admin is updated and use latest dependencies.

What products are affected by the update?

Currently, the updates were released on 2 products:

Angular Material Admin Template Full
Angular Material Admin .NET Core

What has changed?

The main update is touch the version of Angular itself, now the template are built on 13 version instead of 11.

And also we made several minor changes that make this admin dashboard template up-to-date.

Updated the Angular CLI to 13
Update Angular Material;
Updated different packages;
Updated Angular Core to 13 version.

Moving forward and Summing Up

We will be constantly updating all our Angular templates. For sure we will release this year a template based on Angular 14.

Rest of our Angular templates your can find here: Flatlogic marketplace. If you face any difficulties setting up this or that template or admin dashboard, please feel free to leave us a message on our forumTwitter or Facebook. We will respond to your inquiry as quickly as possible!

And also check our platform where you can create Angular CRUD apps literally in minutes! 

Happy developing!

The post Angular Material Admin Template Update appeared first on Flatlogic Blog.

371: Jon Kantner

I got to speak to Jon Kantner! Jon is an incredibly prolific creator, and I believe has the most appearances in the CodePen Spark of any creator. Like so many other creators I’ve talked to Jon also shares what he knows in a variety of ways, like writing (see his personal site, or articles he wrote when I ran CSS-Tricks). We got to chat about some of his iconic Pens, his work, and some past fascinations like Tweet-sized code experiments. Follow him on Twitter here.

Time Jumps

00:26 Guest introduction

02:44 What’s a day like as a front end dev?

05:48 SVG Pens

06:48 Skateboard spinner Pen

10:38 Acrobatic tree loader

11:50 Input progress Xmas Pen

13:40 Writing about obsolete technology

16:02 Code golfing

19:25 Navigating without CSS

21:22 What new web tech are you excited about?

The post 371: Jon Kantner appeared first on CodePen Blog.

Vue Material Admin Update

Right after we have updated React Material Admin we also do the same with Vue Material Admin.

What products are affected by the update?

The update was released on 3 products:

Vue Material Admin Full
Vue Material Template Node.js
Vue Material Laravel Template

What has changed?

The main changes are in updated dependencies. We also updated the version of Vuetify as the Vue Material Admin based on it. So here is the list of main updates:

✅ amcharts/amcharts4: 4.10.22 -> 4.10.25
✅ amcharts/amcharts4-geodata: 4.1.22 -> 4.1.23
✅apexcharts: 3.29.0 -> 3.35.3
✅ axios: 0.23.0 -> 0.27.2
✅ core-js: 3.19.0 -> 3.22.7
✅ moment: 2.29.1 -> 2.29.3
✅ vue-router: 3.5.2 -> 3.5.3
✅ vue-apexcharts: 1.6.0 -> 1.6.1
✅ vuetify: 2.5.10 -> 2.6.6

So the Vue Material Admin is up-to-date and we would be really happy if you choose it for your future projects. You don’t need to spend your time updating all those technologies by yourself, so you can focus on developing business features.

Moving forward and Summing Up

We will be constantly updating all of our Vue templates as new libraries will release. And for sure sometime release one of our templates on Vue 3.

For the rest of our Vue templates, check our marketplace. If you face any difficulties setting up this or that template or admin dashboard, please feel free to leave us a message on our forumTwitter or Facebook. We will respond to your inquiry as quickly as possible!

Happy coding!

The post Vue Material Admin Update appeared first on Flatlogic Blog.

Next.js vs React: Which One to Choose for Your App?

The burning question today is What’s better: React or Next.js? Let’s have a look closely at both, compare them and see the difference between library and framework. In the React world, Next.js is one of the most popular frameworks for “hitting the ground running.”

What is Next.js?

Next.js is an open-source JavaScript framework for developing fast, lightweight, and easy-to-use web applications and static websites (one-pages) using React. Next.js was created by Vercel in 2016. Next.js requires Node.js and can be initialized using npm. There are a lot of reasons why Next.js has such a strong reputation in the world of application development. They are known for being reliable as they offer image optimization, internationalization, zero-config, Next.js analytics, hybrid: SSR and SGG, fast refresh, API routes, TypeScript support, file-system routing, code-splitting and bundling, incremental static regeneration, and built-in CSS support, etc.

Next.js includes all the features needed to build an application. Moreover, the documentation is excellent and it is becoming very popular among developers for frontend development.Here are the most popular platforms and apps of Next.js:, TikTok, Hulu, Binance, and many others that involve a massive number of users engaging with complex data influxes.

What is React?

React is an efficient, declarative and flexible JavaScript library for building interactive UI, inspired by xHP, the HTML component library for PHP. React was created by Facebook in 2011 and then open-sourced in 2013.React is used to create dynamic, mobile apps, one-pages, visualization tools, and dashboards. Here are some of the most popular platforms and apps created with React: Facebook, Netflix, Atlassian, Airbnb, Dropbox, Reddit, etc.

Next.js vs React

Even in a sea of JavaScript frameworks and libraries, React and NextJS stand out. React is the most popular JavaScript library for frontend developers. NextJS, although smaller than React, has grown continuously over the years and is well on its way to becoming the most-used JavaScript framework. So, let’s compare React and Next.js. React – is a JavaScript library for building UI. Next.js – is the React framework. NextJS is used on top of React, extending its features and optimizing the development process: React doesn’t even have to work with NextJS, but NextJS uses React to deploy applications.

React has a special framework – Create React App, an application used to create React projects and includes tools such as Babel, Webpack, and ESlint. Next.js is a React-based framework that allows you to build applications with server-side rendering. React is still the core of the application, but the structure and navigation mechanisms (architecture) – are defined by Next.js. The difference between a framework and a library is that a framework has more features and focuses on several aspects of development, and gives you rules and guidelines for writing code and structuring files.

React & Create React App (CPA)

Server-Side Rendering (SSR)
Supports different types of SSR.
– Static generation: obtaining data at build time. Best suited for use cases such as blogs or static websites.
– Server-side rendering: sampling data and rendering for each request. May be needed when you need to serve different views to different users.
Doesn’t support SSR out of the box. 
However, you can still set it up. 
It just takes more effort to configure SSR with your preferred server and configuration.

Almost everything is configurable
If you check the example NextJs templates, you can see files like 
babelrc, jest.config, eslintrc etc. that you can configure.
Doesn’t leave you much space to configure it. 
Configurations, such as webpack config, cannot be changed unless you do not deviate from the usual CRA path (eject, rescripts, rewired, craco). 
You should use what is configured in 
react-scripts, which is the core of CRA.

Well maintained. Release regular updates.
Very sensitive. 
If you keep up with updates of CRA releases, it is not difficult to maintain.


Supports typescript out of the box. 
Configurations for TypeScript:
touch tsconfig.json

Supports. You can initialize the CRA app with typescript like this:
npx create-react-app my-app —template typescript

Hooks Support

Redux Support

Incredibly fast apps thanks to static sites and server-side rendering. 
Decent, but the lack of code splitting results in poor performance.

Tiny, but friendly
Both huge and friendly

Support static exports, and pre-rendering, and has a lot of features, for example, automatic building size optimization, fast development compilation and preview mode.
Easily extensible, can include routing as well as management patterns with libraries.

Talent pool

Easy to learn

Development costs

Which one is better?

It’s hard to say that one is better than the other. Remember, React.js is a JS library – a set of tools you can use to build UI – and Next.js is a framework – the blueprints and rules you need to build an entire app – based on React so it’s not a pick this one instead of the other situation.

Use React when:

You need a highly dynamic routing
You’re already familiar with JSX
You need offline support

Use Next.js when:

You need an all-inclusive framework
You require backend API endpoints
You need server-side rendering

What do React vs Next.js projects look like


You can get started with React by installing Node.js on your machine and running npx create-react-app react-app. This will create a basic project structure with the src/App.js file as the entry point for the application. You’ll also have a public folder where you can store assets, and the initial scaffold looks like this:


With Next.js, you can get started by running npx create-next-app next-app. This will scaffold out a project that already has a pages folder for the pages or routes and a public directory that hosts your assets. The initial scaffold looks like this:

The files in the pages directory relate to routes in your application. The public directory stores your static files or images that you want to serve and can be directly accessed – no need to use require or other React traditional methods to import images into components.

Building Next.js and React projects with Flatlogic

The Flatlogic platform is a great way to bridge the gap between developing your applications. Applications usually use the same elements and components, when using the same technologies. The main thing that distinguishes them on a technical level is the database schema, which implements different data processing and storage mechanisms. The Flatlogic Platform allows you to create applications by combining parts and creating only those that need to be unique. Here you can see how to use the Flatlogic Platform to create Next.js, React applications, and other options for creating CRUD applications on the React. To generate your Next.js or React application, tap here and let’s go.

Step 1

Name your project and choose the tech stack: React as frontend and No-backend as backend.

Step 2

Choose the Starter Kit. Here you need to decide which starter kit is best for your project: Next.js or Create React App.

Next, you need to connect your GitHub repository and check the stack and starter kit and Finish the creation process.

Then you will be redirected to the project settings where you will need to deploy your application.


React and Next.js are new and useful tools for your project, but only for certain tasks. When you choose Next.js, it offers the best solutions for server-side rendering and static website development. It also makes it easy to manage projects with a variety of tools and features.

On the other hand, React is the best choice for developing UIs for one-page applications. Being mobile and web-enabled, it works with a layer of mobile and web applications to create more appealing and intuitive ones. In a nutshell, Next.js offers various tools and features to minimize the development process while React has better resources for the frontend development of your mobile and web applications.

Suggested Articles

What is Next.js? Top 7+ Next.js Templates
Angular vs React: Which One to Choose for Your Web App
Best Ways to Deploy React Apps

The post Next.js vs React: Which One to Choose for Your App? appeared first on Flatlogic Blog.

Build Your Own Little Menu Bar App for All Those Things you Forget

I have a little Pinned Pen of Things I Forget that I revisit quite a bit… when… I forget… things. It occurred to me the other day that it would be even more convenient as a menu bar app (macOS) than a Pen. Maybe an excuse to learn Swift? Nahhh. There’s always an app for that. I know Fluid can do that, but I wasn’t 100% sure if that’s up to date anymore or what. As I happen to be a Setapp subscriber, I know they have Unite as well, which is very similar.

So let’s do this! (This is a macOS thing, for the record.)

1) Make a little website of Things You Forget that allows you to one-click copy to clipboard.

You don’t need a special URL or anything for it. And good news, CodePen Projects can deploy your Project to a URL with a click.

Here’s my example Project.

2) Deploy it

Now I click that Deploy button in the footer and can kick it out to a live-on-the-internet URL easily.

3) Turn it into a Menu Bar App with Unite

Then I launch Unite and give it the barebones information it needs:

That’ll instantly make the app. It takes like 2 seconds. From here, two things:

Paste a better image into the Get Info window so you can have a cool icon.
If you’re on an M1 Mac, you might have to click the “Open using Rosetta” icon in order for it to work.

That second one is a little unfortunate. Makes me wish I tried Fluid, but hey, this ultimately worked. You’ll know you need to do it if you see this:

4) Enjoy

A totally custom-designed app to help your own brain!

The post Build Your Own Little Menu Bar App for All Those Things you Forget appeared first on CodePen Blog.

React Material Admin Full Update

As Material UI and React continue to grow and develop it has become clear that React Material Admin can’t live with the outdated versions of those libraries.

What products are affected by the update?

Currently, the updates were released on 2 products:

React Material Admin Full
React Material UI Admin Node.js

What has changed?

The main change is that now those templates are now using React 17 and Material UI 5, previously it was 16 and 4 versions accordingly.

And also we made several minor changes that make this admin dashboard template up-to-date.

Fullcalendar was updated to the 5.11 version
Added Datefns as datepicker library
Updated Apexcharts to version 3.35
Updated Formik library to the latest stable version
Mui-datatables library was updated to version 4
We have added Redux for management CRUD functions and authorization

As a result, the speed and usability of the React Material Admin template increased. Additionally, you don’t need to spend your time updating all those technologies by yourself, so you can focus on developing business features.

Moving forward and Summing Up

The ecosystem of our templates will be constantly updating. Next in line are Vue Material Admin and Angular Material Admin. Additionally, we are working on integrating some of the existing UI components from React Material Admin to the Flatlogic Platform generated react app.

For the rest of our React templates, check our marketplace. If you face any difficulties setting up this or that template or admin dashboard, please feel free to leave us a message on our forumTwitter or Facebook. We will respond to your inquiry as quickly as possible!

Happy developing!

The post React Material Admin Full Update appeared first on Flatlogic Blog.

370: Alex Trost

This week I got to speak with Alex Trost! Alex has been hard at work created Frontend Horse, a clever brand celebrating the beautiful and clever things in our industry via a newsletter, articles, streaming, a Discord community and more. This is the way to do it!

Time Jumps

00:15 Guest introduction

01:18 What is Frontend.Horse?

06:35 Helping people unlock new technology through a newsletter

11:22 The business angle to Frontend.Horse

16:27 Sponsor: Notion

17:29 History of Frontend.Horse

20:21 Embracing Twitch

22:42 Using Discord to build community

30:56 Building on CodePen

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your company’s information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at Take your first step toward an organized, happier team, today.

The post 370: Alex Trost appeared first on CodePen Blog.