Looking at both 2022 and 2023

#​620 — January 6, 2023

Read on the Web

We’re back for 2023 ? As is our tradition, we’re taking a quick look back at the past year – this time led by a few choice retrospectives, then followed by the most popular articles and tools included in JavaScript Weekly in 2022. There’s sure to be some things you missed or want to revisit – enjoy!
__
Peter Cooper and the Cooperpress team

JavaScript Weekly

? The 2022 JavaScript Rising Stars — For the seventh time, Michael Rambeau kicks off our year with a roundup of ‘trending projects’ in the JavaScript space. Bun takes the top spot for 2022, but we’ll leave the rest for you to check out. A few guest authors also share their opinions on the ecosystem.

Michael Rambeau et al.

Evan You Looks at 2022 and 2023 — You’ll know Evan for Vue.js and Vite and here he recaps what happened in the Vue world in 2022 (like Vue 3.x becoming the new default version) and what we can expect in 2023, including the mysteriously named Vapor Mode.. We’re also warned Vue 2.x has one year before it reaches EOL.

Evan You

? Retire your Legacy CMS with ButterCMS — ButterCMS is your new content backend. We’re SaaS so we host, maintain, and scale the CMS. Enable your marketing team to update website + app content without needing you. Try the #1 rated SaaS Headless CMS for your JS app today. Free for 30 days.

? ButterCMS sponsor

Six JavaScript Projects to Watch in 2023 — A reasonable selection, focused on newer, more cutting edge, but also very promising projects (including the aforementioned Bun).

AsyncBanana

LOOKING BACK AND FORWARD:

Michael Shilman writes about the future for Storybook in 2023.

Ryan Carniato ponders where JS frameworks are headed in 2023.

? ▶️ 10 JavaScript conferences to consider attending this year.

Some other 2022 roundups and reflections: Cassidy Williams, Igalia Web Platform Team, Dave Rupert, Stéphanie Walter, Pawel Grzybek, Stephanie Eckles, Michelle Barker, Rachel Andrew, Remy Sharp, Ahmad Shadeed, the HTTP protocol ?

RELEASES:

Spacetime 7.4 – Lightweight timezone library.

Lerna 6.4 – JS monorepo build tool.

TestCafe 2.2 – End-to-end Web testing.

Vuetify 3.1 – Vue component framework.

? Top Articles & Tutorials of 2022

As determined by their popularity in JavaScript Weekly.

1. Douglas Crockford: “The best thing we can do today to JavaScript is to retire it.” — The most popular link of the year was to an interview with the author of JavaScript: The Good Parts (and discoverer-of-sorts of JSON) where he explained the benefits of code reading, why we need better languages, and how he won’t “write about JavaScript again.”

Evrone

2. Ecma International Approved ECMAScript 2022 — The second most popular item of the year was a bit more positive, with Ecma making ECMAScript 2022 a standard. Dr. Axel brought us up to speed with what this meant at a practical level. You’ll already be using some of these features – this move just tied up the formalities.

Dr. Axel Rauschmayer

▶  Whiskey Web and Whatnot: Your New Favorite JavaScript Podcast — A fireside chat with your favorite devs. Guests include Wes Bos, Charlie Gerard, Chris Coyier, and Kelly Vaughn.

Whiskey Web and Whatnot sponsorpodcast

3. JS Function Composition: What’s The Big Deal? — James’ articles on JavaScript fundamentals are always popular and last year we got a fresh one focusing on a common activity: function composition. “What’s the big deal?” he asks.

James Sinclair

4. AbortController is Your FriendAbortController provides a way to abort web requests at any point without waiting for a response but it’s possible to twist it into other use cases, as we saw here.

Sam Thorogood

5. Ten Common JavaScript Issues Developers Face — A good old-fashioned list. If you’ve been working with JavaScript for many years, these are potholes you (probably) know to avoid but there’s enough to chew on here otherwise.

Ryan J. Peterson

6. A Pipe Operator for JS: Introduction and Use Cases — Many developers feel a pipe operator is missing from JavaScript. Luckily there’s a pipeline operator proposal at stage 2 in TC39. Dr. Axel explains why you’d want this and how it could work.

Dr. Axel Rauschmayer

7. Patterns.dev: Modern Web App Design Patterns — A free book you can download in PDF format or enjoy on the Web. Learn about lots of fundamentals, from how different styles of rendering or importing resources work to performance optimizations and case studies.

Lydia Hallie, Addy Osmani, and Others

8. Decorators for ES6 Proposal Reached Stage 3 at TC39 — It’s a few years in the making, but a decorators proposal conditionally made it to stage 3 and people were very excited. Fingers crossed we see more from this in 2023.

Ecma TC39

? Top Code & Tools of 2022

As determined by their popularity in JavaScript Weekly.

1. Rome Formatter: Super Fast JavaScript Formatting — I liked the image for this enough to want to include it again 😉 As of 2023, Rome (now at version 11) remains an ambitious project that sets out to replace a lot of JS tools in one hit with the initial focus being on Prettier-esque code formatting, as well as linting. Compiling, bundling, and testing features are scheduled to appear throughout 2023.

Rome Team

2. TypeScript 4.6 Released — Not a lot to say here, as TypeScript is always popular, and it’s now up to version 4.9, but with v4.6 it took a step forward by being able to detect more syntax errors in plain old JavaScript, a benefit for all JavaScript-developing VS Code users, at least.

Daniel Rosenwasser

Dynaboard: The Pro-Code Web App Builder Made for Developers — Build high performance public and private web apps in a collaborative — code forward — WYSIWYG environment.

Dynaboard sponsor

3. Vite 4.0 Released — This was only a month ago, too. From the same creator as Vue.js, Vite is an exciting piece of frontend tooling offering lots of goodies out of the box. We look forward to more Vite news in 2023.

Evan You and Vite Contributors

4. Lexical: An Extensible Text Editor Library — Out of Meta came a new text editor framework putting accessibility, performance, and reliability at its heart. At only 22KB gzipped and with React 18+ support (but vanilla is also OK), it reminded us of Draft.js but they say it’s the “next generation” and Meta is already replacing Draft.js with Lexical in their internal apps.

Meta / Facebook

5. Bun: A (Still) Interesting New JavaScript Runtime — Bun appeared in summer 2022 as a new JavaScript runtime built not around V8 (like Node.js or Deno are) but WebKit/Apple’s JavaScriptCore. It includes its own bundler, transpiler, task runner, and npm client, but most significantly boasts huge performance improvements over existing options and supported a lot of Node and Web APIs out of the box.

Jarred Sumner

6. JSON Crack: Visualize JSON Data in Graph Form — Got JSON, want to view it? This is a neat tool for working with and displaying JSON data structures. You can play with it online, embed the graphs into your site, or download them for further use.

Aykut Saraç

Stuck on Node 10? Need to Upgrade but Don’t Have Time? Contact Us ?

UpgradeJS.com | Node and JavaScript Upgrade Services sponsor

7. Shader Park: Create Interactive 2D and 3D Shaders with JavaScript — An open source Web-based platform, community, and library for simplifying the mystifying world of shaders and GPUs by letting you create them procedurally with JavaScript. Note: This site is heavy on the browser given its use of WebGL, so may not be suitable for every device.

Blankensmith and Whidden

8. Axios 1.0: The Popular HTTP Client Library/API — With 98k GitHub stars and a presence in numerous thousands of package.json files, Axios remains very popular and it’s amazing it only hit 1.0 in 2022. The Fetch API has taken much of Axios’ thunder but, like jQuery, Axios still wraps up a lot of functionality into a broadly liked API. (Official homepage.)

Axios Project

? Jobs

Developer Relations Manager — Join the CKEditor team to build community around an Open Source project used by millions of users around the world ?

CKEditor

Backend Engineer, TypeScript (Berlin / Remote) — Thousands of people love our product (see Trustpilot for yourself). Join the team behind it and help us scale. ?

Feather

Find JavaScript Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

We’re back to normal service as of next week! If you’ve got anything you’d like to submit for our consideration, hit reply and let us know.

Flatlogic Admin Templates banner

10 KPI Templates and Dashboards for Tracking KPI’s

Introduction
What Instruments Do We Need to Build an Effective Dashboard for KPIs?

The Top Dashboards for Tracking KPIs
Sing App Admin Dashboard
Retail Dashboard from Simple KPI
Light Blue React Node.js
Limitless Dashboard
Cork Admin Dashboard
Paper Admin Template
Pick Admin Dashboard Template
Able Pro Admin Dashboard
Architect UI Admin Template
Flatlogic One Admin Dashboard Template

You might also like these articles

Introduction

KPIs or Key Performance Indicators are a modern instrument to make a system (business, for example) work effectively. KPIs show how successful the business is, or how professional the employee is. It works with the help of measurable values, that are intended to show the success of achieving your strategic goals. KPIs are measurable indicators that you should track, calculate, analyze, and represent.  If you read this article, it means that you want to find or build an app to help you in all operations above. But before we list the top dashboard KPI templates, it’s essential to understand how exactly to choose a set of indicators that boost the growth of a business. For KPIs to be useful, they should be relevant to a business. That is crucial not only for entrepreneurs who try to improve their businesses but also for the developers of the software for tracking KPIs. Why?

Developers need to be aware of what instruments they should include in the app so the users will be able to use KPI’s easily and effectively. Since there are much more than a handful of articles and approaches on how to find the right performance indicators, what KPIs to choose, how to track them, development of a quality web application can be complicated. 

However, from our point of view, the most challenging part of such an app is building a dashboard that displays all necessary KPIs on a single screen. We have explored the Internet, analyzed different types of tools to represent KPIs, found great dashboards, and make two lists: one consists of the charts and instruments you should definitely include in your future app, the other is top dashboards we found that contain elements from the first top. Each KPI template on the list is a potent tool that will boost your metrics considerably. Let’s start from the first list.  

Enjoy reading! 

What Instruments Do We Need to Build an Effective Dashboard for KPIs?

Absolute numerical values and percentage (in absolute amount)

With the help of percentage, you can make it more informative by adding the comparison of KPI with the previous periods.

The source: https://vuestic.epicmax.co/admin/dashboard

Non-linear chart

One of the core charts.

The source: https://visme.co/blog/types-of-graphs/

Bar chart

Another core element to display KPIs.

The source: http://ableproadmin.com/angular/default/charts/apex

Stacked Bar Graphs

It’s a more complex instrument, but more informative respectively.

Progress bars

Can be confused with a horizontal bar chart. The main difference: a horizontal bar chart is used to compare the values in several categories, while a progress bar is supposed to show the progress in a single category.

The source: https://vinteedois.com.br/progress-bars/

Pie charts

The source: https://www.cleanpng.com/png-pie-chart-finance-accounting-financial-statement-3867064/preview.html

Donut chart

You can replace pie charts with a donut chart, the meaning is the same.

The source: http://webapplayers.com/luna_admin-v1.4/chartJs.html

Gauge chart

This chart helps users to track their progress towards achieving goals. It’s interchangeable with a progress bar. 

The source: https://www.datapine.com/kpi-examples-and-templates/finance

Pictograms

Instead of using an axis with numbers, it uses pictures to represent a relative or an absolute number of items.

The source: https://www.bootstrapdash.com/demo/corona/jquery/template/modern-vertical/pages/charts/justGage.html

Process behavior chart

Especially valuable for financial KPIs. The mainline shows measurement over time or categories, while two red lines are control limits that shouldn’t be surpassed.

The source: https://www.leanblog.org/2018/12/using-process-behavior-charts-to-compare-red-bead-game-willing-workers-and-baseball-teams/

Combined bar and line graph

The source: https://www.pinterest.co.uk/pin/254031235216555663/

Some additional tools:

These tools are also essential for building a dashboard for tracking KPI: calendar, dropdowns, checkboxes, input fields. The option to create and download a report will also be helpful.

The Top Dashboards for Tracking KPIs

Sing App Admin Dashboard

The source: https://demo.flatlogic.com/sing-app-vue/#/app/main/visits

If you look through a huge number of KPI templates and don’t find one that you need, you should take a look at Sing app. Sing is a premium admin dashboard template that offers all necessary opportunities to turn data into easy to understand graphs and charts. Besides all charts and functions listed above, with Sing, you get such options as downloading graphs in SVG and PNG format, animated and interactive pointer that highlights the point where the cursor is placed, and change the period for values calculation inside the frame with the graph!

MORE INFO
DEMO

Retail Dashboard from Simple KPI

The source: https://dashboards.simplekpi.com/dashboards/shared/NT0B93_AnEG1AD7YKn60zg

That is a dashboard focused on the retail trade sphere. It already contains relevant KPIs and Metrics for that sector, so you need just to download it and use it. Since it’s an opinioned dashboard you will not get a great customization option. If you are a retailer or trader you should try that dashboard to track the performance when selling goods or services.

MORE INFO
DEMO

Light Blue React Node.js

The source: https://flatlogic.com/templates/light-blue-react-node-js/demo

It is a React Admin dashboard template with Node.JS backend. The template is more suited for KPIs that reflect goals in web app traffic analysis, revenue and current balance tracking, and sales management. However, Light blue contains a lot of ready-to-use working components and charts to build a necessary dashboard. It’s very easy to customize and implement, both beginners in React and professional developers can benefit from that template and get a track on KPIs, metrics, and business data.

MORE INFO
DEMO

Limitless Dashboard

The source: http://demo.interface.club/limitless/demo/Template/layout_1/LTR/default/full/index.html

Limitless is a powerful admin template and a best-seller on ThemeForest. It goes with a modern business KPI dashboard that simplifies the processes of monitoring, analyzing, and generating insights. With the help of that dashboard, you can easily monitor the progress of growing sales or traffic and adjust the sales strategy according to customer behavior. Furthermore, the dashboard contains a live update function to keep you abreast of the latest changes.

MORE INFO
DEMO

Cork Admin Dashboard

The source: https://designreset.com/cork/ltr/demo4/index2.html

That is an awesome bootstrap-based dashboard template that follows the best design and programming principles.  The template provides you with more than 10 layout options and Laravel Version of the extremely rare dashboard. Several pages with charts and two dashboards with different metrics ensure you have the basic elements to build a great dashboard for tracking KPI.

MORE INFO
DEMO

Paper Admin Template

The source: https://xvelopers.com/demos/html/paper-panel/index.html

This template fits you if you are looking for a concrete solution since Paper goes with eleven dashboards in the package! They all are unnamed so it will take time to look through them, but that time will be less than time for building your dashboard. Every dashboard provides a simple single-screen view of data and allows sharing it with your collages.

MORE INFO
DEMO

Pick Admin Dashboard Template

The source: http://html.designstream.co.in/pick/html/index-analytic.html

Pick is a modern and stylish solution for the IT industry. It’s a multipurpose dashboard that helps you to gain full control over the performance.

MORE INFO
DEMO

Able Pro Admin Dashboard

The source: http://ableproadmin.com/angular/default/dashboard/analytics

If you believe that the most qualified products are the most rated products, take a look at Able pro. Able pro is a best-rated bootstrap admin template on Themeforest. The human eye captures information within the graph blazingly fast! With that dashboard, you can go much deeper into the understanding of KPIs and make the decision-making process much easier.

MORE INFO
DEMO

Architect UI Admin Template

The source: https://demo.dashboardpack.com/architectui-html-pro/index.html

Those who download Architect UI make the right choice. This KPI template created with hundreds of build-in elements and components, and three blocks of charts. The modular frontend architecture makes dashboard customization fast and easy, while animated graphs provide insights about KPIs.

MORE INFO
DEMO

Flatlogic One Admin Dashboard Template

The source: https://templates-flatlogic.herokuapp.com/flatlogic-one/html5/dashboard/visits.html

Flatlogic one is a one-size-fits-all solution for any type of dashboard. It is a premium bootstrap admin dashboard template that has been released recently in July 2020. It goes with two developed dashboards that serve well as KPI templates: analytics and visits. But it also offers four additional pages with smoothly animated charts for any taste and needs. The dashboard is flexible and highly customizable, so you easily get the benefit from that template.

MORE INFO
DEMO

Thanks for reading.

You might also like these articles:

14+ Best Node.js Open Source Projects

8 Essential Bootstrap Components for Your Web App

Best 14+ Bootstrap Open- Source Projects

The post 10 KPI Templates and Dashboards for Tracking KPI’s appeared first on Flatlogic Blog.Flatlogic Admin Templates banner