Vugu: A Modern UI Library for Go+WebAssembly (experimental)

Vugu

Vugu is an experimental library for web UIs written in Go and targeting webassembly. Guide and docs at https://www.vugu.org. Godoc at https://godoc.org/github.com/vugu/vugu.

If you've ever wanted to write a UI not in JS but pure Go... and run it in your browser, right now... That (experimental;) future is here!

Introducing Vugu (pronounced /ˈvuː.ɡuː/), a VueJS-inspired library in Go targeting wasm.

No node. No JS. No npm. No node_modules folder competing with your music library for disk space.

Updates ♨

  • 2020-11-08 Work in progress on a UI component library, the current concept is strongly influenced by both Bootstrap and Material Design. Some specific components, code and documentation will follow soonest.
  • 2020-09-13 v0.3.3 Lifecycle callbacks implemented (Init, Compute, Rendered, Destroy) plus documentation https://vugu.org/doc/components#lifecycle
  • 2020-06-21 v0.3.2 Vugu+TinyGo is now functional; test suite updated so most tests are run with both default Go and TinyGo compilation; docs updated; Vugu+TinyGo example works https://github.com/vugu-examples/tinygo
  • 2020-04-26 v0.3.0 Slots are now implemented. Plus vg-js-create/vg-js-populate, vg-template, vg-var; vgform package has initial prototype for form inputs; docs written for these features plus for router and wiring (several pages added to vugu.org plus other individual sections). There are two small but breaking changes with this release: vg-html now escapes markup by default and vugu.DOMEvent was changed from a struct to an interface. For the earlier vg-html behavior use vg-html='vugu.HTML("...")' (see https://www.vugu.org/doc/files/markup#vg-content) and existing DOMEvent code should fix by simply removing the pointer i.e. change event *vugu.DOMEvent to event vugu.DOMEvent - and also make sure to go get -u github.com/vugu/vugu/cmd/vugugen again. I generally try to avoid these sorts of breaking changes but it's better to do them sooner rather than later.
  • 2020-04-13 v0.2.3 much more flexible attribute support and SVGs now work (thanks to @tbe!); vugu-examples/simple set up, more to come; nested component rendering bug fixed (#117); tools doc page added to the site; devutil package; vgrun working
  • 2020-04-06 v0.2.0 released. vugu.org and playground ported over to it; vugugen now supports recursive and merge-single modes and output files end with _vgen.go; improved tests; various documentation updates; vgrgen route generator supports recursive and clean options
  • 2020-03-29 Vugu URL router is now functional (https://github.com/vugu/vgrouter). Features include optional fragment support, client and server-side use, two-way data binding for query and path parameters, and automatic route generation based on folder structure. The vg-comp tag now allows programmatic component selection. A pattern for wiring large applications with lots of components is in place and will be tested further as dev moves forward. Next steps include just a bit more dev and testing on the router and then updating vugu.org to use these new features and bring the documentation up to date.
  • 2019-12-08 First Vugu program successfully compiles with Tinygo. Testing and a bit more alternate implementation is still required but at least the compilation works now.
  • 2019-11-24 WASM test suite now working in Travis CI; getting closer on TinyGo support and merged refactor into master.
  • 2019-11-10 Support for tinygo is in-progress on the tinygo branch. No known blocking issues as yet, some minor refactor required but looks promising.
  • 2019-09-29 Router is work-in-progress. Will use radix tree to efficiently combine common prefixes. Struct tags will usable to two-way-bind path and query params, or it can be done manually. Some similarities to Angular and Vue routers but will be less declarative and more functional (instead of a big tree of objects with various config, you write path handler functions to set whatever properties need to be set, establish binding, etc). Plan is to get the bulk of this coded by next week.
  • 2019-09-22 Static HTML renderer (re)implemented. EventEnv bug fix and added it to to JS renderer to allow background requests at startup. Some initial work on a router: https://github.com/vugu/vgrouter
  • 2019-09-15 Refactor changes merged into master. Includes: updated sample code, component resolution at code-generation time, type-safe component params, optional component param map, BeforeBuild lifecycle callback, modification tracking system, JS property assignment syntax, "full HTML" support, improved DOM event handling, Go 1.13 support, import deduplication, and a brand new rendering pipeline! Initial documentation at https://github.com/vugu/vugu/wiki/Refactor-Notes---Sep-2019
  • 2019-09-08 Implemented ModTracker to keep track of changes to components and their data (this is also the beginning of Vuex-like functionality but without wrappers or events). Worked out the lifecycle of components in much more detail and work in progress on nested components implementation (component-refactor branch currently broken, but finally the core nested component functionality is going in - hopefully will finish next week).
  • 2019-09-07 Updated everything for Go 1.13, including both master and component-refactor branches, Vugu's js wrapper package, site documentation.
  • 2019-09-01 On component-refactor branch: Form element values and other related data now available on DOMEvent, .prop= syntax implemented, various cleanup, imports are deduplicated automatically now, started on nested component implementation and all of that craziness.
  • 2019-08-25 CSS now supported on component-refactor branch, including in full-HTML mode, working sample that pulls in Bootstrap CSS. Vugu's js wrapper package copied to master and made available.
  • 2019-08-18 Full HTML (root component can start with <html> tag) now supported on component-refactor branch, updated CSS and JS support figured out and implementation in-progress
  • 2019-08-12 Refactored DOM event listener code in-progress, event registration/deregistration works(-ish), filling out the remaining functionality to provide event summary, calls like preventDefault(), etc.
  • 2019-08-04 Some basic stuff in there on the DOM syncing rewrite and the new instruction workflow from VGNode -> binary encoded to raw bytes in Go -> read with DataView in JS -> DOM tree manipulation. With the pattern in place the rest should get easier.
  • 2019-07-28 Making some hard choices on how to do DOM syncing in a performant and reliable way. https://github.com/vugu/vugu/wiki/DOM-Syncing-Instructions
  • 2019-07-20 Some design info on how "data binding" (hashing actually) will work in Vugu: https://github.com/vugu/vugu/wiki/Data-Hashing-vs-Binding
  • 2019-07-16 Vugu has a logo! https://www.instagram.com/p/Bz3zmtYAYcM/ Good things are in the works, the plan is to get a bunch of much-awaited updates pushed to master before the end of the month.
  • 2019-05-19 Refactor still in progress - this is the cleaned-up architecture concept: https://github.com/vugu/vugu/wiki/Architecture-Overview
  • 2019-04-07 The Vugu Playground is up at: https://play.vugu.org/
  • 2019-04-05 Thanks to @erinpentecost, vugufmt is now available and provides gofmt-like functionality on your .vugu files. ("go get github.com/vugu/vugu/cmd/vugufmt && go install github.com/vugu/vugu/cmd/vugufmt")
  • 2019-04-05 The component playground should be available soon; followed by some internal work to properly handle nested components in a type-safe way; then probably a router...

Join the conversation: Gophers on Slack, channel #vugu

Highlights

  • Runs in-browser using WebAssembly
  • Single-file components
  • Vue-like markup syntax
  • Write idiomatic Go code
  • Rapid prototyping
  • ~3 minute setup
  • Standard Go build tools

Start

Get started: http://www.vugu.org/doc/start

Still a work in progress, but a lot of things are already functional. Some work really well.

Abbreviated Roadmap

  •  Single-file components (looks similar to .vue); .vugu -> .go code generation.
  •  Includes CSS in components.
  •  Basic flow control with vg-if, vg-for and output with vg-content.
  •  Dynamic attributes with <tag :prop='expr'>.
  •  Nested components with dynamic properties
  •  Efficiently syncs to browser DOM.
  •  Static HTML output (great for tests).
  •  DOM Events, click, etc.
  •  Modification tracking to avoid unnecessary computation where possible.
  •  Basic dev and prod server tooling, easy to get started
  •  Rewrite everything so it is not so terrible internally
  •  URL Router (in-progress)
  •  Tinygo compilation support
  •  Server-side rendering (works, needs more documentation and examples)
  •  Go-only component events
  •  Slots
  •  Component library(s) (wip!)
  •  Performance optimizations
  • And much more...

Notes

It's built more like a library than a framework. While Vugu does do code generation for your .vugu component files, (and will even output a default main_wasm.go for a new project and build your program automatically upon page refresh), fundamentally you are still in control. Overall program flow, application wiring and initialization, the render loop that keeps the page in sync with your components - you have control over all of that. Frameworks call your code. Vugu is a library, your code calls it (even if Vugu generates a bit of that for you in the beginning to make things easier). One of the primary goals for Vugu, when it comes to developers first encountering it, was to make it very fast and easy to get started, but without imposing unnecessary limitations on how a project is structured. Go build tooling (and now the module system) is awesome. The idea is to leverage that to the furthest extent possible, rather than reprogramming the wheel.

So you won't find a vugu command line tool that runs a development server, instead you'll find in the docs an appropriate snippet of code you can paste in a file and go run yourself. For the code generation while there is an http.Handler that can do this upon page refresh, you also can (and should!) run vugugen via go generate. There are many small decisions in Vugu which follow this philosophy: wherever reasonably possible, just use the existing mechanism instead of inventing anew. And keep doing that until there's proof that something else is really needed. So far it's been working well. And it allows Vugu to focus on the specific things it brings to the table.

Download Details:

Author: vugu
Source Code: https://github.com/vugu/vugu 
License: MIT license

#go #golang #gui #library #framework

What is GEEK

Buddha Community

Vugu: A Modern UI Library for Go+WebAssembly (experimental)

Vugu: A Modern UI Library for Go+WebAssembly (experimental)

Vugu

Vugu is an experimental library for web UIs written in Go and targeting webassembly. Guide and docs at https://www.vugu.org. Godoc at https://godoc.org/github.com/vugu/vugu.

If you've ever wanted to write a UI not in JS but pure Go... and run it in your browser, right now... That (experimental;) future is here!

Introducing Vugu (pronounced /ˈvuː.ɡuː/), a VueJS-inspired library in Go targeting wasm.

No node. No JS. No npm. No node_modules folder competing with your music library for disk space.

Updates ♨

  • 2020-11-08 Work in progress on a UI component library, the current concept is strongly influenced by both Bootstrap and Material Design. Some specific components, code and documentation will follow soonest.
  • 2020-09-13 v0.3.3 Lifecycle callbacks implemented (Init, Compute, Rendered, Destroy) plus documentation https://vugu.org/doc/components#lifecycle
  • 2020-06-21 v0.3.2 Vugu+TinyGo is now functional; test suite updated so most tests are run with both default Go and TinyGo compilation; docs updated; Vugu+TinyGo example works https://github.com/vugu-examples/tinygo
  • 2020-04-26 v0.3.0 Slots are now implemented. Plus vg-js-create/vg-js-populate, vg-template, vg-var; vgform package has initial prototype for form inputs; docs written for these features plus for router and wiring (several pages added to vugu.org plus other individual sections). There are two small but breaking changes with this release: vg-html now escapes markup by default and vugu.DOMEvent was changed from a struct to an interface. For the earlier vg-html behavior use vg-html='vugu.HTML("...")' (see https://www.vugu.org/doc/files/markup#vg-content) and existing DOMEvent code should fix by simply removing the pointer i.e. change event *vugu.DOMEvent to event vugu.DOMEvent - and also make sure to go get -u github.com/vugu/vugu/cmd/vugugen again. I generally try to avoid these sorts of breaking changes but it's better to do them sooner rather than later.
  • 2020-04-13 v0.2.3 much more flexible attribute support and SVGs now work (thanks to @tbe!); vugu-examples/simple set up, more to come; nested component rendering bug fixed (#117); tools doc page added to the site; devutil package; vgrun working
  • 2020-04-06 v0.2.0 released. vugu.org and playground ported over to it; vugugen now supports recursive and merge-single modes and output files end with _vgen.go; improved tests; various documentation updates; vgrgen route generator supports recursive and clean options
  • 2020-03-29 Vugu URL router is now functional (https://github.com/vugu/vgrouter). Features include optional fragment support, client and server-side use, two-way data binding for query and path parameters, and automatic route generation based on folder structure. The vg-comp tag now allows programmatic component selection. A pattern for wiring large applications with lots of components is in place and will be tested further as dev moves forward. Next steps include just a bit more dev and testing on the router and then updating vugu.org to use these new features and bring the documentation up to date.
  • 2019-12-08 First Vugu program successfully compiles with Tinygo. Testing and a bit more alternate implementation is still required but at least the compilation works now.
  • 2019-11-24 WASM test suite now working in Travis CI; getting closer on TinyGo support and merged refactor into master.
  • 2019-11-10 Support for tinygo is in-progress on the tinygo branch. No known blocking issues as yet, some minor refactor required but looks promising.
  • 2019-09-29 Router is work-in-progress. Will use radix tree to efficiently combine common prefixes. Struct tags will usable to two-way-bind path and query params, or it can be done manually. Some similarities to Angular and Vue routers but will be less declarative and more functional (instead of a big tree of objects with various config, you write path handler functions to set whatever properties need to be set, establish binding, etc). Plan is to get the bulk of this coded by next week.
  • 2019-09-22 Static HTML renderer (re)implemented. EventEnv bug fix and added it to to JS renderer to allow background requests at startup. Some initial work on a router: https://github.com/vugu/vgrouter
  • 2019-09-15 Refactor changes merged into master. Includes: updated sample code, component resolution at code-generation time, type-safe component params, optional component param map, BeforeBuild lifecycle callback, modification tracking system, JS property assignment syntax, "full HTML" support, improved DOM event handling, Go 1.13 support, import deduplication, and a brand new rendering pipeline! Initial documentation at https://github.com/vugu/vugu/wiki/Refactor-Notes---Sep-2019
  • 2019-09-08 Implemented ModTracker to keep track of changes to components and their data (this is also the beginning of Vuex-like functionality but without wrappers or events). Worked out the lifecycle of components in much more detail and work in progress on nested components implementation (component-refactor branch currently broken, but finally the core nested component functionality is going in - hopefully will finish next week).
  • 2019-09-07 Updated everything for Go 1.13, including both master and component-refactor branches, Vugu's js wrapper package, site documentation.
  • 2019-09-01 On component-refactor branch: Form element values and other related data now available on DOMEvent, .prop= syntax implemented, various cleanup, imports are deduplicated automatically now, started on nested component implementation and all of that craziness.
  • 2019-08-25 CSS now supported on component-refactor branch, including in full-HTML mode, working sample that pulls in Bootstrap CSS. Vugu's js wrapper package copied to master and made available.
  • 2019-08-18 Full HTML (root component can start with <html> tag) now supported on component-refactor branch, updated CSS and JS support figured out and implementation in-progress
  • 2019-08-12 Refactored DOM event listener code in-progress, event registration/deregistration works(-ish), filling out the remaining functionality to provide event summary, calls like preventDefault(), etc.
  • 2019-08-04 Some basic stuff in there on the DOM syncing rewrite and the new instruction workflow from VGNode -> binary encoded to raw bytes in Go -> read with DataView in JS -> DOM tree manipulation. With the pattern in place the rest should get easier.
  • 2019-07-28 Making some hard choices on how to do DOM syncing in a performant and reliable way. https://github.com/vugu/vugu/wiki/DOM-Syncing-Instructions
  • 2019-07-20 Some design info on how "data binding" (hashing actually) will work in Vugu: https://github.com/vugu/vugu/wiki/Data-Hashing-vs-Binding
  • 2019-07-16 Vugu has a logo! https://www.instagram.com/p/Bz3zmtYAYcM/ Good things are in the works, the plan is to get a bunch of much-awaited updates pushed to master before the end of the month.
  • 2019-05-19 Refactor still in progress - this is the cleaned-up architecture concept: https://github.com/vugu/vugu/wiki/Architecture-Overview
  • 2019-04-07 The Vugu Playground is up at: https://play.vugu.org/
  • 2019-04-05 Thanks to @erinpentecost, vugufmt is now available and provides gofmt-like functionality on your .vugu files. ("go get github.com/vugu/vugu/cmd/vugufmt && go install github.com/vugu/vugu/cmd/vugufmt")
  • 2019-04-05 The component playground should be available soon; followed by some internal work to properly handle nested components in a type-safe way; then probably a router...

Join the conversation: Gophers on Slack, channel #vugu

Highlights

  • Runs in-browser using WebAssembly
  • Single-file components
  • Vue-like markup syntax
  • Write idiomatic Go code
  • Rapid prototyping
  • ~3 minute setup
  • Standard Go build tools

Start

Get started: http://www.vugu.org/doc/start

Still a work in progress, but a lot of things are already functional. Some work really well.

Abbreviated Roadmap

  •  Single-file components (looks similar to .vue); .vugu -> .go code generation.
  •  Includes CSS in components.
  •  Basic flow control with vg-if, vg-for and output with vg-content.
  •  Dynamic attributes with <tag :prop='expr'>.
  •  Nested components with dynamic properties
  •  Efficiently syncs to browser DOM.
  •  Static HTML output (great for tests).
  •  DOM Events, click, etc.
  •  Modification tracking to avoid unnecessary computation where possible.
  •  Basic dev and prod server tooling, easy to get started
  •  Rewrite everything so it is not so terrible internally
  •  URL Router (in-progress)
  •  Tinygo compilation support
  •  Server-side rendering (works, needs more documentation and examples)
  •  Go-only component events
  •  Slots
  •  Component library(s) (wip!)
  •  Performance optimizations
  • And much more...

Notes

It's built more like a library than a framework. While Vugu does do code generation for your .vugu component files, (and will even output a default main_wasm.go for a new project and build your program automatically upon page refresh), fundamentally you are still in control. Overall program flow, application wiring and initialization, the render loop that keeps the page in sync with your components - you have control over all of that. Frameworks call your code. Vugu is a library, your code calls it (even if Vugu generates a bit of that for you in the beginning to make things easier). One of the primary goals for Vugu, when it comes to developers first encountering it, was to make it very fast and easy to get started, but without imposing unnecessary limitations on how a project is structured. Go build tooling (and now the module system) is awesome. The idea is to leverage that to the furthest extent possible, rather than reprogramming the wheel.

So you won't find a vugu command line tool that runs a development server, instead you'll find in the docs an appropriate snippet of code you can paste in a file and go run yourself. For the code generation while there is an http.Handler that can do this upon page refresh, you also can (and should!) run vugugen via go generate. There are many small decisions in Vugu which follow this philosophy: wherever reasonably possible, just use the existing mechanism instead of inventing anew. And keep doing that until there's proof that something else is really needed. So far it's been working well. And it allows Vugu to focus on the specific things it brings to the table.

Download Details:

Author: vugu
Source Code: https://github.com/vugu/vugu 
License: MIT license

#go #golang #gui #library #framework

Fannie  Zemlak

Fannie Zemlak

1599854400

What's new in the go 1.15

Go announced Go 1.15 version on 11 Aug 2020. Highlighted updates and features include Substantial improvements to the Go linker, Improved allocation for small objects at high core counts, X.509 CommonName deprecation, GOPROXY supports skipping proxies that return errors, New embedded tzdata package, Several Core Library improvements and more.

As Go promise for maintaining backward compatibility. After upgrading to the latest Go 1.15 version, almost all existing Golang applications or programs continue to compile and run as older Golang version.

#go #golang #go 1.15 #go features #go improvement #go package #go new features

UI Designer Vs UI Developer

Comparing UI Designers to UI Developers
User interface (UI) designers and developers are directly responsible for the consumer base’s experience using an application or software program. Designers specifically deal with the visual aspects of the program, while developers deal with the overall performance and functionality of the software.
To get in depth knowledge on UI, enrich your skills on UI online training Course

Responsibilities of UI Designers vs. UI Developers
UI designers and developers work in tandem to create a program or application that is easy to understand and operate by their customers or clients. Though there may be some occasional overlap in the duties within the workplace, their designated duties are quite clear and are dependent on the other. UI developers are responsible for the coding and programming in the conception of an application, specifically with regard to how the software operates at the hands of the user. UI designers are in charge of applying their understanding of the program operations to create a visual experience that is most compatible to the program’s functionality.

UI Designers
User interface designers are tasked with understanding the programming language of the application in creation so that they can conceptualize and craft visual aspects that will facilitate usage of the program. They are expected to understand computer programming as well as graphic design due to the demands of their work, since they are in charge of incorporating their designs into the program correctly. Their designs are implemented into the layout, which is typically drafted by the developers, while the style of their designs is contingent on the guidelines given by the directors. Once these designs are finished, they must implement them into the program and run a demo of it for the developers and directors to ensure they met the needs and expectations of the project while ensuring there aren’t any bugs caused from their designs. Get more skills from UI Training

Other responsibilities of UI designers are as follows:

  • Make drafts in graphic design and editing software
  • Select fonts and determine color schemes, for consistency
  • Proficiency in programming codes such as Java or CSS
  • Create storyboards and test runs of animated, visual concepts

UI Developers
User interface developers are responsible for the functional aspects of a software application, coding and programming throughout all stages of development with the clients and potential users of the application in mind. They usually begin the process by incorporating the clients’ expressed needs into a layout that is modified as progress is made. Once they get the general functions working, the designers will incorporate their visual conceptions into the layout to ensure that the first draft is operational. If there are any bugs or malfunctions to fix, the developers must troubleshoot and patch the application. While doing these tasks, they must take detailed notes of all the progress made to streamline any future updates made to the program, functionally or aesthetically. Learn more from ui design course

UI developers will also be responsible for:

  • Utilizing research data to improve or build onto the design of the application
  • Suggesting any software updates to improve functionality
  • Constructing diagrams that will aide other developers and programmers on the project
  • Performing test runs of the application

#ui design course #ui training #online ui training #ui online course #ui online training #advanced ui design course

UX designer ? UI designer ? UI Developer ?

The UX designer is someone who thinks about what should the user flow be like, which page should lead to which page, when should a confirm popup appear or not appear, should there be a listing page before or after a create-new page, should there be an address field in the page or geolocation is enough to serve the purpose? After brainstorming through each of these and several other questions, the UX designer comes up with something known as wireframes, which in simple terms is just a blueprint of the website/app.
This is image title

To get in-Depth knowledge on UI Design you can enroll for a live demo on UI online training

The UI designer then takes the wireframes and makes them beautiful, also ensuring that the workflow of the product is communicated well to the user. He will add the pixel level details to the wireframes. What should be the font used, what should be the background image, do we need a background image, what should be the foreground color, how big should be the submit button, does it make more sense to have the menu at the bottom of the screen, what should the logo look like? The job of a UI designer is answering all these and thereafter delivering static mockups, using may be Photoshop, Invision and many other design tools.

The UI developer is the one who puts these static mockups in “real code”. They might need skills like HTML CSS , precompilers(like sass or less) , UI frameworks (like bootstrap or foundation), or xml layouts( in case of android UI) or a combined knowledge of all of them with Javascript (in case of react, react native). The result is a beautiful set of screens/pages which can be actually rendered in a browser or a mobile device.Learn more from ui design course

#ui online course #ui design course #ui training #online ui training #ui courses online #ui design classes online

A Comprehensive Guide to UI

UI (USER INTERFACE)

UI or User Interface is the interface that is the access point where users interact with computers. It is also a way through which users can interact with a website or an application. UI design typically refers to graphical user interfaces but also includes others, such as voice-controlled ones, a keyboard, a mouse, and the appearance of a desktop.

UI design considers the look, feel, and interactivity of the product. Users judge the design on the basis of usability and likeability very swiftly, so a designer will focus on making each visual element look pleasurable and meaningful. The designer has to consider the color scheme, font imagery, spacing, responsiveness. Also, understanding the user’s context and mindset is crucial while making design decisions.

Types of user interfaces

The various types of user interfaces include:

  • graphical user interface (GUI
  • command line interface (CLI)
  • menu-driven user interface
  • touch user interface
  • voice user interface (VUI)
  • form-based user interface
  • natural language user interface

UI vs UX

Often confused a lot and understood one and the same thing terms UI and UX are related but not the same.

UX or User Experience describes the overall experience of the product and the UI only considers the appearance of the product. A UX designer’s work is to make the product usable and useful. UX means focusing on the whole user journey and the steps a user will take to attain a goal. UX designers will make wireframes without making any detailed design decisions for each wireframe. Once the wireframes are final they are handed over to UI designers to start adding emotions to it through design and animations.

UI is a part of UX which helps in making the user experience more pleasurable and user-centric. UI designer’s job is to make the product visually appealing and desirable. Where a UX designer will try to make a critical judgment on what feature to add and how to user will interact, a UI designer will make critical design decisions regarding those features. Like what should be the font, color scheme, and animations for the features and pages decided by the UX team.

Let’s take a scenario to see how UI designers and UX designers influence the same feature differently.

  • A UX designer will decide whether a page will have a top navigation bar, side navigation bar, or bottom. What links should be added to the bar and whether there will be a search bar in it or not.

  • A UI designer will decide what will be the color scheme of the navigation bar, whether to use icons or text in link buttons, what should be the font style, what animation to use when the user toggles navigation bar or switch between pages.

#scala #user interface (ui) #good design #principles of ui #ui #ui vs ux #user experience #user interface #ux #what is ui #what is ux