...some useful design resources for developers. Many of them were mentioned in the Refactoring UI tutorials. Tutorials Refactoring UI Videos Refactoring UI Book Refactoring UI Chapter Color Palette Refactoring UI...
...of the maxims and principles that designers can consider when building user interfaces 50 UI Tips https://bootcamp.uxdesign.cc/the-self-taught-ui-ux-designer-roadmap-in-2021-aa0f5b62cecb https://anthonyhobday.com/sideprojects/saferules/ CSS frameworks semantic-ui bootstrap tailwind foundation
Read the following material: World's shortest UI/UX design course Easiest Way to Pick UI Colors 7 Rules for Creating Gorgeous UI (Part 1) 7 Rules for Creating Gorgeous...
Visual design rules you can safely follow every time Bootstrapping Design (in our library) Steve Schoger's Refactoring UI book (in our library) and watch the following...
This will increase your code editor's font size as well as your UI and works nicely when sharing a single file. However, some controls will disappear, e.g. tabs...
...multiple files or just use your IDE like you normally would. Scale everything (new UI) When using new UI, go to File → Settings → Appearance and set the "Zoom" option to...
tl;dr When browsers start to adapt proposals from Open UI, it might not be necessary to use any 3rd party libraries to have nice components and controls in web...
...and Javascript to get them working and looking good. The purpose of the Open UI, a W3C Community Group, is to allow web developers to style and extend built-in...
A great two-part article about various hacks you can use to create great-looking screen designers when you're...
...single tr to prevent jumpy table headers containment: 'parent' # Only drag within this container placeholder: 'ui-sortable-placeholder' # Prevent visibility:hidden stop: onSortEnd # See below start: onSortStart # See below below...
...sortable.containment[3] += (draggedItemHeight - ui.placeholder.height()) ui.placeholder.height draggedItemHeight Styling Finally, here are some subtle, but nice styles: .ui-sortable-handle &:hover cursor: grab // Applied during the drag &.ui-sortable-helper display: table...
Generated Photos produces AI-generated face images. This is useful for UI mockups where you don't want to show real people or copyrighted stock photography...
...your Angular app has some decent complexity, it will not be easy to use UI Router straight away. Here are some hints on how to get around. Accessing the UI...
...app is not served on /, but on a different url (say /admin), links generated with ui-router will not work when you open them in a new tab.
...index of records or the options of a select box) is visible in the UI that list must be sorted. Unsorted lists are completely unusable once they contain more than...
Twitter's Bootstrap CSS blueprint as a jQuery UI theme. Even if you don't want to use Bootstrap as a CSS framework, this theme looks better than jQuery UI...
The timepicker addon adds a timepicker to jQuery UI Datepicker, thus the datepicker (jQueryUI) is required for using any of these. In addition all datepicker options are still available through...
Lately, we’ve been exploring ways to offer web apps that perform like native apps on mobile devices. For this...
...Make sure these libraries have localization support either by loading additional code (like jQuery UI's date picker) or by handing over localized strings as parameters (like Mobilscroll). External services...
You might have to configure/skin external services like PayPal so its UI will show up in the correct language. Time zones Adding support for time zones is a...
...because it takes the id into account in such a case Using an external ui component library If you're using an external UI component library, you've probably introduced...
...a lot of flakyness to your spec. UI Components often introduce autoplay features, animations, take longer to initialize, are lazy loaded etc. Make sure you have a safe way to...
has been manually tested in the browser has no missing translations in the UI has no ugly UI changes (long content breaking out of boxes, elements without margins, etc...
...updated the README as appropriate Please also add screenshots or videos of any changed UI. ¹ This should be verified in a private browsing window as you might not notice any...
...on a specific class of feature with heavy side effects, mostly on on the UI. Features like the following can amplify your flakiness issues by unexpectedly changing elements, causing excessive...
...scenario did not care about the periodic server updates. 🤷 Example: Animations Testing an animated UI causes countless problems. Here are only a few: While an element fades in, it may...
...helpful to limit the number of concurrent requests to 1. This will implicit serialize UI interactions that make an AJAX request. You can configure Unpoly to only allow a single...
...in your branch. Then, create a MR and start multiple pipelines via the Gitlab UI. Further readings Debug flaky tests with an Unpoly observeDelay
...is somewhat simplified): // TinyMCE as part of the main bundle! import tinymce from 'tinymce/tinymce' // UI import 'tinymce/themes/silver' import 'tinymce/skins/ui/oxide/skin.min.css' // Plugin import 'tinymce/plugins/autoresize' up.compiler('[tinymce]', (element) => { let editor = undefined tinymce.init({
}) }) .then((editors) => { editor = editors[0] }) function loadTinyMce() { return Promise.all([ import(/* webpackChunkName: "tinymce" */ 'tinymce/tinymce'), // UI styles import(/* webpackChunkName: "tinymce" */ 'tinymce/themes/silver'), // Plugins import(/* webpackChunkName: "tinymce" */ 'tinymce/plugins/autoresize'), ]) .then((imports) => { return imports...
...a lot of ugly edge cases. It also doesn't solve the question of UI. We like to use simple_form. It's currently not possible to simply write f.input...
...I seriously started to doubt, whether this feature of Rails is actually production-ready. UI isn't solved As stated already in the TLDR, you also at some point need...
"Description", add a link to your Linear issue and Screenshots of any UI Changes Set the issue to "Review" in Linear Merge Request Checklist * has been reviewed by...
has been manually tested in the browser has no missing translations in the UI has no ugly UI changes (long content breaking out of boxes, elements without margins, etc...
Use ng-animate Some people are seeing leaks when using ng-animate. Use the ui-router Some users of the angular-ui router are getting leaks on every state...
...to your mentor about: When moving a task to the background will introduce new UI states Exercise: Move API calls to a Sidekiq job You've previously implemented calls to...
...tested. Read the Sidekiq testing guide for some pointers. Sidekiq comes with a Web UI. Mount it into your MovieDB, so you can see your Sidekiq jobs under /sidekiq.