Интерфейсы пользователя

Прежде всего, конечно, речь пойдет о веб интерфейсах, т.к. веб очень популярен и браузер уже давно стал универсальным инструментом доступа к информации. В подборке будут указаны ссылки на свободные или бесплатные компоненты.

Design

Colors

• Как Создать Свою Цветовую Палитру? ОСНОВЫ СОЧЕТАНИЯ ЦВЕТОВ
• ТЕОРИЯ ЦВЕТА В ВЕБ-ДИЗАЙНЕ | ЦВЕТОВОЙ КРУГ
• ЦВЕТОВЫЕ СХЕМЫ: КАК СОЧЕТАТЬ ЦВЕТА

Fonts

• КАК ВЫБРАТЬ ПРАВИЛЬНЫЙ ШРИФТ? правила хорошей типографики

Logos

• https://logo.com/
• https://www.brandcrowd.com/logo-maker
• https://www.designhill.com/tools/logo-maker

Workflows

• Web as
  • Documents (wiki)
  • Spreadsheets (tables, numbers..)
  • Presentations (landings)
• Selectors
• Tabs
• Wizard
• Split screen (Norton Commander)
• Windowed
• Dashboards
• Check engine
• Tree (comments, folders)
• Files (Icons, List, Table)
• Side panels (menu, top, right, bottom, left)
• Panel
• Start menu
• Notifications
• Header / Footer
• Unlimited Scroll
• Pinterest images
• Bulk
  • Creation
  • Edit
    • Multiple value
    • Change value +/-/*/div
  • Delete
  • Restore

Learn & Docs

• http://htmlbook.ru/
• https://javascript.ru/
• http://www.pcre.ru/
• http://www.typescriptlang.org/

Загрузить видео

YouTube

YouTube might collect personal data. Политика конфиденциальности

ПродолжитьDismiss

Browser tests

• https://www.acidtests.org/
• https://html5test.com/
• https://browserbench.org/
• https://chromium.github.io/octane/
• https://webkit.org/perf/sunspider/sunspider.html
• https://webglsamples.org/aquarium/aquarium.html

Node.js

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 18.20.2

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs

• https://github.com/nodesource/distributions/blob/master/README.md

sudo npm install npm@latest -g
npm config set registry http://registry.npmjs.org/
npm cache clear --force
npm config set strict-ssl false
npm config set legacy-peer-deps true
echo '{}' > ./package-lock.json
npm i

jQuery

• https://jquery.com/
• https://jqueryui.com/
• https://jquerymobile.com/

Angular

sudo npm install -g @angular/cli

• https://angular.io/
• (!!!) https://angular.io/resources?category=development
• https://ng-bootstrap.github.io/
• https://github.com/ngx-rocket/generator-ngx-rocket
• https://tiberiuzuld.github.io/angular-gridster2/
• https://bertrandg.github.io/angular-split/#/
• https://github.com/ManifestWebDesign/angular-gridster
• https://robferguson.org/blog/2019/06/22/dashboards-and-dashboard-widgets-part-1/
• https://angularjs.org/ - устарел
• Angular 9 - What's New? What changed? - https://www.youtube.com/watch?v=TcdhAxDWWxM
• I only ever use *these* RxJS operators to code reactively
• The easy way to handle ASYNC PIPE errors reactively
• Web Standalone Components
• How To Build An Angular App Once And Deploy It To Multiple Environments

ng new angular-17
ng generate environments
ng add @angular/pwa
ng add @angular/localize
ng add @angular/animations
ng add @angular/platform-browser
ng add bootstrap
ng add bootstrap-icons
ng add @ng-bootstrap/ng-bootstrap
ng add @fortawesome/fontawesome-free
ng add @ng-select/ng-select

Libs

• https://ng-select.github.io/ng-select#/data-sources
• https://github.com/ObaidUrRehman/ng-drag-drop#demo

Vue.js

• https://vuejs.org/
• https://bootstrap-vue.js.org/
• https://vuematerial.io/

ReactJS

• https://reactjs.org/
• https://react-bootstrap.github.io/
• https://material-ui.com/

Aurelia

• https://aurelia.io/
• https://tochoromero.github.io/aurelia-bootstrap/

WebPack

• https://www.youtube.com/watch?v=GNEyY70Zl30

Typography Grid

• https://loremipsum.io/
• https://generator.lorem-ipsum.info/
• http://gridcalculator.dk/
• http://gridinator.com
• http://grid.mindplay.dk
• https://www.gridlover.net/try

CSS tricks

• https://cssgradient.io/
• https://animate.style/
• https://animista.net/
• https://css-tricks.com/almanac/properties/f/filter/
• Learn CSS Border Animations in 6 Minutes

CSS processors

• http://lesscss.org/
• https://sass-lang.com/
• https://postcss.org/

Design Systems

• https://getbootstrap.com/
  • https://themes.getbootstrap.com/
  • https://bootswatch.com/
  • https://bootstrapmade.com/
  • https://themeforest.net/search/bootstrap
  • https://wrapbootstrap.com/
  • https://www.creative-tim.com/bootstrap-themes/free
  • https://themewagon.com/theme-price/free/
• https://bulma.io/
• https://get.foundation/
• https://ant.design/
• https://material.io/design/
• https://semantic-ui.com/
• https://www.muicss.com/
• https://material-ui.com/
• https://material.angular.io/
• https://truly-ui.com/
• https://wrapbootstrap.com/
• https://bootswatch.com/
• http://www.csszengarden.com/
• https://get.foundation/
• https://html5boilerplate.com/
• https://mdbootstrap.com/
• https://jdan.github.io/98.css/
• https://fusetheme.com/
• https://eui.elastic.co/

favicon

• https://realfavicongenerator.net/

Icons

• https://fontawesome.com/
• https://github.com/lothat/weather-icons
• https://ionicons.com/
• http://fontello.com/
• http://fontastic.me/
• https://www.flaticon.com/
• https://thenounproject.com/
• https://useiconic.com/
• https://feathericons.com/
• https://primer.style/foundations/icons/
• https://github.com/danklammer/bytesize-icons
• https://coreui.io/icons/
• https://fonts.google.com/icons
• http://demo.amitjakhu.com/dripicons/
• https://ikons.piotrkwiatkowski.co.uk/
• https://icons8.com/
• https://icofont.com/
• https://tabler.io/icons

Fonts

• http://patorjk.com/software/taag/
• https://fonts.google.com/ (https://golb.hplar.ch/2019/06/google-fonts-download.html)
  • sudo npm install -g goog-webfont-dl
  • goog-webfont-dl -o src/assets/fonts/FiraSans/font.css -p /assets/fonts/FiraSans -d src/assets/fonts/FiraSans -a "Fira Sans"
  • goog-webfont-dl -f "Roboto Slab" -d ./src/assets/fonts/RobotoSlab -o ./src/assets/fonts/RobotoSlab/font.css -p /assets/fonts/RobotoSlab -a -y 100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,700italic,800italic,900italic -u latin,latin-ext,vietnamese,greek,greek-ext,cyrillic,cyrillic-ext
• https://fonts.adobe.com/fonts
• https://www.1001freefonts.com/
• https://www.myfonts.com/
• https://www.artlebedev.ru/type/
• https://www.fonts-online.ru/
• https://www.dafont.com/
• https://www.urbanfonts.com/free-fonts.htm
• https://www.fontshare.com/
• https://www.freefaces.gallery/
• https://www.dafont.com/
• https://velvetyne.fr/
• https://dirtylinestudio.com/
• https://schultzschultz.com/tools/

Patterns

• https://patternico.com/
• https://www.canva.com/features/pattern-generator/
• https://www.freepik.com/free-photos-vectors/background-pattern
• https://unsplash.com/s/photos/pattern-background
• https://heropatterns.com/
• https://pixabay.com/vectors/search/pattern/
• https://www.pexels.com/search/pattern%20background/

WYSIWYG editors

What You See Is What You Get

• https://www.tiny.cloud/
  • Real-time co-editing in TinyMCE with Codox Wave
• https://www.froala.com/wysiwyg-editor/v2.0
• https://ckeditor.com/ckeditor-5/
• https://www.axsoft.co/?ref=producthunt
• https://jaredreich.com/pell/?ref=producthunt
• https://quilljs.com/
• https://draftjs.org/
• https://trix-editor.org/
• https://prosemirror.net/
• https://codemirror.net/
• https://habr.com/ru/companies/oleg-bunin/articles/350252/

Landing page editors

• https://grapesjs.com/
• http://editor.ory.am/

Tables & Spreadsheets

• https://datatables.net/
• https://slickgrid.net/
• https://jspreadsheets.com/
• https://handsontable.com/
• https://nexts.github.io/Clusterize.js/
• https://www.datatables.net
• https://www.ag-grid.com/
• http://ui-grid.info
• http://adazzle.github.io/react-data-grid/
• http://www.bossanova.uk/jexcel
• http://tabulator.info
• http://ng-table.com
• http://guriddo.net/?page_id=102666
• http://backgridjs.com/
• http://okfnlabs.org/recline
• http://lorenzofox3.github.io/smart-table-website
• http://w2ui.com
• http://addepar.github.io/ember-table
• https://slickgrid.net/
• http://www.jtable.org
• https://github.com/davidguttman/react-pivot
• https://github.com/datazenit/sensei-grid
• https://github.com/felixrieseberg/React-Spreadsheet-Component
• http://dgrid.io
• https://github.com/handsontable/vue-handsontable-official
• http://spreadsheets.github.io/WickedGrid/
• http://paramquery.com
• http://handsontable.com
• https://github.com/handsontable/react-handsontable
• http://josebalius.github.io/ngReactGrid
• https://www.pontikis.net/labs/bs_grid/demo
• https://github.com/ghiscoding/Angular-Slickgrid
• https://github.com/miadwang/sou-react-table
• https://fancygrid.com
• https://github.com/energydrink9/functional-data-grid
• http://handsontable.github.io/hot-table
• https://turnerniles.github.io/react-virtualized-pivot
• http://www.pontikis.net/labs/jui_datagrid
• https://www.kendoreact.com
• http://team-lab.github.io/cell-cursor/example.html
• http://www.inspireproduction.co.za/#/home
• https://github.com/key-lime-box/dynamic-table
• http://reconstrukt.com/ingrid
• http://www.Syncfusion.com
• http://dreakmore.info/tgrid
• http://boriscy.github.io/grider
• http://reactdatagrid.com

Music Notes & ABC notaton

• http://abcnotation.com/
• https://www.alphatab.net/

Math & formulas

• https://www.mathjax.org/

Grids & Blocks

• https://dsmorse.github.io/gridster.js/
• https://gridstackjs.com/

Croppers

• https://fengyuanchen.github.io/cropperjs/
• http://deepliquid.com/content/Jcrop.html

Charts & Graphs

• https://www.chartjs.org/
• http://www.flotcharts.org/
• http://polymaps.org/
• https://d3js.org/
• https://rawgraphs.io/
• http://dygraphs.com/
• https://apexcharts.com/
• https://visjs.org/
• Finance
  • https://d3fc.io/
  • https://techanjs.org/
  • https://blog.scottlogic.com/2018/09/21/d3-financial-chart.html
  • https://colineberhardt.github.io/yahoo-finance-d3fc/
  • https://www.trading view.com/

Maps

• https://www.vincentbroute.fr/mapael/
• https://www.10bestdesign.com/jqvmap/
• http://jvectormap.com/
• http://kartograph.org/
• http://planetaryjs.com/
• https://openlayers.org/
  • Google example - https://github.com/mapgears/ol3-google-maps
  • https://openlayers.org/en/latest/examples/

Image Viewers & Sliders

• http://www.highslide.com/
• https://fotorama.io/
• https://glidejs.com/
• https://www.jssor.com/
• https://wowslider.com/
• https://swiperjs.com/
• https://kenwheeler.github.io/slick/

Players

• https://videojs.com/
• https://plyr.io/
• http://www.mediaelementjs.com/
• https://github.com/paypal/accessible-html5-video-player
• http://afterglowplayer.com/
• http://www.videogular.com/
• https://github.com/etianen/html5media
• http://player.kaltura.com/docs/
• https://github.com/azatoth/jquery-video
• https://github.com/rsms/html5-video/
• http://jplayer.org/
• https://www.jwplayer.com/

См. также: Видео и аудио кодирование

Pinterest blocks

• https://masonry.desandro.com/
• https://salvattore.js.org/
• https://savvior.org/
• https://github.com/yconst/Freetile
• http://blog.xlune.com/2009/09/vgrid/

Super Select

• https://harvesthq.github.io/chosen/
• https://github.com/michaelperrin/ajax-chosen
• https://select2.org/
• https://selectize.github.io/selectize.js/
• https://www.github.com/pytesNET/tail.select
• http://loopj.com/jquery-tokeninput/
• http://davidstutz.de/bootstrap-multiselect/
• https://github.com/Mobius1/Selectr

Visual Effects

Parallax, dots, globes, etc..

• https://matthew.wagerfield.com/parallax/
• https://vincentgarreau.com/particles.js/
• https://www.jotform.com/blog/particles-animation-codepen-97659/
• https://codepen.io/ImagineProgramming
• https://codepen.io/aecend
• https://geargenerator.com/
• https://www.sliderrevolution.com/resources/css-animated-background/
• https://beltoforion.de/en/spiral_galaxy_renderer/spiral-galaxy-renderer.html
• https://threejs.org/examples/

Glass Effect

• https://wpdean.com/css-glassmorphism/
• https://hype4.academy/tools/glassmorphism-generator
• https://webdesign.tutsplus.com/how-to-create-a-frosted-glass-effect-in-css--cms-32535t
• https://css.glass/

Globe

• https://github.com/vasturiano/three-globe
• https://codepen.io/qkevinto/pen/EVGrGq
• https://github.com/turban/webgl-earth
• https://stripe.com/blog/globe
• https://miniature.earth/
• https://github.com/earthjs/earthjs

3D & WebGL

• https://threejs.org/
• https://freshdesignweb.com/html5-css3-3d-examples-demo/

Custom Scrollbars

• https://github.com/Grsmto/simplebar
• https://github.com/mdbootstrap/perfect-scrollbar
• http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html
• https://github.com/gromo/jquery.scrollbar
• https://github.com/inuyaksa/jquery.nicescroll
• https://github.com/Diokuz/baron
• https://github.com/malte-wessel/react-custom-scrollbars

Date & Time pickers

• https://raw.githack.com/mymth/vanillajs-datepicker/v1.0.3/demo/

Emoji

• https://www.webfx.com/tools/emoji-cheat-sheet/
• https://unicode.org/emoji/charts/full-emoji-list.html
• https://github.com/iamcal/js-emoji
• https://github.com/joypixels/emojify.js
• https://www.kirupa.com/html5/emoji.htm
• https://www.jqueryscript.net/tags.php?/emoji/

Drawers

• https://jspaint.app/
• https://github.com/nhn/tui.image-editor
• https://www.youidraw.com/apps/painter/
• https://carstenschaefer.github.io/DrawerJs/examples/standalone/
• http://canvimation.github.io/
• http://paperjs.org/examples/division-raster/

ASCII

• https://manytools.org/hacker-tools/ascii-banner/
• https://ozh.github.io/ascii-tables/
• https://asciiflow.com/
• http://marklodato.github.io/js-boxdrawing/
• https://patorjk.com/software/taag/
• https://www.asciiart.eu/