понедельник, 21 марта 2016 г.

.NET и ASP.NET


gRPC
https://habr.com/en/company/microsoft/blog/487548/

ASP.NET Core release notes

.net 5 roadmap


.NET книга
https://github.com/sidristij/dotnetbook/tree/master/book/ru

EF.Core
https://docs.microsoft.com/en-us/ef/core/modeling/ - FluenAPI vs data annotations

OWIN

паттерны и антипаттерны
асинхронный код

безопасность

производительность

Использование локальных функций в C#
https://habr.com/en/post/346174/

code coverage

signalr
https://habr.com/en/company/microsoft/blog/446512/

https://habr.com/en/company/clrium/blog/463587/ -

ConfigureAwait, кто виноват и что делать?

https://habr.com/en/company/clrium/blog/462755/ -

Асинхронные Stream в C# 8

https://habr.com/en/post/198694/

Делегаты и события в .NET

https://habr.com/en/post/162353/

Использование async и await в C# — лучшие практики



фукциональный C#


Миграция на System.JSON
https://docs.microsoft.com/ru-ru/dotnet/standard/serialization/system-text-json-migrate-from-newtonsoft-how-to


  • Как эффективнее читать данные с диска (при условии, что у вас .Net)
  • https://habrahabr.ru/company/dbtc/blog/331668/

AZURE
Azure понятным языком [Шпаргалка] перевод

Подборка полезных материалов по Azurehttps://habr.com/en/company/microsoft/blog/327340/

visual studio 2017
https://habrahabr.ru/company/microsoft/blog/323452/
https://github.com/dotnet/eShopOnContainers
https://www.visualstudio.com/ru-ru/news/releasenotes/vs2017-relnotes
https://github.com/evangelism/TechnicalCommunityContent/blob/master/README.md


WEB API
https://www.asp.net/web-api

restful api
https://en.wikipedia.org/wiki/Representational_state_transfer
https://en.wikipedia.org/wiki/Open_Data_Protocol


Дизайн REST API для высокопроизводительных системhttps://habrahabr.ru/post/323010/

Подходы к проектированию RESTful APIhttps://habrahabr.ru/company/dataart/blog/277419/

public event EventHandler Foo = delegate {} public void OnFoo() { // Foo will never be null Volatile.Read(ref Foo).Invoke(this, EventArgs.Empty); }

https://github.com/Microsoft/api-guidelines/blob/master/Guidelines.md

https://channel9.msdn.com/Events/DevCon/Russia-2015/Whats-New-in-ASPNET-MVC-6


ASP.NET MVC
https://docs.asp.net/en/latest/mvc/views/

https://www.visualstudio.com/news/vs2015-update2-vs

https://habrahabr.ru/company/microsoft/blog/280956/

https://msdn.microsoft.com/ru-ru/library/dd831853(v=vs.140).aspx?appId=Dev14IDEF1&l=EN-US&k=k(EHWHttp)%3bk(TargetFrameworkMoniker-.NETFramework,Version%3dv4.5.2)%3bk(DevLang-dhtml)&rd=true

https://msdn.microsoft.com/ru-ru/magazine/hh781022.aspx

http://aspnetmvc.readthedocs.io/projects/mvc/en/latest/migration/migratingfrommvc5.html#create-the-mvc-6-project

http://www.asp.net/mvc/overview/getting-started/introduction/getting-started

https://habrahabr.ru/post/243667/

https://docs.asp.net/en/latest/tutorials/first-mvc-app/start-mvc.html

https://docs.asp.net/en/latest/getting-started/installing-on-windows.html#install-asp-net-5-with-visual-studio

https://metanit.com/sharp/entityframework/




DNX

http://www.codeproject.com/Articles/1005145/DNVM-DNX-and-DNU-Understanding-the-ASP-NET-Runtime




https://docs.asp.net/en/latest/dnx/compilation.html




https://docs.asp.net/en/latest/dnx/overview.html




.NET Standard Library – адекватный стандарт?




.NET CORE

Готовим ASP.NET Core: поговорим подробнее про OWIN и Katanahttps://habr.com/en/company/microsoft/blog/275817/


В ногу со временем: Используем JWT в ASP.NET Corehttps://habr.com/en/company/microsoft/blog/311594/

ASP.NET Core: Пример реализации шаблонов проектирования Единица работы и Репозиторий tutorialhttps://habr.com/en/company/microsoft/blog/312214/



ASP.NET Core: Создание справочных страниц веб-API ASP.NET с помощью Swaggerhttps://habr.com/en/company/microsoft/blog/325872/

Использование Entity Framework Core code-first с СУБД SQLite при разработке WinForms-приложений в VisualStudio 2015 из песочницыhttps://habr.com/en/post/324272/



Создание Web API приложения с использованием .NET Core + MongoDB .NET Driver tutorial

https://habr.com/en/company/simbirsoft/blog/328954/

Документация по .Net Core
https://docs.microsoft.com/ru-ru/dotnet/core/


 обработка ошибок
https://habr.com/en/post/267231/


https://habr.com/en/company/microsoft/blog/459832/ - шаблоны


https://blogs.msdn.microsoft.com/dotnet/2017/05/02/announcing-the-net-framework-4-7-general-availability/

Руководство по ASP.NET Core
.NET Core
Введение в .NET Core

ASP.NET погружение
http://habrahabr.ru/post/273509/
http://habrahabr.ru/company/luxoft/blog/253349/
http://habrahabr.ru/company/nixsolutions/blog/273753/
http://habrahabr.ru/company/microsoft/blog/273493/
http://habrahabr.ru/post/273509/

.NET Core: номера версий и global.json перевод
https://habrahabr.ru/post/329102/


LINUX
https://msdn.microsoft.com/en-us/commandline/wsl/install_guide
https://code.visualstudio.com/docs?start=true
https://github.com/juanfranblanco/vscode-solidity/

асинхронный код
https://devblogs.microsoft.com/dotnet/configureawait-faq/


https://habr.com/en/company/microsoft/blog/473168/ - samesite cookie
https://github.com/sidristij/dotnetbook/tree/master/book/ru

  • Span<T>.
  • Foundational-API, работающие со Span.
  • Reflection emit.
  • SIMD. 

на Комментариев нет:

Современные тренды web-дизайна веб-приложений на середину 2021

Источники информации

Способы организации CSS кода
I. https://habrahabr.ru/post/256109/

Учимся любить БЭМ
II. http://frontender.info/learning-to-love-bem/

Опрос разработчиков на 16 марта 2016
III. Результаты масштабного опросника по CSS (The Results of The Ultimate CSS Survey)
http://www.sitepoint.com/results-ultimate-css-survey/

Статья Как выбрать фреймворк для frontend-разработки
Оригинал
https://medium.com/javascript-and-opinions/state-of-the-art-javascript-in-2016-ab67fc68eb0b#.1gmuglfia

Статья
VI. https://www.keycdn.com/blog/front-end-frameworks/

Каталог отечественных дизайн-систем
http://designsystemsclub.ru

PS
Ссылки на эти статьи даны в круглый скобках
Зелёным цветом указан лучший вариант

1. Общая информация по CSS

Почему CSS4 не существует — объяснение уровней CSS (Why there is no CSS4 — explaining CSS Levels)
https://www.rachelandrew.co.uk/archives/2016/09/13/why-there-is-no-css4-explaining-css-levels/

Первый черновик CSS 5 уровняhttps://css-live.ru/vecssti-s-polej/pervyj-chernovik-css-5-urovnya.html

https://www.w3schools.com/css/default.asp - учебник

http://cssreference.io/
Документация по свойствам CSS для дизайнеров и других специалистов

2. Типографика

Иконки
SVG
От использования иконочных шрифтов в пользу SVG-иконок отказался GitHub
https://twitter.com/webstandards_ru/status/702065716317573120

-----
Вариативные шрифты
представители
https://webkit.org/blog/7051/variable-fonts-on-the-web/
Adobe, Microsoft, Apple и Google реализовали поддержку вариативных шрифтов с помощью OpenType.

Знакомьтесь, вариативные шрифты (variable fonts)!https://type.today/ru/journal/opentype_variables

Introducing OpenType Variable Fonts
https://medium.com/variable-fonts/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369

The variable state of the browsers, early 2017https://www.axis-praxis.org/blog/2017-04-18/18/the-variable-state-of-the-browsers-early-2017

Variable Fonts on the Webhttps://webkit.org/blog/7051/variable-fonts-on-the-web/

Цветные шрифты
http://www.colorfonts.wtf/

3. Архитектура CSS-фреймворков

В основном тут два подхода (см. I)
Популярный объектно-ориентированный OOCSS и более поздний компоненто-ориентированный подход БЭМ (BEM)
  • БЭМ (блок-элемент--модификатор)
    • Автор: Яндекс - https://ru.bem.info
    • Термины
      • Блок (компонента)
      • Элемент - часть блока
      • Модификатор - внешний вид 
    • Оформление
      • Стиль без подчёркивания
      • blockName-elementName--modificator
      • Стиль с подчёркиванием
      • blockName_elementName__modificator
    • Пример со стилем без подчёркивания
      • .fileUploader {}
      • .fileUploader-container {}
      • .fileUploader-container--disable {}
      • .fileUploader-buttonUpload {}
    •  Плюсы (см. I и II)
      • Логика именования позволяет сразу понять что именно обозначает конкретный CSS-класс
      • Каждый элемент находится в пространстве имён, что делает поиск и замену в рамках проекта более надёжным
      • Уменьшается вероятность конфликта между классами
      • Повышается производительность. Так как CSS-селекторы читаются справа налево, а БЭМ основан на использовании одного класса
      • Уменьшается количество проблем с весом селекторов, так как обычно используется только имя класса, без учёта вложенности.
      • Компоненты легко переносятся из проекта в проект. На практике это означает улучшение качества кода и повышение скорости разработки.
    •  Минусы
      • Не всегда длинные названия классов удобны для использования
      • Разметка может содержать массу классов, которые, на самом деле, делают совсем немного
      • Фреймворки, например, Bootstrap, не содержат БЭМ, так что попытка комбинировать их с БЭМ может привести к неоднородности в пространстве имён и возникновению путаницы
    •  Общий вывод
      • Для больших проектов БЭМ — отличный выбор. Он потребует некоторых усилий в начале работы, но сэкономит массу времени в долгосрочной перспективе.
  • OOCSS (Object Oriented CSS)
    • Автор: Nicole Sullivan - http://www.stubbornella.org/content/nicole-sullivan/
    • Основной принцип состоит в выделении классов по функциональному назначению и реиспользовании их при описании компонент
    • Пример со стилем без подчёркивани
      • .container {}
      • .fileUploader {}
      • .fileUploader .container {}
      • .fileUploader .container div{}
      • .disable {}
      • .buttonUpload {}
    •  Плюсы
      • уменьшение количества кода за счет повторного его использования
    •  Минусы
      •  достаточно сложная поддержка: при изменении стиля конкретного элемента скорее всего придется менять сразу в нескольких классах
Существуют попытки развить перечисленные выше подходы, но они были раскритикованы
BEMIT - Автор Гарри Робертс - http://habrahabr.ru/company/paysto/blog/264569/
добавляет в BEM префиксы (c - компонента, u - утилита) и суффиксы (@suffix)
пример u-hidden@print
AtomicCSS - Автор Тьерри Коблентц (Yahoo) -
Оригинальная статьяhttp://www.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/
Тот же OOCSS возведенный в абсолют в сторону максимального реиспользования стилей

4. Лучший CSS-Фреймворк

Самые рекомендуемый OOCSS фреймворк согласно (VI)
Bootstrap
https://github.com/twbs/bootstrap/stargazers

 Самые рекомендуемые БЭМ фреймворки согласно (VI), основанные на принципах
Material Design Litehttps://getmdl.io/

Также есть интересный фреймворк Pure - чистый CSS фреймворк без jquery и javascript

5. MDL-фреймворки

Materialize: 21,515 Stars (VI)
Pros:
  • Huge selection of components
  • Responsive support ensures that websites are supported across all devices
Cons:
  • Large file size makes this a bulky framework to work with
  • No support for Flexbox model
Ideal for: Less experienced developers who need guidance regarding Google’s material design specifications

Material UI: 19,631 Stars (VI)
Pros:
  • Easiest way to meet Google’s material design guidelines when using a framework 
  • Highly customizable 
Cons:
  • Not intended to serve as a starting point for from-scratch web design projects 
  • Need a decent understanding of React to use effectively 

Ideal for: Developers who understand and have experience with React and who need an easy way to adhere to material design guidelines.

-------------------------
Дополнительно
A Practical Introduction to Material Design Lite by Google
Практическое введение в Material Design Lite от Googlehttp://www.sitepoint.com/practical-introduction-material-design-lite-google/

The Beginner’s Guide to Google’s Material Design
Введение в Material Design для новичковhttps://speckyboy.com/beginners-guide-material-design/

Material Design Awards 2016https://design.google/library/material-design-awards-2016/


Material Components — модульные и настраиваемые компоненты Material Design
https://material.io/components/

6. Для тех кто не готов к БЭМ и MDL: Bootstrap

Изменения в Bootstrap 4 по сравнению с Bootstrap 3
1 Убраны Icons
2 Убраны Badges и Lists (horizontal)
2 Добавлена Form Validation
3 Panels изменены  на cards
4 Collapse/Accordion реализуется через collapse вместо panel
5. Кнопки Outline
Для нормализации используется reboot.css вместо normalize.css
-------------------------
Дополнительные ссылки
Шпаргалка по Bootstrap 4 (Bootstrap 4 Cheat Sheet)
https://hackerthemes.com/bootstrap-cheatsheet/

Bootstrap 4: визуальное руководство и обзор нововведений (Bootstrap 4: A Visual Guide)
https://medium.com/wdstack/bootstrap-4-whats-new-visual-guide-c84dd81d8387

Bootsrap 4: что нового и что изменилось в Bootstrap 4, а также шпаргалка с именами классов
http://developer.telerik.com/featured/whats-new-whats-changed-bootstrap-4/
https://bootstrapcreative.com/resources/bootstrap-4-css-classes-index/

7. Preprocessors

1. Sass - 1425 (III)
2. Less - 762 (III)
3. Stylus - 100 (III)
-------------------------
less - уже устарел, например в Boostrap 4 отказываются от его поддержки

sass - это популярный препроцессор, написанный на ruby, который поддерживают все основные фреймворки

stylus - относительно новый препроцессор, написанный на javascript, для больших проектов его рано использовать, но в маленьких вполне обосновано.

8. Post-processing

Лучший минификатор
CSSO (V)
Лучшеее средство для добавления вендорных префиксов
PostCSS - 311 (III)
cssnext - cssnext is a PostCSS plugin, which makes it pretty easy to use for people who are already using PostCSS.
pleeease
autoprefixer/postcss (V)
https://github.com/postcss/postcss
-------------------------
Согласно (V) Autoprefixer, следовало бы использовать, т.к. в этом случае почти все миксины (для свойств с вендорными префиксами) будут не нужны.

Тем не менее PostCSS по прежнему выбор большинства
------------------------
Сравнение лучших CSS пре- и пост- процессоров (What are the best CSS preprocessors/postprocessors?)
https://www.slant.co/topics/217/~best-css-preprocessors-postprocessors

9. Способы организации CSS-кода

По данным статьи https://habrahabr.ru/post/256109/
дополнение из
http://frontender.info/learning-to-love-bem/

  • SMACSS (Scalable and Modular Architecture for CSS) 
    • Автор: Jonathan Snook - https://smacss.com/ 
    • Структура 
      • Base rules — стили основных элементов сайта (body, input) 
      • Layout rules — cтили элементов, которые только раз на странице (футер) 
      • Modules rules — cтили многоразово-используемых элементов 
      • State rules — стили состояния модулей и скелета сайта 
      • Theme rules — стили оформлений, которые, можно заменять 
    • Рекомендации 
      • рекомендуется вводить неймспейсы для классов одной группы 
      • использовать отдельный неймспейс для классов, используемых в JavaScript 
    • Примечание 
      • Позволяет упростить написание и поддержку кода 
      • В последнее время привлекает большое количество разработчиков
  • FUN (Flat hierarchy of selectors, Utility styles, Name-spaced components) 
    • Автор: Ben Frain
    •  Структура
      • F, плоская иерархия селекторов: в стилях рекомендуется использовать классы для выбора элементов, не вкладывать селекторы
      • U, служебные классы: поощряется создание служебных атомарных стилей для решения типовых задач верстки, например, w100 для «width: 100%»
      • N, компоненты с неймспейсами: такой подход позволит избежать совпадений в названиях классов.
    •  Плюсы
      •  код, написанный с использованием этих принципов достаточно удобно писать и поддерживать
      • подход накладывает достаточно мало требований по структуре кода и проекта, он лишь устанавливает предпочтительную форму записи селекторов и способ их использования в разметке 

10. Правила форматирования и оформления стилей и html-кода

Google HTML/CSS Style Guide
https://google.github.io/styleguide/htmlcssguide.xml
На русском
https://habrahabr.ru/post/143452/

Небольшие дополнения взяты с
The CSS toolkit and guidelines that power GitHub.
http://primercss.io/guidelines/

Правила оформления HTML
     Используйте HTML так, как это было задумано.
     <!-- Не рекомендуется -->
    <div onclick="goToRecommendations();">All recommendations</div>
    <!-- Рекомендуется -->
    <a href="recommendations/">All recommendations</a>
     
    Всегда указывайте альтернативное содержимое для мультимедиа. Как минимум пустой альтернативный текст alt=""
     <!-- Не рекомендуется -->
    <img src="spreadsheet.png">
    <!-- Рекомендуется -->
    <img src="spreadsheet.png" alt="Spreadsheet screenshot.">

    Не используйте ссылки-мнемоники.
    <!-- Не рекомендуется -->
    The currency symbol for the Euro is &ldquo;&eur;&rdquo;.
    <!-- Рекомендуется -->
    The currency symbol for the Euro is “€”.

    Не указывайте атрибут type при подключении стилей и скриптов в документ.

    Для абзацев используйте <p> тэг. Не используйте <br> тэги.
    Для списков применяйте <ul>, <ol>, or <dl>. Не используйте множество <div> или <p>.
    Добавляйте <label> к элементам <input>

Правила форматирования HTML
    Use double ("") rather than single quotation marks ('') around attribute values.

Правила оформления CSS
    CSS VALIDATOR http://jigsaw.w3.org/css-validator/

    Вместо использования шифров, или описания внешнего вида элемента,
    попробуйте в имени класса или идентификатора выразить смысл его создания
    /* Не рекомендуется: не имеет смысла */
    #yee-1901 {}
    /* Не рекомендуется: описание внешнего вида */
    .button-red {}
     /* Рекомендуется: точно и по делу */
    .button-danger {}

    Избегайте непонятных сокращений
    /* Не рекомендуется */
    .atr {}
   
    /* Рекомендуется */
    .author {}
   
    Избегайте использование имен классов или идентификаторов с селекторами типа (тега) элемента
    /* Не рекомендуется */
    ul#example {}
    div.error {}
    /* Рекомендуется */
    #example {}
    .error {}

    Не указывайте единицы измерения для нулевых значений

    Разделяйте слова в идентификаторах и именах классов с помощью дефиса.
    /* Не рекомендуется: does not separate the words “demo” and “image” */
    .demoimage {}
    /* Не рекомендуется: uses underscore instead of hyphen */
    .error_status {}
    /* Рекомендуется */
    #video-id {}
    .ads-sample {}

Правила форматирования CSS
Сортируйте правила по алфавиту.
Ставьте точку с запятой после каждого правила
Открывающую фигурную скобку обычно не переносят на другую линию

    Используйте одинарные ковычки ('') в атрибутах правил
    html {
      font-family: 'open sans', arial, sans-serif;
    }

Pixels vs. ems
    Use px for font-size, because it offers absolute control over text.
    Additionally, unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size.

11. Проверка синтаксиса (linting)

Анализируйте ваш CSS с помощью stylelinthttps://css-tricks.com/stylelint/

Как линтить SCSS с помощью stylelint (How to lint SCSS
https://medium.com/@bjankord/how-to-lint-scss-with-stylelint-dc87809a9878

Интеграция Stylelint в ваш процесс разработки для улучшения CSS (Integrate Stylelint Into Your Workflow For Better CSS)
https://web-design-weekly.com/2016/06/15/integrate-stylelint-workflow-better-css/

Линтинг CSS с помощью stylelinthttps://habr.com/en/post/301594/

Stylelint: валидатор стилей, о котором мы всегда мечтали (Stylelint: The Style Sheet Linter We’ve Always Wanted)
https://www.smashingmagazine.com/2016/05/stylelint-the-style-sheet-linter-weve-always-wanted/

Линстинг стилей в JavaScript с помощью stylelint
https://mxstbr.blog/2016/12/linting-styles-in-js-with-stylelint/

stylelint Homepage

Lint your CSS with stylelint
https://css-tricks.com/stylelint/

12. Документация для CSS

13. flexbox

Система атрибутов для Flexbox разметки (Flex Layout Attribute)
http://progressivered.com/fla/?d=0&v=1&h=0&s=3&i=000&a=000

Почти полное руководство по flexbox (без самих flexbox). 
https://habr.com/en/post/281254/
Перевод статьи 
Almost complete guide to flexbox (without flexbox)https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox/

Flexbox Patterns — примеры использования Fexboxhttps://www.flexboxpatterns.com/
(Build awesome user interfaces with CSS flexbox. Examples and source code included.)

5 Flexbox методов, о которых вы должны знать
https://habr.com/en/post/302130/
перевод с
Переводим всё на Flexbox (Going all-in on Flexbox)
https://isotoma.com/blog/2016/09/07/going-all-in-on-flexbox/

Разбираемся с CSS Flexbox за 5 простых шаговhttps://webdesignerwall.com/tutorials/master-css-flexbox-5-simple-steps

Понимание Flexbox: все что вам нужно затьhttps://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af

Слайды доклада «Do Better With Flexbox»http://damonbauer.me/

Flexbox — анимированное руководствоhttps://medium.com/@js_tut/flexbox-the-animated-tutorial-8075cbe4c1b2

Что происходит при создании контейнера Flexbox?

Наиболее распространенные варианты использования Flexbox

Создание гибких лейаутов с помощью Flexbox

14. css-grid layout

CSS Grid Layout. Быстрый стартhttps://habr.com/en/post/325760/

Поэтапное руководство по алгоритму автоматического размещения из CSS Gridhttps://habr.com/en/company/nix/blog/326098/

Терминология CSS Grid Layout Terminology, объяснениеhttps://bitsofco.de/css-grid-terminology/
  
 cssgr.id — онлайн-генератор CSS Grid раскладки•
https://cssgr.id/
 

https://habr.com/company/oleg-bunin/blog/433320/ - Grid Layout как основа современной раскладки

15. Вёрстка писем

Гид по верстке адаптивных писемhttps://habrahabr.ru/company/netologyru/blog/324970/

16. Руководство по цветам

Цвет в системах дизайна (Color in Design Systems)
https://medium.com/eightshapes-llc/color-in-design-systems-a1c80f65fa3

Простое руководство по выбору цветовой палитры (A Simple Web Developer’s Guide To Color)
https://www.smashingmagazine.com/2016/04/web-developer-guide-color/

Мощная онлайн-утилита ColorMe облегает подбор цветов для веба и позволяет конвертировать их, а также играть с параметрами цветовых моделей и мгновенно видеть результат.
https://colorme.io/

18. Дополнительные ссылки

Бесконечный просмотр против постраничной навигации (плюсы и минусы)
Infinite Scrolling vs. Paginationhttp://babich.biz/ux-infinite-scrolling-vs-pagination/

Исчерпывающее руководство по стратегиям загрузки веб-шрифтов
Houdini: один из самых впечатляющих проектов в CSS, о котором вы никогда не слышалиhttps://habr.com/en/company/mailru/blog/282027/

Как не облажаться с дизайном. Инструкция для чайников за 5 минутhttps://habr.com/en/company/iloveip/blog/328492/

19. Styled components

Styled Components
https://github.com/styled-components/styled-components

Скажите привет Houdini и CSS Paint APIhttps://codersblock.com/blog/say-hello-to-houdini-and-the-css-paint-api/

Решено с помощью CSS! Dropdown Menushttps://css-tricks.com/solved-with-css-dropdown-menus/

Вариативные шрифтыhttp://css.yoksel.ru/opentype-variable-fonts/

CSS Grid Level 2: и пришел Subgrid
https://www.smashingmagazine.com/2018/07/css-grid-2/

 API CSS Paint
Как быстро прототипировать приложения с CSS-сеткой и CSS-переменными
5 новых свойств CSS и как их использоватьhttps://www.creativebloq.com/how-to/5-hot-new-css-features-and-how-to-use-them


Новые (и старые) единицы измерения в CSS, о которых вы вряд ли слышалиhttps://habr.com/en/company/poiskvps/blog/421709/

Первый (и странный) публичный черновик CSS-модуля скроллбаровhttps://css-live.ru/vecssti-s-polej/css-scrollbars-fpwd.html

Grid или Flexbox: что выбрать?
https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/


20. Изображения
Почему WebM лучше чем GIF для видео (сравнение)https://techstacker.com/why-webm-is-superior-to-gif-video-comparison/fr6xlr2zhn9usttsh/
на Комментариев нет:

понедельник, 14 марта 2016 г.

Оптимизация и производительность


  

Индекс скорости – что это такое?
https://www.searchengines.ru/indeks-skorosti.html

14 метрик производительности веб-сайтов, которые необходимо анализировать
https://www.searchengines.ru/14-metrik-proizvoditelnosti-veb-sajtov.html

Как ускорить загрузку сайта
https://habrahabr.ru/company/netologyru/blog/337842/

Как быстрее DOM построить: парсинг, async, defer и preload
33 способа ускорить ваш фронтенд в 2017 году
https://habrahabr.ru/company/badoo/blog/320558/

Оптимизация производительности фронтенда. Расшифровка доклада Игоря Алексеенко с Frontend Conf 2017 
https://habr.com/en/company/oleg-bunin/blog/345498/
Оптимизация скорости визуализации веб-страницhttps://habrahabr.ru/company/jugru/blog/342632/
 
Тонкая настройка
https://habr.com/company/oleg-bunin/blog/423085/


Оптимизируем веб с Виталием Фридманом, — компрессия, картинки, шрифты, фичи HTTP/2 и Resource Hintshttps://habr.com/en/company/jugru/blog/354890/
  
Оптимизируем веб с Виталием Фридманом: скорость загрузки, память, CPU
https://habr.com/company/jugru/blog/426155/


Прогрессивная загрузка web-приложения с помощью разделения кода
https://habr.com/post/307694/

https://habr.com/en/company/infobox/blog/226289/ - пример web производительности

preload
https://habr.com/en/post/445264/



https://habr.com/en/company/oleg-bunin/blog/538466/

на Комментариев нет:

Web GL и Web VR

Блог WebKit: Новое поколение 3D графики в вебе

Unity

Unreal

PlayCanvas

A Beginner’s Guide to WebGL
http://www.sitepoint.com/beginners-guide-webgl/

WebGL для всех
http://habrahabr.ru/company/2gis/blog/273735

WebGL2 Fundamentals
http://webgl2fundamentals.org/

Создание 3D движка с JavaScript (Building a 3D Engine with JavaScript)
http://www.sitepoint.com/building-3d-engine-javascript/
Дэвид Руссеhttps://wsd.events/2015/12/13/#david-rousset
рассмотрит основы WebGL и причины, по которым вам тут же придётся выбрать один из фреймворков, вроде
Babylon.js
http://babylonjs.com/
для создания трёхмерных интерфейсов для веба. Основы фреймворка, загрузка 3D-моделей из Blender или Unity, добавление интерактивности с помощью так называемых «физических движков» и многое другое. Презентация в PDF.
https://wsd.events/2015/12/13/pres/babylon.pdf

Визуализация отрисовки элементов на WebGL в замедленном режимеhttp://orbides.org/apps/superslow.html

Three

http://threejs.org/
Three.js - это довольно простая компактная 3D-библиотека, позволяющая рендерить трёхмерные сцены на HTML5 холсте (canvas), SVG и WebGL без использования полноценных игровых движков.
Рекомендации по использованию: если вам нужна простая 3D-визуализация, которую можно вывести на холст
3D в браузере с помощью Three.JShttp://blogs.adobe.com/dreamweaver/2016/04/3d-in-the-browser-with-three-js.html

Babylon

http://www.babylonjs.com/
Babylon.js - трёхмерный движок на базе WebGL и JavaScript. Он позволяет создавать невероятные высококачественные игры соотвествующие современным веб-стандартам с реалистичной физикой, звуком, системой частиц и прочими красотами.
Рекомендации по использованию: при создании любых игр и сложных 3D-сцен.
Создание шейдеров с помощью Babylon.js (Building Shaders With Babylon.js)
https://www.smashingmagazine.com/2016/11/building-shaders-with-babylon-js/

WebVR

WebVR и будущее сайтов (WebVR and the future of websites)
https://www.robertroose.com/blogs/webvr-and-future-websites

Соединяем виртуальные миры: гиперссылки в WebVR(Connecting Virtual Worlds: Hyperlinks in WebVR)
https://blog.mozvr.com/connecting-virtual-worlds-hyperlinks-in-webvr/

Как читать веб-спецификации, или WebVR, как ты работаешь? (How to read web specs Part I – Or: WebVR, how do you work?)
https://dassur.ma/things/reading-specs/

Reactive Audio WebVRhttps://css-tricks.com/reactive-audio-webvr/

Pixi.js


Если вы занимаетесь разработкой фантастически прекрасных 2D-интерфейсов или игр, использующих WebGL, Pixi.js станет для вас настоящей находкой.  

AR.jshttps://github.com/jeromeetienne/AR.js
— дополненная реальность для Web с использованием ARToolKit — 60fps на мобильном

 https://frontendconf.ru/moscow-rit/2019/abstracts/4598

https://habr.com/en/post/177159/ quake in browser

на Комментариев нет:

воскресенье, 13 марта 2016 г.

JavaScript style guide

Основные инструменты

Современные стандарты описаны здесь
https://github.com/airbnb/javascript

Как поставить плагин airbnb
https://www.npmjs.com/package/eslint-config-airbnb

Используйте JSDoc для документирования своего JS / JSX кода
http://usejsdoc.org/

Как настроить eslint для проверки на соответствие airbnb и JSDoc
http://eslint.org/docs/user-guide/getting-started

По этой ссылке можно найти информацию, какой код не надо писать
https://github.com/Droogans/unmaintainable-code

Ниже кратко основные правила Airbnb и несколько рекомендаций

JavaScript Language Rules

Semicolons
Always use semicolons (;)

Function Declarations Within Blocks
// bad 
if (x) {
  function foo() {}
}
// good 
if (x) {
  var foo = function() {};
}
 
delete
Prefer this.foo = null.

eval()
Не использовать для строк
Only for code loaders and REPL (Read–eval–print loop)

with() {}
никогда не используйте

this
Only in object constructors, methods, and in setting up closures

for-in loop
Only for iterating over keys in an object/map/hash

JavaScript Style Rules

Naming
functionNamesLikeThis
variableNamesLikeThis
ClassNamesLikeThis
EnumNamesLikeThis
methodNamesLikeThis
CONSTANT_NAMES_LIKE_THIS
foo.namespaceNamesLikeThis.bar
filenameslikethis.js


Строки
Предпочтительно ' над "

Фигурные скобки
if (something) {
  // ...
} else {
  // ...
}

Инициализация структур
// запятые ставим справа
var inset = {
  top: 10,
  right: 20,
  bottom: 15,
  left: 12
};

Аргументы функций
Если это возможно, аргументы размещайте на одной строке

Formatting Code - Prettier

Средство, которое жёстко задаёт определённые правила форматирования кода, приводя код к единообразному виду, что позволяет придерживаться единого стиля в проектах разного масштаба.

В то время, как инструменты для линтинга, вроде https://eslint.org/, уже давно умеют https://eslint.org/docs/user-guide/command-line-interface#--fix, Prettier отличается гораздо большими возможностями. В отличие от ESLint, Prettier поддерживает JSON, CSS, SASS, и даже GraphQL и Markdown. Кроме того, он предлагает глубокую https://prettier.io/docs/en/integrating-with-linters.html и со многими популярными https://prettier.io/docs/en/editors.html.

Пожалуй, если говорить о средствах автоматического форматирования кода, сообществу JS осталось лишь прийти к единому мнению по поводу точки с запятой.
In most cases, it is recommended to setup Prettier on top of ESLint and stylelint and integrate it into the workflow. This allows the code to be formatted into consistent style automatically via commit hooks, so that developers do not need to spend time formatting the coding style manually.
Note that Prettier only enforces coding style, but does not check for logic errors in the code. Hence it is not a replacement for linters.

Study Links


StandardJS is a standalone Node module that can lint and fix your code, but if you want to use it in a big existing project and deactivate some rules (because some would need a lot of modifications), you can also use the https://github.com/feross/eslint-config-standard. 




на Комментариев нет:

среда, 9 марта 2016 г.

Современные тренды web-разработки на 2021

Гайды

Настраиваем удобный npm проект для себя и команды или немного о современных фронтенд инструментах


Чеклист фронтенд-разработчика
https://habrahabr.ru/company/netologyru/blog/347740/

Как мы запустили offline-версию сайта RG.RU
https://habrahabr.ru/company/oleg-bunin/blog/348150/

Фронтенд — это не больно!. Пособие для разработчиков и сочувствующих

8 вещей, которые должен изучить разработчик фронтенда

О повышающейся сложности фронтенда

Еще одна причина использовать noopener — глубокое погружение в распределение процесса рендеринга

frontend-case-studieshttps://github.com/andrew--r/frontend-case-studies
— курируемый список с техническими докладами и статьями об корпоративной фронтенд разработке в реальном мире  

Верхнеуровневая архитектура фронтенда. Лекция Яндекса

Siteaudit: проведите аудит вашего сайта (Pagespeed, Lighthouse, A11y) прямо из терминала

Источники информации

I.
Web Developer Roadmap — 2017https://github.com/kamranahmedse/developer-roadmap
перевод
Как стать веб-разработчиком в 2017 году — план действийhttps://habr.com/en/company/netologyru/blog/328426/

Статья Как выбрать фреймворк для frontend-разработки
Оригинал
https://medium.com/javascript-and-opinions/state-of-the-art-javascript-in-2016-ab67fc68eb0b#.1gmuglfia

Восходящие звезды 2017-го в JavaScript. Полный обзор ландшафта 2017: тренды фреймворков фронтенда и ноды, инструментария, IDE, мобильных, тестирования и т.п.
https://risingstars.js.org/2017/en/

What’s the difference between JavaScript and ECMAScript?
Стек технологий JavaScript с нуля (перевод материалов «JavaScript Stack from Scratch»)https://github.com/UsulPro/js-stack-from-scratch

https://www.thoughtworks.com/radar/languages-and-frameworks


Базовая настройка окружения для разработки JavaScripthttps://italonascimento.github.io/configuring-a-basic-environment-for-javascript-development/

Настройка минимального, полезного окружения для JavaScript разработки (Setting up a Minimal, Yet Useful JavaScriptDev Environment)

Что поправить в верстке перед выпуском в продакшн?https://habrahabr.ru/post/319664/

Security tools

https://snyk.io/ is a commercial tool for discovering, fixing, and preventing known vulnerabilities in JavaScript, Java, and Ruby applications. The service has its own database of vulnerabilities and takes the data from the NSP and the NIST NVD. It allows developers to cure the security risks using patches and upgrades offered by the company.

https://nodesecurity.io/ offers useful tools for scanning dependencies and detecting vulnerabilities. NSP uses its own database, built from npm modules scans, as well as data from public bases like NIST National Vulnerability Database (NVD). On the top of that, NSP provides integration with GitHub Pull Request and CI software, real-time checks, alerts, and recommendations on how to handle vulnerabilities within your Node.js apps.

http://retirejs.github.io/retire.js/ is an open-source dependency checker. It includes various components, like a command-line scanner, Grunt plugin, Firefox and Chrome extensions, Burp and OWASP ZAP plugins. Retirejs collects the vulnerability information from the NIST NVD and other sources, like bug-tracking systems, blogs, and mailing lists.

https://gemnasium.com/ is a commercial tool with a free trial option. It supports various technologies and packagers, including Ruby, PHP, Bower (JavaScript), Python, and npm (JavaScript). Gemnasium security tool comes with helpful features, like auto-update, real-time alerts, security notifications, and Slack integration.

https://ossindex.net/ supports various ecosystems (Java, JavaScript, and .NET/C#) and multiple platforms, like NuGet, npm, Bower, Chocolatey, Maven, Composer, Drupal, and MSI. It gathers the information about vulnerabilities from National Vulnerability Database, various security feeds, and contributions, made by the community.

Безопасность

Опасный target="_blank"https://habr.com/en/post/282880/
Добавляйте в ссылки
rel="noopener"
rel="nofollow noopener"
rel="noreferrer" - для FireFox

HTTP-3

HTTP-3  разрушение основ и дивный новый мир!!
https://habr.com/en/company/dododev/blog/473930/

HTTP-2 на базе SDPY-3
При использовании HTTP/2 все эти запросы будут выполняться в рамках одного TCP-соединения, а значит, если один из сегментов любого запроса потеряется или придёт неверно, передача всех запросов и ответов остановится, пока не будет восстановлен потерявшийся сегмент. Очевидно, что чем хуже качество соединения, тем медленнее работает HTTP/2

Если между браузером и сервером есть облако то там свой NGINX с reverse proxy
облако конвертирует HTTP-2 в HTTP 1-1

Разьяснение  HTTP2
https://habr.com/en/post/221427/

QUIC на базе qQUIC на базе UDP

QUIC работает в User space а не Kernel Space
как следствие потребляет больше ресурсов (примерно в 3 раза)

На замену TCP и TLS Обсуждение протокола QUIC
обсуждалось что делаем DTLS (TLS поверх UDP) и QUIC поверх DTLS
QUIC хуже TCP если сеть не гарантирует доставку пакетов (мобильная сеть)
https://habr.com/en/company/vasexperts/blog/509630/

от TCP к QUIC
https://habr.com/en/company/oleg-bunin/blog/461829/

Протокол QUIC в деле: как его внедрял Uber, чтобы оптимизировать производительность
https://habr.com/en/company/Voximplant/blog/463073/
https://habr.com/en/company/vdsina/blog/501840/


TLS основан на SSL 3

TLS (включая 1.3) в технических подробностях 
https://tls.dxdt.ru/tls.html
доступно про TLS 
https://habr.com/en/company/plesk/blog/507094/

отличие TLS 1.3 от TLS 1.2
https://habr.com/en/company/it-grad/blog/352668/

установка TLS 1.3
https://github.com/facebookincubator/fizz

What is the Difference Between HTTP and HTTPS
https://www.keycdn.com/blog/difference-between-http-and-https/ 

JavaScript

README.md

Это отправная точка при погружении в проект, она встречает вас базовой информацией:
  • Установка — тут описаны все шаги, как запустить проект, чтобы даже «дизайнер» мог это сделать; 
  • Запуск — примеры базовых команд для запуска проекта; 
  • Опции запуска — список всех возможных параметров и их описание; 
  • «Первые шаги» — собственно, это и есть нужный раздел:
    • быстрый поиск UI-блока — описание инструмента для препарирования приложения; 
    • «Что? Где? Когда?» — краткое описание структуры проекта; 
    • создание UI-блока — минимальная информация, как создать UI-блок; 
    • «Логика приложения, или где искать обработку событий?»; 
    • Примеры/скринкасты — экспериментальный раздел с примерами.

Инструменты, обеспечивающие качество кода

http://newwebstandarts.blogspot.ru/2016/03/javascript-style-guide.html

Работа с пакетами, сборка и компиляция. Devops

What frameworks do you use?

1. React
2. Angular
3. Vue.js

Оптимальная комбинация ReactJs + redux + ImmutableJS + библиотеки (V)
ReactJs + Redux + ES6 + webpack + npm + jss + autoprefixer + eslint + Elemental UI + karma (V)\

Recompose
A React utility belt for function components and higher-order components.

react-loadable
A higher order component for loading components with promises.

React Navigation
Learn once, navigate anywhere

React Router
Declarative routing for React

Автогенерация кода

1. Yeoman - 405 (II)

Yeoman - может сгенерировать код за тебя, и ты можешь заюзать его для создания нескольких приложений сразу (III)
-------------------------
Можно создать шаблонный проект (например там ASP.NET MVC+Webpack+React+Redux) сохраняешь его в Yeoman (локально) и потом можно использовать для "быстрого старта". У Yo есть публичный репозиторий, можно использовать шаблоны оттуда (в основном там Node.js, но есть и ASP.NET CORE)
-------------------------
Полезные ссылки
http://yeoman.io/learning/index.html
Заключение: Yeoman - стандартная рекомендация.

Работа с датами - momentjs

http://momentjs.com/docs/
Лучшая из существующих реализаций Datetime на JS. Понимает любые форматы, включая поддержку русского языка

Прогрессивные веб-приложения

  •  Метод постепенного улучшения: приложение использует как можно больше окружений. Если необходим какой-либо сервис, приложение применяет то, что есть в наличии, или корректно прекращает работу, если ничего не найдено
  • Адаптивный пользовательский интерфейс: приложение подстраивается под различные способы ввода (касание, речь и т. д.) и вывода данных (разные размеры экрана, вибрация, аудио, брайлевские дисплеи).
  • Оффлайн-поддержка 
  • UI, подогнанный под приложение: приложение перенимает UI-элементы нативных платформ, в том числе и быструю загрузку пользовательского интерфейса, который может быть заархивирован путем кэширования ассетов с помощью Service Worker.
  • Постоянные обновления: Service Worker API определяет процесс для автоматического обновления приложений. 
  •  Защищенное соединение: используется защищенный протокол передачи данных HTTPS для предотвращения слежки и атак.
  •  Обнаружение приложения: метаданные, такие как https://www.w3.org/TR/appmanifest/, позволяют поисковым системам находить веб-приложения. 
  •  Взаимодействие push-уведомлений: они помогают пользователям быть в курсе событий. 
  • Нативная установка: на некоторые платформы можно установить веб-приложение, ничем не отличающееся от нативного (иконка на главном экране, отдельная позиция на панели многозадачности, UI браузера опционален). 
  •  Залинкованность: возможность с легкостью расшаривать приложения по URL и запускать их без установки. 
Изучаем Progressive Web App. Подборка ресурсов
https://github.com/ragingwind/learning-pwa

Progressive Web App Checklisthttps://web.dev/pwa-checklist/

      
Руководство для начинающих по прогрессивным веб-приложениям и фронтенду 
https://habr.com/en/company/mailru/blog/334536/

Дерзкие планы Microsoft по поводу PWA в Windows 10




• Build 2018: Microsoft анонсировала ряд новых возможностей для PWA-приложений
https://microsoftportal.net/windows-9/9605-build-2018-microsoft-anonsirovala-ryad-novyh-vozmozhnostey-dlya-pwa-prilozheniy.html



PWA — это просто 
https://habr.com/post/418923/

https://habr.com/en/company/piter/blog/494334/ - Прогрессивные веб-приложения. Руководство к действию

Интересные проекты

Fetch
Meteor

 RxJs
Observables для JavaScript
https://github.com/Reactive-Extensions/RxJS
Библиотека для работы с асинхронными потоками данных. Наблюдатель, поставщик-потребитель и все такое

Polymer (html 5 components) - 309 (I) / 50 (II)
https://medium.com/polymer-in-production/why-polymer-%D0%B2%D0%B5%D0%B1-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B-%D0%B2-%D0%BF%D1%80%D0%BE%D0%B4%D0%B0%D0%BA%D1%88%D0%BD%D0%B5-%D1%87%D0%B0%D1%81%D1%82%D1%8C-1-1f0bf99a32ce#.i7iupzdh2
Шпаргалка по Polymer

МОДУЛИ

Модульная система [RU] – основы использования нативных модулей
https://learn.javascript.ru/modules


Эволюция модульного JavaScript
https://habrahabr.ru/company/yandex/blog/192874/

Модульная структура проекта
Многие фреймворки ее предоставляют. Но в крайних случая можно пользоваться и
https://www.chris-granger.com/2013/01/24/the-ide-as-data/,
https://github.com/evancz/elm-architecture-tutorial/,
https://github.com/Day8/re-frame
и
https://cycle.js.org/.

Веб-скрапинг


Существует множество отличных утилит для веб-скрапинга, некоторые из которых, вроде https://github.com/cheeriojs/cheerio, работают на уровне исходного HTML-кода, а некоторые, такие как https://github.com/GoogleChrome/puppeteer, позволяют обрабатывать страницы средствами полноценного браузера. Что именно выбрать — зависит от целей конкретного проекта, так как работа с HTML гораздо быстрее и требует меньше системных ресурсов, в то время как автоматизация браузера без пользовательского интерфейса сложнее и требует более серьёзной предварительной подготовки.

▍Cheerio


https://github.com/cheeriojs/cheerio — это быстрая, гибкая и миниатюрная реализация основных возможностей jQuery, созданная специально для сервера и предназначенная для работы с HTML.

Cheerio — это отличный инструмент для быстрого чернового веб-скрапинга, подходящий для разбора HTML-кода страниц. Это средство отличается удобным синтаксисом, похожим на jQuery и предназначено для обхода HTML-документов и выполнения манипуляций с ними. Cheerio хорошо сочетается с библиотекой https://github.com/request/request-promise-native, предназначенной для загрузки удалённых HTML-документов.

▍Puppeteer


https://github.com/GoogleChrome/puppeteer — это Node-API для управления браузером Chrome без пользовательского интерфейса.
В отличие от cheerio, puppeteer — это обёртка для автоматизации Chrome без пользовательского интерфейса, которая весьма полезна для работы с современными веб-приложениями, в том числе — одностраничными, основанными на JavaScript. Так как работа ведётся с браузером Chrome, puppeteer характеризуется высоким уровнем поддержки современных веб-страндартов. Это влияет на возможность правильного формирования страниц и выполнения скриптов. Браузер Chrome без пользовательского интерфейса — инструмент сравнительно новый, но он, весьма вероятно, постепенно вытеснит более старые средства, такие как https://phantomjs.org/
Headless Chrome Node API
Puppeteer is one of the great stories of the year. Made by the Google Chrome team, it's a headless Chrome browser, that is to say a browser that runs in the background and that can be piloted by code.

It can be used to do things like:
Automatically testing web application UIs in real browsers.
Taking snapshots of web pages to do server-side rendering.

Generating PDF files using Google Chrome ability to save pages as PDF files.


Create React App
Create React apps with no build configuration.


Axios
Promise based HTTP client for the browser and node.js
The https://github.com/axios/axios library is the most used HTTP client.

It can work on both the client side (AJAX requests from the client) or on the server-side (HTTP requests in a Node.js environment)

Its success may be related to Vue.js too, because a lot of Vue.js tutorials use it to query a distant API through HTTP.



D3
Bring data to life with SVG, Canvas and HTML.

Animate.css
A cross-browser library of CSS animations. As easy to use as an easy thing.


Compilers
TypeScript
Babel
Flow
Reason
Purescript
ClojureScript
Elm
Compiler for Elm, a functional language for reliable webapps.

NODE.JS
Express
Fast, unopinionated, minimalist web framework for node.

Koa
Expressive middleware for node.js using ES2017 async functions

https://koajs.com/ Expressive middleware for node.js using generators https://koajs.com/ philosophy is close to https://expressjs.com/ but it's built using ES6 generators to avoid a problem sometimes called https://www.sitepoint.com/saved-from-callback-hell/


Fastify
Fast and low overhead web framework, for Node.js

micro
Asynchronous HTTP microservices

Keystone
node.js cms and web app framework

Nest
A progressive Node.js framework for building efficient and scalable server-side applications on top

Feathers
A REST and realtime API layer for modern applications.
Feathers A REST and realtime API layer for modern applications. Feathers is a very flexible solution to create a "service oriented" architecture, it's a good fit to create node.js microservices

Server.js
Simple and powerful server for Node.js

Loopback
LoopBack makes it easy to build modern applications that require complex integrations.
Loopback LoopBack is an open source Node.js framework built on top of Express optimized for building APIs for mobile, web, and other devices. Connect to multiple data sources, write business logic in Node.js, glue on top of your existing services and data, connect using JS, iOS & Android SDKs. Loopback is another mature framework with a lot of built-in features, including authentication with token and connectors to any kind of database.       The killer feature is the API explorer that lets developers check all API end-points in an intuitive way, with the ability to check any user's token. It's definitively a good choice if you have to build an API.

Hapi (худшие результаты по по производительности уходит на спад)
Hapi Server Framework for Node.js       Restify node.js REST framework specifically meant for web service APIs Trails Modern Web Application Framework for Node.js.


CSS IN JS
Styled Components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without
In 2017, Styled Components added 8.7k stars, making it the #1 most popular CSS-in-JS library on GitHub – Tweet

CSS Modules
Documentation about css-modules

Polished
A lightweight toolset for writing styles in JavaScript ✨

Glamorous
Maintainable CSS with React

Emotion
The Next Generation of CSS-in-JS

Styled JSX
Full CSS support for JSX without compromises

Aphrodite
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum

Glamor
inline css for react et al

JSS
JSS is an authoring tool for CSS which uses JavaScript as a host language.

Radium
Radium
A toolchain for React component styling.


GRAPHQL
React Starter Kit
React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, Post

Apollo client
A fully-featured, production ready caching GraphQL client for every UI framework and GraphQ



Relay
Relay is a JavaScript framework for building data-driven React applications.

Apollo Server
GraphQL server for Express, Connect, Hapi, Koa and more

Graphcool
Prisma turns your database into a realtime GraphQL API

Vulcan
A toolkit to quickly build apps with React, GraphQL & Meteor

GraphQL Playground
GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collabor

РАЗНОЕ
json-server
Get a full fake REST API with zero coding in less than 30 seconds (seriously)

Feather
Simply beautiful open source icons

Frappé Charts
Simple, responsive, modern SVG Charts with zero dependencies

socket.io
Realtime application framework (Node.JS server)

SemanticUI
Semantic is a UI component framework based around useful principles from natural language.

Lodash
A modern JavaScript utility library delivering modularity, performance, & extras.

echarts
A powerful, interactive charting and visualization library for browser




на Комментариев нет:
Подписаться на: Сообщения (Atom)

mlops

  . Почти вся информация по вопросу собрана в гитхабе  awesome-mlops , который курирует Лариса Висенгериева, главный эксперт сайта ml-ops.or...

  • Интересное
           https://poedinki.ru/  https://mikhailivanov.ru/   https://ru.wikipedia.org/wiki/Vaporwave  https://en.wikipedia.or...
  • Современные тренды web-разработки на 2021
    Гайды Настраиваем удобный npm проект для себя и команды или немного о современных фронтенд инструментах https://habr.com/post/417429/ ...
  • Electron and Visual Studio Code и Atom
    VIM Emacs Sublime Notepad++ Electron – технология, разработанная GitHub. Она позволяет строить кроссплатформенные десктопные прилож...