Don’t Miss These 5 Game-Changing UI/UX Design Inspiration Platforms

Suyash Borikar — Thu, 21 Nov 2024 11:16:45 +0000

As UI/UX designers, we’re constantly seeking inspiration to craft delightful experiences. But with the ocean of resources out there, finding the right ones can feel overwhelming. That’s why I’ve compiled 5 latest gems for design inspiration that can elevate your work, each with its unique twist.

Discover UX Research : Browse Must-Have Apps on Appshots — Need high-quality app interface inspiration? Appshots showcases a rich collection of mobile app screenshots, categorized for your convenience. It’s a treasure trove for designing mobile-friendly experiences with pixel-perfect details.

SEESAW ✦ Design Inspiration — Seesaw is a curated showcase of beautiful, minimal, and creative web designs. It’s perfect for when you’re seeking layout inspiration or want to see how others are experimenting with design trends. If you’re ever stuck in a design rut, this is the place to break free.

Dark Themed Web Design Inspiration — Dark Design is an invaluable resource for those designing in the realm of dark themes. It offers design inspiration and practical guidance for creating stunning, accessible dark-mode designs, which have become increasingly popular across apps and websites.

Handheld Design® — Discover best-in-class mobile design inspiration — For designers working on handheld devices, this resource provides UI components, ideas, and design patterns specifically tailored for mobile devices. It’s a great go-to for enhancing your app’s user experience.

60fps — If smooth and delightful motion design inspires you, 60FPS Design is a must-see. While it’s the only paid tool on this list, its curated collection of animated interfaces is worth every penny for designers who love adding motion to their projects.

Feeling Overwhelmed? Meet StashSort.

If you’ve ever felt lost managing an ever-growing list of UI/UX resources, StashSort — Your UI/UX Resource Manager is here to help. It’s a customizable directory that allows you to:

Filter resources based on your design needs.
Add resources to your favorites, so you never lose track of them.
Discover plugins and tools in one organized space.
Create project stacks to group resources for specific projects.

Whether you’re a solo designer or part of a team, StashSort keeps your workflow smooth and your inspiration within reach.

We’re currently building StashSort to make life easier for designers and developers like you. Want to be part of this journey? Join the waitlist to be the first to explore this exciting tool and simplify your design journey.

Let me know in the comments which resource you loved the most, or if you have other hidden gems to share. Let’s inspire and create together! 🙌

JavaScript - Behind the Scenes!

Suyash Borikar — Wed, 22 May 2024 05:23:22 +0000

What is JavaScript?

JavaScript is a high level, dynamic, multi-paradigm programming language, which was created by Brendan Eich in 1995. He made JavaScript in order to make web pages more alive. However, JavaScript has evolved into a language which is used not only for client-side web development but also for server-side development.
By the end of this article you will become confident on how JavaScript works behind the scenes.

So, is JavaScript a Compiled or Interpreted?

Most of you might know the answer that JavaScript is interpreted language, which means the code is executed line by line. However, this is partially correct! Due to line by line execution, it led to slower performance of complex sites and therefore, in modern JavaScript, a more sophisticated approach is used which is called Just-In-Time (JIT) compilation.

Wait! What is Just-In-Time Compilation?

So whenever a JavaScrit program is executed, it is first parsed. The parsing includes tokenization in which the code is converted into series of tokens (such as keywords, operators, identifiers) and after tokenization the source code is analyzed and the tokens are then parsed according to the rules of JavaScript grammar. This process generates a data structure called as Abstract Syntax Tree (AST).

The AST is the tree representation of the hierarchical structure of the source code. The AST abstracts away the syntactical details and captures the logical structure of the code. So, basically, AST serves as an intermediate representation that captures logical structure of code, enabling JavaScript engine to interpret, optimize, and execute program efficiently.
After parsing the source code, it is compiled and converted into machine code and the execution takes place right away. Wait! Isn't it the same as interpretation? Yes, it is, but here comes the twist, the source code is continuously under optimization even after execution and this is what Just-In-Time Compilation means. The code is looked for any changes that may happen even after execution so it is under continuous optimization, once a change is identified the compilation followed by execution is performed again. This overall process of execution of JavaScript program takes place in JavaScript Engine so let's now understand what is JavaScript Engine?

JavaScript Engine

The JavaScript Engine can be said to comprise of two essentials: The Callstack and the Heap. The Callstack, the place exactly where the source code is executed, consists of the execution contexts and the Heap is the place where all the objects are stored.

The call stack is a fundamental part of how JavaScript engines manage the execution of code. It is a data structure that keeps track of function calls. The call stack operates on a Last In, First Out (LIFO) principle, where the last function called is the first one to be completed. And what are execution contexts? You can think of execution context as an environment in which piece of JavaScript code is executed.
Whenever a JavaScript program is executed, first the top level code (the code which is outside of any function and blocks) is executed. For this top level code, a global execution context is created. Remember, there is exactly one global execution context for any program, while there are equal number of execution contexts for the number of functions in the JavaScript program. The execution contexts for the functions are created only when the functions are called. The execution contexts are then placed on the top of global context.

Let's take a look at what's inside a execution context and then discuss how does this all work? The execution context contains of a variable environment, which in turn has let, const and var declarations, functions and arguments object. And finally, execution context contains the scope chain and this keyword. Let's take a look at an real example to understand this better.

In the example, firstly the global context is created which contains all the variable and function declarations or the code which is outside of any function, that is the top level code. When the wash() function is called the wash() function execution context is created on top of the global context and in the wash() function there is an fruitsNum() call as a consequence of which fruitsNum() context is created on top of wash() context. When the fruitsNum() function returns the value it's execution context is removed from the top. Then as the wash() function returns the string, it too get removed from the callstack. Finally, the returned value is stored into result variable and thus the execution is performed. However, the global execution context remains in the callstack unless the program is terminated or the browser is closed where the program is running.

So, in this article we had an overview of how the things work behind the scenes in a JavaScript Engine and what is Just-In-Time compilation. Consider following me on X or twitter as I share some insights constantly over there. Stay tuned for more!